Chrome拡張機能でReactが動作しない。CSP（Content Security Policy）違反を解決したい

Chrome拡張で新しいタブを開いたときに独自のページを表示するアプリを作成しています。
フレームワークにReactを採用したいと考えているのですが、うまく動作しません。
「Hello,World!」を表示するだけなのですが、「babel.min.js」でCSP（Content Security Policy）違反が発生しています。manifest.jsonの「content_security_policy」をいろいろ変えてみましたが、解決には至りませんでした。
なんとか解決したいのですがお力を貸していただけないでしょうか？よろしくお願いいたします。

以下にソースコードを記載します。補足が必要でありましたら随時追加していきますのでよろしくお願いいたします。

GitHub
https://github.com/tosutosu/ReactTest

manifest.json

json
1{
2    "manifest_version": 2,
3    "name": "React Test 20190424",
4    "version": "0.0.1",
5    "chrome_url_overrides": {
6      "newtab": "new_tab.html"
7    },
8    "icons": {
9        "16": "img/icons/icon16.png",
10        "32": "img/icons/icon32.png",
11        "128": "img/icons/icon128.png"
12    },
13    "permissions": [ "storage", "activeTab" ],
14    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
15}

　
new_tab.html

html
1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="utg-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1">
7  <meta http-equiv="x-ua-compatible" content="ie-edge">
8</head>
9
10<body>
11  <div id="machine">
12  </div>
13  <script src="js/react.production.min.js"></script>
14  <script src="js/react-dom.production.min.js"></script>
15  <script src="js/babel.min.js" charset="utf-8"></script>
16  <script type="text/babel">
17    ReactDOM.render(
18      <h1>Hello, world!</h1>,
19      document.getElementById('machine')
20    );
21  </script>
22</body>
23
24</html>

　
エラーメッセージ
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-Yivr6trT5nM/Td82Jsci6a/aL0lCJBWJAY9lF0808CY='), or a nonce ('nonce-...') is required to enable inline execution.

行動規範の内容に同意します

回答1件

ベストアンサー

Chrome 拡張で HTMLの中に <script> タグでコードを書くことはできません。(インラインでJavaScriptを記述しない)

babel.min.js は動的に <script> タグを挿入するのでエラーが出ているようです。

JSX をプロジェクトに追加するを参考に Chrome で読み込む前に変換するようにしてください。

投稿2019/04/24 10:59

wtokuno

総合スコア448

TosuTosu

2019/04/26 07:00

回答ありがとうございます。今回の質問ですが実験の結果以下のようにして解決することができました。 manifest.json にエラーコードに記述されたsha256ハッシュをCSPに追記する。今回の場合は以下のコードになります。 manifest.json ... "content_security_policy": "script-src 'self' 'sha256-Yivr6trT5nM/Td82Jsci6a/aL0lCJBWJAY9lF0808CY='; object-src 'self'" ... 今はテスト段階としてHTML内にスクリプトタグを記述していますが、実際の環境ではHTML外に記述しますね。またJSXの変換記事、参考になりました。ありがとうございます。

行動規範の内容に同意します