APIキーとかを利用する際、外部にダダ漏れすることを防ぎたい。

Question

疑問

ふと疑問を抱いたので質問させていただきます。
現在Reactを利用していろいろアプリを実装中なのですが
JSの場合chromeのようなdev tools上にコードが公開されるため
セキュリティ強化するため右クリック禁止、ドラッグ禁止で対応していますが
この対応のみでOKでしょうか？

目的

APIキーとかを利用する際、外部にダダ漏れすることを防ぎたい。

対応策

Reactの共通テンプレート「App.js」に読み込み
全ページで右クリック禁止、ドラッグ禁止させる。
dev toolsをユーザーに開かせない。

// 右クリック禁止
document.oncontextmenu = () => { return false; }
// ドラッグ禁止
document.ondragstart = () => { return false; }

もし上記対応が間違いであるなら、セキュリティに詳しい方ご教示お願いできますでしょうか？

Comments

[yoorwm]

> 試しにchromeの詳細設定からJSを無効にしたところ、
> そもそもReactはJSなので画面されないので個人的には問題ないのではと思っております。
JSを無効にしたら動作しないと思いますが、何を言おうとしていますか？

[hoshi-takanori]

右クリック禁止は利便性を損なうだけで、セキュリティ上は意味がありません。
API キーは漏れることを前提に、リファラーを制限するなどの対策を行いましょう。
https://teratail.com/questions/48603

Answer 1

「対応策」で示された方法では、JavaScriptのソースコードを秘匿することはできません。
いくつかの方法がありますが、例えば（Windowsの場合）、

• Ctrl-U でソースコードを閲覧する
• アドレスバー上で view-source: スキームを使う（ソースコードが表示される）
• Ctrl-Shift-I でデベロッパーツールを表示する
• F12でデベロッパーツールを表示する
• メニューからデベロッパーツールを表示する

などがあります。
では、どうすればよいかというと、既に「質問への追記・修正の依頼」にコメントされているように、JavaScriptはソースコードを閲覧されることを前提としてセキュリティを組み立てるしかありません。