首页  >  问答  >  正文

违反内容安全策略指令:内联脚本未符合"script-src 'self'"规范

<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提供了在用户的移动设备或桌面上安装您的Web应用程序时使用的元数据。请参阅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>
P粉276064178P粉276064178432 天前519

全部回复(1)我来回复

  • P粉447785031

    P粉4477850312023-08-16 13:58:19

    经过几个充满挫败的小时后,我找到了一个有效的解决方案。在Mac和PC之间运行脚本有所不同。我找到的很多答案都有带有“set”和不带有“set”的区别。有的带有“&&”,有的没有...但是对我来说都不起作用。

    简而言之:像这样使用“cross-env” npm包:

    cross-env INLINE_RUNTIME_CHUNK=false react-scripts build

    这在PC上可以工作,可能在Mac上也可以。当然,在此之前你需要先npm install --save-dev cross-env

    回复
    0
  • 取消回复