コンテンツ セキュリティ ポリシー指令の違反: インライン スクリプトは「script-src 'self'」仕様に準拠していません
P粉276064178
2023-08-15 14:48:52
<p><code>react-create-app</code> を使用して Chrome 拡張機能を構築します。 React-create-app で <code>npm run build</code> を使用すると、次のエラーが発生します: </p>
<ブロック引用>
<p>インライン スクリプトの実行は、コンテンツ セキュリティ ポリシー ディレクティブ「script-src 'self'」に違反するため拒否されます。インライン実行を有効にするには、「unsafe-inline」キーワード、ハッシュ ('sha256-5=')、または 1 回限りの nonce ('nonce-...') を使用します。 </p>
</blockquote>
<p><code>index.html</code></p> のエラー
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html lang="ja">
<頭>
<meta charset="utf-8" />
<link rel="ショートカット アイコン" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width、initial-scale=1" />
<meta name="テーマカラー" content="#000000" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<リンク
rel="スタイルシート"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u"
クロスオリジン=「匿名」
/>
<!--
Manifest.json は、Web アプリケーションがユーザーのモバイル デバイスまたはデスクトップにインストールされるときに使用されるメタデータを提供します。 https://developers.google.com/web/fundamentals/web-app-manifest/ を参照してください。
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
上記のタグで %PUBLIC_URL% が使用されていることに注意してください。
ビルド プロセス中に、これは「public」フォルダーの URL に置き換えられます。
HTML から参照できるのは「public」フォルダ内のファイルのみです。
「/favicon.ico」や「favicon.ico」とは異なり、「%PUBLIC_URL%/favicon.ico」はクライアント ルートおよびルート以外のパブリック URL で正しく機能します。
「npm run build」を実行して、非ルートのパブリック URL を構成する方法を学習します。
-->
<title>React アプリ</title>
</head>
<本体>
<noscript>このアプリケーションを実行するには JavaScript を有効にする必要があります。 </noscript>
<div id="ルート"></div>
<!--
この HTML ファイルはテンプレートです。
ブラウザで直接開くと、空白のページが表示されます。
このファイルには、Web フォント、メタ タグ、または分析を追加できます。
ビルドステップでは、バンドルされたスクリプトを ` タグに入れます。
開発を開始するには、「npm start」または「yarn start」を実行します。
本番バンドルを作成するには、「npm run build」または「yarn build」を使用します。
-->
</ボディ>
</html></pre>
<p><strong>manifest.json</strong></p>
<pre class="brush:php;toolbar:false;">{
"manifest_version": 2、
"name": "IC プロジェクト クロム拡張機能",
"description": "この拡張機能は、実際の Chrome 拡張機能を作成するための出発点です",
"バージョン": "0.0.1",
"ブラウザアクション": {
"default_popup": "index.html",
"default_title": "ポップアップを開く"
}、
「アイコン」: {
"16": "assets/icon-128.png",
"48": "assets/icon-128.png",
"128": "assets/icon-128.png"
}、
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}</pre>
<p><br /></p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
数時間イライラした後、うまくいく解決策を見つけました。スクリプトの実行方法は Mac と PC で異なります。私が見つけた答えの多くには、「set」がある場合とない場合で違いがありました。 「&&」が付いているものもあれば、付いていないものもあります...しかし、どれも私にとっては機能しません。
つまり、次のように「cross-env」npm パッケージを使用します:
リーリーこれは PC 上で動作しますが、おそらく Mac でも動作します。もちろん、これを行う前に
npm install --save-devcross-envを実行する必要があります。