Electron + React + Webpack + Babel 'content-security-policy' ’unsafe-eval’について

問題点

ElectronでReactを使うためにWebpack + Babelを導入したが、electroを起動時に'Hello!'が上手いこと表示されなかった。
chromeの開発者ツールにてエラー内容を見ると以下のエラーが発生していた。

エラー内容

bundle.js:19 Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

    at Object../src/app.js (bundle.js:19)
    at __webpack_require__ (bundle.js:133)
    at bundle.js:156
    at bundle.js:158

エラーの翻訳

bundle.js：19 Uncaught EvalError： 'unsafe-eval'は、
次のコンテンツセキュリティポリシーディレクティブで許可されているスクリプトのソースではないため、
JavaScriptとして評価することを拒否しました： "script-src'self '"。

bundle.jsを上手いこと読み込めていない？？

evalとは

文字列からJavaScriptに変換する関数のことですが、使用するとセキュリティリスクが非常に上がります。
そのため非推奨となります。 というか絶対に使わない方が良さそう。

eval() を使わないでください!
MDNのサイトの引用ですが、かなりきつめのアドバイス。
developer.mozilla.org

evalを許可すると、どうなる？？

evalを許可すると、文字列をJavaScriptコードとして解釈するようになるため、XSS攻撃の対象となります。
そのため非推奨となります。
一旦、'Hello!'を表示させたいのでevalコンテンツセキュリティーポリシーに'unsage-eval'を追加。

  <meta http-equiv="content-security-policy" content="script-src 'self' 'unsafe-eval'; object-src 'none'; base-uri 'none'">

HelloWorldが表示されましたが、別の警告が出ました。

警告

Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
  Policy set or a policy with "unsafe-eval" enabled. This exposes users of
  this app to unnecessary security risks.

For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.

翻訳

セキュリティリスクについて警告してくれています。 別の解決策を考えましょう。

Electronセキュリティ警告（安全でないコンテンツ-セキュリティ-ポリシー）このレンダラープロセスには、コンテンツセキュリティがありません
   ポリシーセットまたは「unsafe-eval」が有効になっているポリシー。 これにより、
   不必要なセキュリティリスクにこのアプリ。

詳細とヘルプについては、
https://electronjs.org/docs/tutorial/security。
この警告は表示されません
アプリがパッケージ化されたら。

webpackのbuild時にデフォルトでeval()という関数で文字列をJavaScriptコードに変換しているようなので、devtoolでbuildの方式を変更する。
webpack build後にbundle.jsを確認すると違いがわかりやすい。

webpack.configに追加

devtool: 'cheap-module-source-map'

webpack build後に無事エラーが解消されHello Worldが表示されました。

参考サイト stackoverflow.com

webpack.js.org