违反内容安全策略指令:内联脚本未符合"script-src 'self'"规范
P粉276064178
P粉276064178 2023-08-15 14:48:52
[JavaScript讨论组]

我使用react-create-app来构建我的Chrome扩展程序。当我在react-create-app中使用npm run build时,我遇到了以下错误:

拒绝执行内联脚本,因为它违反了以下内容安全策略指令:"script-src 'self'"。要启用内联执行,需要使用"unsafe-inline"关键字、哈希值('sha256-5=')或一次性随机数('nonce-...')。

index.html中的错误

<!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>

manifest.json

{
  "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'"
}


P粉276064178
P粉276064178

全部回复(1)
P粉447785031

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

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

cross-env INLINE_RUNTIME_CHUNK=false react-scripts build

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号