Chrome 扩展“拒绝加载脚本，因为它违反了以下内容安全策略指令”

Posted 2023-03-05

【中文标题】Chrome 扩展“拒绝加载脚本，因为它违反了以下内容安全策略指令”

【英文标题】：Chrome Extension "Refused to load the script because it violates the following Content Security Policy directive"

【发布时间】：2016-04-29 05:57:34

【问题描述】：

我正在尝试创建一个 Chrome 扩展程序，但我的 JS 都不起作用。控制台显示此错误：

拒绝加载脚本 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js' 因为它违反了以下内容安全政策指令： “script-src 'self' blob：文件系统：chrome-extension-resource：”。

为什么它会阻止我的 jQuery 运行？

【问题讨论】：

您是否将其添加到清单中？

@epascarello 这就是问题所在，因为我不知道我还可能遗漏什么。如何将其添加到清单中？

Extension refuses to load the script due to Content Security Policy directive的可能重复

【参考方案1】：

我找到了这个解决方案

清单 V3

"content_security_policy": 
    "extension_pages": "script-src 'self'; object-src 'self'; script-src-elem 'self' 'unsafe-inline' https://music.yandex.ru/;"

【参考方案2】：

我会告诉你长话短说。 Google Chrome 具有 CSP（内容安全策略），这意味着 chrome 扩展程序不允许外部脚本。如果您使用的是vue cdn，那么只需执行以下步骤即可。

在 manifest.json 中添加以下代码并根据需要更改文件名。

'unsafe-eval'

是您要查找的内容，只需添加此内容即可。

    "manifest_version": 2,
    "name"            : "Hello Extension",
    "version"         : "1.0",
    "permissions": [
        "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"
    ],
    "background": 
        "scripts": ["popup.js"],
        "persistent": false
      ,
    "description"     : "Testing the hello world extension",
    "icons": 
        "16"    : "icons16.png",
        "48"    : "icons16.png",
        "128"   : "icons16.png"
    ,
    "browser_action": 
        "default_icon"   : "icons16.png",
        "default_popup" : "popup.html"
    ,
    "content_security_policy": "script-src 'self' 'unsafe-eval' https://cdn.jsdelivr.net; object-src 'self'"

在您的 external js 此处

popup.js

添加 Vue 代码，一切都会很好。

var app = new Vue(
    el: "#app",
    data: 
        name: ""
    
);

【讨论】：

如何将 content_security_policy 更新为 manifest v3...正如许多人所说的那样会有不同。

【参考方案3】：

根据Chrome Extension documentation，您需要将外部资源的副本下载到您的包文件夹中并在本地加载脚本。

不允许加载外部脚本。

【讨论】：

不允许加载外部脚本？但是如何将其更改为允许？

【参考方案4】：

如 Chome website 中所述， 有一个内容安全策略阻止您的脚本加载远程脚本：

允许通过 HTTPS 从 example.com 加载脚本资源的宽松策略定义可能如下所示：

"content_security_policy": "script-src 'self' https://example.com; object-src 'self'"

所以在你的情况下，manifest.json 应该包含：

 
  "name": "My Extension",
  "manifest_version": 2,
  "background":
     "scripts": [...]
  ,
  "content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
 

【讨论】：

@serv-inc 你知道多个端点的语法是什么吗？

@Jun: 从w3c.github.io/webappsec-csp/#header-content-security-policy、w3c.github.io/webappsec-csp/#grammardef-serialized-policy 和w3c.github.io/webappsec-csp/#grammardef-serialized-directive 开始，您应该可以只添加值（如果您的意思是只向script-src 添加一个元素，否则，只需添加另一个带有分号的指令;)

@serv-inc right, "content_security_policy": "script-src 'self' example.com example2.com; object-src 'self'", ; 标记最后一个跨度>

example.com 中发生了什么？域名？ jquery 文件？你能根据OP的帖子给出一个完整的例子吗？

【参考方案5】：

内容安全策略是您应用程序的另一层安全保护。它可以让您定义您加载任何样式、脚本或数据的所有来源。对于每种样式、脚本、字体或连接，您需要指定要在应用程序中加载的域。如果您使用的是其他域的 CDN jQuery，则需要在 Content Security Policy 中指定该域。

如果您不想要这个额外的安全层并且想从您希望的任何域加载样式或脚本，只需在 index.html 中添加以下元标记并确保它位于任何导入之前.

<meta http-equiv="Content-Security-Policy" content="default-src *;">

这里 * 是通配符，可让您访问任何域。如果你想要这个额外的安全层，我建议你去documentation，它非常清楚如何指定你想要在你的应用程序中导入的所有域

【参考方案6】：

好吧，你不能为 js 使用 CDN，你将不得不复制“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”的内容并在你的 js 目录中创建一个新文件并将其命名为 jquery.min.js 并将所有内容粘贴到其中，然后在您的 HTML 文件标题中删除包含此 url 的行并改用此

<script src="js/jquery.min.js"></script>

但请确保这是包含上述 url 中所有数据的文件的写入路径

干杯，

【参考方案7】：

我的 HTML 文件有 <script> some js code within it </script>。删除脚本标签后，错误消失了。

【参考方案8】：

您是否在清单 JSON 文件中允许它。像这样的：

manifest.json

 
   "name": "My Extension",
   "content_scripts": [
     "js": ["jquery.min.js", "YourjavascriptFile.js"],
     "matches": ["http://*/*", "https://*/*"]
   ]
 

我省略了一些必填字段，但只是给出了基本概念。

【讨论】：

现在全部设置好了。感谢您的帮助，这很值得！

好吧，这并没有按计划进行。我现在收到以下控制台错误：Uncaught ReferenceError: $ is not defined

使用此语法后，我得到一个“加载扩展失败”