Javascript Chrome 扩展“拒绝加载脚本，因为它违反了以下内容安全策略指令”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34950009/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chrome Extension "Refused to load the script because it violates the following Content Security Policy directive"
提问by Mia
I'm trying to create a Chrome extension, but none of my JS works. The console shows this error:
我正在尝试创建一个 Chrome 扩展程序，但我的 JS 都不起作用。控制台显示此错误：
Refused to load the script 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".
拒绝加载脚本“ https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”，因为它违反了以下内容安全策略指令：“script-src 'self' blob : 文件系统: chrome-extension-resource:"。
Why is it blocking my jQuery from running?
为什么它阻止我的 jQuery 运行？
回答by Charles Gueunet
As explained on the Chome website, there is a Content Security Policy preventing your script to load remote script:
正如在 Chome网站上所解释的，有一个内容安全策略阻止您的脚本加载远程脚本：
A relaxed policy definition which allows script resources to be loaded from example.com over HTTPS might look like:
"content_security_policy": "script-src 'self' https://example.com; object-src 'self'"
允许通过 HTTPS 从 example.com 加载脚本资源的宽松策略定义可能如下所示：
"content_security_policy": "script-src 'self' https://example.com; object-src 'self'"
So in your case, the manifest.jsonshould contain:
所以在你的情况下，manifest.json应该包含：
{
"name": "My Extension",
"manifest_version": 2,
"background":{
"scripts": [...]
},
"content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
}
回答by epascarello
Did you allow it in your manifest JSON file. Something like this:
您是否在清单 JSON 文件中允许它。像这样的东西：
{
"name": "My Extension",
"content_scripts": [{
"js": ["jquery.min.js", "YourJavaScriptFile.js"],
"matches": ["http://*/*", "https://*/*"]
}]
}
There are required fields I left out, but just giving the basic idea.
我遗漏了一些必填字段，但只是给出了基本的想法。
回答by Shahrukh Anwar
I will tell you long story short. Google Chrome has CSP (Content Security Policy), which means chrome extensions don't allow the external script. If you are using the vue cdnthen just perform following steps and your are good to go.
我会告诉你长话短说。谷歌浏览器有CSP (Content Security Policy)，这意味着 Chrome 扩展不允许外部脚本。如果您正在使用，vue cdn则只需执行以下步骤即可。
- Add following code in your manifest.json and change your filenames as per need. Here 'unsafe-eval'is the thing you are looking for, just add this.
- 在 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'"
}
- In your
external jshere popup.jsadd the Vue code and everything will work great.
- 在您
external js这里的popup.js 中添加 Vue 代码，一切都会很好。
var app = new Vue({
el: "#app",
data: {
name: ""
}
});
回答by Kareem Essawy
well, you cant use CDN for js, you will be have to copy the content of "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" and create a new file inside your js directory and call it jquery.min.js and paste everything in it , then in your HTML file header remove the line that has this url in it and use this one instead
好吧，您不能将 CDN 用于 js，您必须复制“ 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>
but make sure that this is the write path for the file that contains all the data in the mentioned url
但请确保这是包含上述 url 中所有数据的文件的写入路径
cheers,
干杯，
回答by Shiva Sairam M
Content Security Policy is another layer of security for your application. It lets you define all the origins from which you are loading any styles, scripts or data. For each of the style, script, font or connect, you need to specify the domains which you are loading in your application. If you are using a CDN jQuery of another domain, you need to specify this domain in the Content Security Policy.
内容安全策略是应用程序的另一层安全保护。它允许您定义加载任何样式、脚本或数据的所有来源。对于每个样式、脚本、字体或连接，您需要指定要在应用程序中加载的域。如果您使用的是其他域的 CDN jQuery，则需要在内容安全策略中指定该域。
If you don't want this added layer of security and would like to load styles or scripts from any domain you wish, just add this following meta tag in your index.html and make sure this is located before any of your imports.
如果您不想要这个增加的安全层，并且想要从您希望的任何域加载样式或脚本，只需在 index.html 中添加以下元标记，并确保它位于任何导入之前。
<meta http-equiv="Content-Security-Policy" content="default-src *;">
here * is the wildcard character which lets you access any domain. If you want this added layer of security I suggest you go to the documentationwhich is very clear about how to specify all the domains you want import in your application
这里 * 是通配符，可让您访问任何域。如果您想要这个额外的安全层，我建议您转到文档，该文档非常清楚如何指定要在应用程序中导入的所有域
回答by Jared Cordova
According to the Chrome Extension documentation, you need to download a copy of the external resource into your package folder and load the script locally.
根据Chrome 扩展文档，您需要将外部资源的副本下载到您的包文件夹中并在本地加载脚本。
Loading external scripts is not allowed.
不允许加载外部脚本。
回答by Deke
My HTML file had <script> some js code within it </script>. When removed the script tags, the error was gone.
我的 HTML 文件有<script> some js code within it </script>. 删除脚本标签后，错误消失了。
