質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

2回答

3857閲覧

SPAでJavaScriptのソースコードを隠す方法について。

ya_ma_to

総合スコア12

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/03/12 23:16

現在ReactJSを利用してWebアプリケーションを開発しています。
当方フロントエンジニアで、サーバーサイドの知識があまりないにも関わらずAPIの構築が必要になったため、APIをAWSのlambdaやdynamodbを利用して作成し、フロントはReactJSで構築し、S3にホスティングする形でwebアプリケーションを構築しています。

そこで質問なのですが、フロントページをs3などにホスティングすると、ブラウザからアクセスした時に、ディベロッパーコンソールを利用することでJavaScriptのソースコードが見えてしまうのがいやだなあという感じがしています。

実際、データの受け取り、描画以外のビジネスロジックはlambdaに書いているのでそれほど問題はないのかもしれませんが、このような構成でフロントのJavaScriptソースコードを隠蔽することは可能なのでしょうか?

そもそも気にする必要ないとか、そういう意見でも構いませんので、何か経験あるからいらっしゃいましたら、回答お願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

セキュリティがしっかりしていれば、気にする必要はあまりないと思います。
minifyすれば解読するのはかなり難しくなりますし。
完全に隠蔽したいならサーバサイドレンダリングするしかないかもです。

投稿2018/03/12 23:27

編集2018/03/12 23:28
naga3

総合スコア1293

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ya_ma_to

2018/03/12 23:34

なるほど。回答ありがとうございます。 自分でサーバーやインフラの設定をするのはセキュリティの不安があったためサーバーレスでlambdaやdynamodbを活用することにしました。 公開すべきでない情報を謝ってフロントに書かないように注意してやろうと思います。
guest

0

最初のはあまりにヒドイ回答です。
naga3、あなたはあまりに無知だと言わざるを得ず、回答者にほど遠く値しません。

ソースコードの流出はセキュリティー上十分に問題になりますし、なにより苦心惨憺して完成させたサービスが簡単にパクれてしまいます。あなたはフロントエンドの開発にかかった費用や期間を補償できるのですか?

ソースコードの流出は技術者が最も神経を使わなければいけない重要箇所の一つです!(あたりまえです!!)

質問の回答ですが、ソースコードが見えているのではなく、ソースコードが見える仕掛けが働いて見えているのです。
Reactのコードはビルドすればminify他さまざまな加工が自動的に行われ、元のコードに戻すことができないコードが出力されます。

ブラウザで実行されているのは、このビルド後のコードなのですが、元のコードからかけはなれた形となるため、デバッグ時に元のコードを追うことが困難になります。

そのためmapファイルというソースコードとビルド後のコードを紐づける役割を持ったファイルが生成されるのです。このmapファイルには紐付け情報の他に元のコードも全て入っています。このファイルのおかげで、ビルド後のコードを実行しつつ、元のコードのデバッグが可能になるわけですが、本番環境もこのファイルが入れっぱなしになっていると見事ソースコードの漏洩と相成ります。

このmapファイルはenvファイルにGENERATE_SOURCEMAP=falseの一行を追加すれば出力されないくなります。
質問者さんのレベルだとenvファイルを環境別に作成してpackage.jsonと連動するような仕掛けまで考えが及んでいないと思いますので、まずは本番用と開発用のenvファイルを作成するところからはじめられれば良いかと思います。

投稿2021/05/18 17:41

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2021/05/19 08:25

> Reactのコードはビルドすればminify他さまざまな加工が自動的に行われ、元のコードに戻すことができないコードが出力されます。 多少読みやすいか読みにくいかの差がある程度で、「公開される」という意味では大差ないです。
退会済みユーザー

退会済みユーザー

2021/05/19 14:34

大差がありますね。なにを言っているんでしょうか。 コメントをどのように書くべきか、変数にどのような命名をすべきか、優れたコードとはどのようなものか、長年にわたり議論され、いくつも重要な本が出ています。 プロジェクトに携わる全てのエンジニアにとって理解しやすくした工夫が、ビルド後のコードでは完全に消えてなくなります。 分かりやすいコメントや意味を伝える変数の命名といった情報は無視しても問題ないような小さな差なのでしょうか。 これらが不完全で問題となったプロジェクトが、どれほど存在しているかご存知ないのでしょうか。 あなたはGoogleがドキュメントに力を入れている事を知っていますか? 技術者として正常な神経をお持ちであるか、疑わざるを得ませんね。
maisumakun

2021/05/19 22:12 編集

dtaさんの回答中にある「ソースコードの流出はセキュリティー上十分に問題になりますし、なにより苦心惨憺して完成させたサービスが簡単にパクれてしまいます。」というのは、圧縮後でもほとんど変わらないです。
Zuishin

2021/05/20 00:03 編集

「ソースコード」が何を指すかについて認識の違いがあるように思います。 プログラマーの書いたものがソースコードで、変換済みのものがそうでないとしても、JavaScript である以上簡単にパクることができます。 質問者さんの言う「ソースコード」はこの変換済みのコードを指していると思われます。 流出することでセキュリティ上の問題が生じるようなコードは、たとえ難読化しても提供すべきではないし、苦心惨憺の努力を守りたければ特許や使用許諾で法的に保護するのが正攻法です。 その上で map ファイルを保護することにも多少の意味はあると思いますが、本質的な問題は解決していないので、そこまで興奮するようなことでもないでしょう。どうせなら WebAssembly を使ってみてはどうですか? 難読化と同時にパフォーマンスもアップしますよ。
miyabi_takatsuk

2021/05/20 00:10

回答の内容には直接関係ありませんが、 回答の冒頭、naga3さんの回答への意見は、naga3さんの回答のコメントにて行うべきかと。
K_3578

2021/05/20 05:37 編集

回答内容はともかく、 回答の最初の部分、 >最初のはあまりにヒドイ回答です。 naga3、あなたはあまりに無知だと言わざるを得ず、回答者にほど遠く値しません。 はnaga3氏への攻撃的表現に値するとして低評価しました。 仮に意見を述べるとしても回答のコメント欄で行うべき事です。 追記 人には攻撃的な表現を使っておきながら自分が指摘されたら退会するんかい。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問