jQuery 由于内容安全策略指令，扩展拒绝加载脚本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25867584/
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
Extension refuses to load the script due to Content Security Policy directive
提问by Maharshi
Following is my code of HTML
以下是我的 HTML 代码
Scripts:
脚本：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="background.js"></script>
HTML:
HTML：
<button name="btnlogin" id="btnlogin">Login</button><br/><br/>
and following is js
以下是js
$(document).ready(function(){
document.getElementById("#btnlogin").click(function(){
alert("s");
});
});
manifest file:
清单文件：
{
"manifest_version": 2,
"name": "One-click Kittens",
"description": "This extension demonstrates a 'browser action' with kittens.",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
}
I found that when I run this code simply in browser than alert appears properly but when I run it as a chrome extension it gives me following errors.
我发现当我简单地在浏览器中运行此代码时，警报会正确显示，但是当我将它作为 chrome 扩展运行时，它会给我以下错误。
Uncaught ReferenceError: $ is not defined
未捕获的 ReferenceError: $ 未定义
and
和
Refused to load the script 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".
拒绝加载脚本“ http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”，因为它违反了以下内容安全策略指令：“script-src 'self' chrome -扩展资源：”。
I don't understand what are these errors. Please help me understanding the extension..
我不明白这些错误是什么。请帮助我理解扩展名..
Thank you
谢谢
回答by apsillers
In a Chrome extension, external script sources must be explicitly allowed by the extension's content security policy(CSP) in your manifest:
在 Chrome 扩展程序中，您的清单中扩展程序的内容安全策略(CSP)必须明确允许外部脚本源：
If you have a need for some external JavaScript or object resources, you can relax the policy to a limited extent by whitelisting secure origins from which scripts should be accepted...
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'"
如果您需要一些外部 JavaScript 或对象资源，您可以通过将应接受脚本的安全来源列入白名单，在有限程度上放宽策略...
允许通过 HTTPS 从 example.com 加载脚本资源的宽松策略定义可能如下所示：
"content_security_policy":"script-src 'self' https://example.com; object-src 'self'"
Scripts can only be loaded into an extension over HTTPS, so you must load the jQuery CDN resource over HTTPS:
脚本只能通过 HTTPS 加载到扩展中，因此您必须通过 HTTPS 加载 jQuery CDN 资源：
<script src="https://ajax.googleapis.com/..."></script>
And add a modified CSP to your manifest to allow that HTTPS resource:
并将修改后的 CSP 添加到您的清单以允许该 HTTPS 资源：
{
"manifest_version": 2,
"name": "One-click Kittens",
"description": "This extension demonstrates a 'browser action' with kittens.",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
}
And even better solution for your particular case, however, would be to include jQuery in your extension locally, instead of loading from the Internet (for example, your extension currently won't work offline). Simply include a copy of jQuery in your extension folder and refer to it with a relative path in your script tag. Assuming your jQuery library and HTML popup file are in the same subdirectory, simply do:
但是，对于您的特定情况，更好的解决方案是将 jQuery 包含在本地扩展中，而不是从 Internet 加载（例如，您的扩展当前无法脱机工作）。只需在您的扩展文件夹中包含一份 jQuery 副本，并在您的脚本标签中使用相对路径引用它。假设您的 jQuery 库和 HTML 弹出文件位于同一个子目录中，只需执行以下操作：
<script src="jquery-x.y.z.min.js"></script>
回答by Stanislav
<script nonce='<?= CSP::getNonce() ?>'>
var oldCreate = document.__proto__.createElement;
document.__proto__.createElement = function (elementName) {
var el = oldCreate.apply(this, arguments);
if (elementName == "script") {
el.setAttribute('nonce', '<?= CSP::getNonce() ?>');
}
return el;
}
</script>
<script nonce='<?= CSP::getNonce()?>' type="text/javascript" src="/include/jquery.js"></script>
