[React] 開発者ツールなどでソースコードを隠す方法まとめ

Google ChromeやSafari などのブラウザ開発者ツールでは、作ったReactのコードが参照できてしまいます。

しかし、セキュリティ上ソースコードを見せたくない場合があるかと思います。

今回は、このソースコードを見えなくする方法の備忘録となります。

ソースコードを隠す方法は下記の通りです。

GENERATE_SOURCEMAPをfalseに設定

create-react-appを使ってReactアプリケーションを作成している場合は、GENERATE_SOURCEMAPをfalseに設定することで開発者ツールのソースマップにコードが表示されなくなります。

% npx create-react-app my-app1

上記でReactアプリを作成後、package.jsonが自動的に作られます。

このpackage.jsonの「build」部分を下記のように変更することでソースマップに表示されなくなります。

"scripts": {
    "start": "react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

バックエンド側でソースを書く

Next.jsというReactを使って静的なサイトやサーバサイドでレンダリングされるアプリケーションを作成することができるフレームワークを利用します。

Reactアプリのすべてのソースコードを隠す必要性はないと思いますので、必要がある部分とそうでない部分をフロントエンドとバックエンドに分けて作成するのが良いでしょう。

保守性含め一番推奨する方法ですね。

有料の難読化ツールを使う

世の中には難読化ツールなるものが存在します。

難読化とは、プログラムの動作を買えずにコード内の変数名や構造等を読み取りづらくするように改変、加工することをいいます。

あくまで読み取りづらくしているだけで、100%複製できないわけではありません。

一番有名なのが「JSDefender」ですかね。気になる方は下記参照してみてください。

JSDefender for Javascript

最後に

セキュリティの一環であるソースコードを隠す/難読化する方法は様々な言語で数多く存在しますが、やはりフロントエンドとバックエンドで分けて開発するのが一般的ですね。

上記踏まえて是非ご検討ください。