違反內容安全策略指令：內聯腳本未符合"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>
<blockquote>
<p>拒絕執行內聯腳本，因為它違反了以下內容安全策略指令："script-src 'self'"。要啟用內聯執行，需要使用"unsafe-inline"關鍵字、雜湊值（'sha256-5='）或一次性隨機數（'nonce-...'）。 </p>
</blockquote>
<p><code>index.html</code>中的錯誤</p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
<!--
manifest.json提供了在使用者的行動裝置或桌面上安裝您的網路應用程式時所使用的元資料。請參閱https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
注意上面標籤中使用了%PUBLIC_URL%。
在建置過程中，它將被替換為`public`資料夾的URL。
只有`public`資料夾中的檔案可以從HTML中引用。
與"/favicon.ico"或"favicon.ico"不同，"%PUBLIC_URL%/favicon.ico"將在客戶端路由和非根公共URL上正確工作。
執行`npm run build`以了解如何設定非根公共URL。
-->
<title>React App</title>
</head>
<body>
<noscript>您需要啟用JavaScript才能執行此應用程式。 </noscript>
<div id="root"></div>
<!--
此HTML檔案是一個範本。
如果直接在瀏覽器中開啟，將會看到一個空白頁面。
您可以在此文件中新增Web字體、元標籤或分析。
建置步驟將把捆綁的腳本放入``標籤中。
要開始開發，請執行`npm start`或`yarn start`。
若要建立生產捆綁包，請使用`npm run build`或`yarn build`。
-->
</body>
</html></pre>
<p><strong>manifest.json</strong></p>
<pre class="brush:php;toolbar:false;">{
"manifest_version": 2,
"name": "IC Project chrome extension",
"description": "This extension is a starting point to create a real Chrome extension",
"version": "0.0.1",
"browser_action": {
"default_popup": "index.html",
"default_title": "Open the popup"
},
"icons": {
"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>
經過幾個充滿挫敗的小時後，我找到了一個有效的解決方案。在Mac和PC之間運行腳本有所不同。我找到的很多答案都有帶有“set”和不帶有“set”的區別。有的帶有“&&”，有的沒有...但是對我來說都不起作用。
簡而言之：像這樣使用「cross-env」 npm套件：
這在PC上可以工作，可能在Mac上也可以。當然，在此之前你需要先
npm install --save-dev cross-env。