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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

Chrome extension

Chrome拡張機能

React.js

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

Q&A

解決済

1回答

5783閲覧

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

TosuTosu

総合スコア49

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

Chrome extension

Chrome拡張機能

React.js

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

0グッド

1クリップ

投稿2019/04/24 05:56

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.

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

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

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

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

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

guest

回答1

0

ベストアンサー

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の変換記事、参考になりました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問