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

syqv5f0l  于 9个月前  发布在  Go
关注(0)|答案(8)|浏览(333)

我正在尝试创建一个Chrome扩展,但我的JS都不起作用。控制台显示此错误:
拒绝加载脚本“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”,因为它违反了以下内容安全策略指令:“script-src 'self' blob:filesystem:chrome-extension-resource:“。
为什么它阻止我的jQuery运行?

pdkcd3nj

pdkcd3nj1#

正如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'",
 }

字符串

uqdfh47h

uqdfh47h2#

你是否允许它出现在你的manifest JSON文件中。类似这样:
manifest.json

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

字符串
我省略了一些必填字段,但只是给出了基本的想法。

kiayqfof

kiayqfof3#

我长话短说。谷歌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 herepopup.js中添加Vue代码,一切都会很好地工作。
var app = new Vue({
    el: "#app",
    data: {
        name: ""
    }
});

um6iljoc

um6iljoc4#

我找到了这个解决办法

清单V3

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

字符串

0h4hbjxa

0h4hbjxa5#

内容安全策略是应用程序的另一个安全层。它允许您定义加载任何样式,脚本或数据的所有来源。对于每个样式,脚本,字体或连接,您需要指定您在应用程序中加载的域。如果您使用另一个域的CDN jQuery,则需要在内容安全策略中指定此域。
如果你不想要这个额外的安全层,而想从你想要的任何域加载样式或脚本,只需在你的index.html中添加以下Meta标签,并确保它位于任何导入之前。

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

字符串
这里 * 是允许您访问任何域的字符。如果您想要增加安全层,我建议您访问documentation,它非常清楚如何指定您想要在应用程序中导入的所有域

svmlkihl

svmlkihl6#

好吧,你不能为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中所有数据的文件的写入路径
干杯,

c8ib6hqw

c8ib6hqw7#

根据Chrome扩展文档,您需要将外部资源的副本下载到您的软件包文件夹中,并在本地加载脚本。
不允许加载外部脚本。

tzdcorbm

tzdcorbm8#

我的HTML文件有<script> some js code within it </script>。当删除脚本标记时,错误消失了。

相关问题