Javascript 内容安全策略：无法在 Chrome 扩展程序中加载 Google API
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12129077/
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
Content Security Policy: cannot load Google API in Chrome extension
提问by Laurent
This is relative an Chrome extension. I am trying a simple one which uses the Google Chart API
这是一个相对的 Chrome 扩展。我正在尝试一个使用 Google Chart API 的简单方法
I have this code in my html document "popup.html", which is loaded on the click on the Icon.
我在我的 html 文档“popup.html”中有这个代码，它是在点击图标时加载的。
<!doctype html>
<html>
<head>
<script type="text/javascript" src="js/libs/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi?key=xxxxxxxxxxx"></script>
[...]
</body>
</html>
I get the following message:
我收到以下消息：
Refused to load the script 'http://www.google.com/jsapi?key=xxxxxxxxxxx' because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".
拒绝加载脚本“http://www.google.com/jsapi?key=xxxxxxxxxxx”，因为它违反了以下内容安全策略指令：“script-src 'self' chrome-extension-resource:”。
I understood it is something relative to permissions, I tried to modify my Manifest file but without success:
我知道这与权限有关，我尝试修改我的清单文件但没有成功：
{
[...]
"manifest_version": 2,
"permissions": ["http://*.google.com/"],
"content_security_policy": "script-src 'self' http://www.google.com; object-src 'self'",
}
Any idea?
任何的想法？
采纳答案by Some Guy
Just make it use the httpsprotocol instead. The error you're getting is regarding the Content Security Policy.
只需让它使用https协议即可。您收到的错误与内容安全策略有关。
See the Relaxing the default policysection of the page. It mentions that you can only whitelist HTTPS, chrome-extension, and chrome-extension-resource.
请参阅Relaxing the default policy页面的部分。它提到，你只能白名单HTTPS，chrome-extension和chrome-extension-resource。
回答by fivedogit
I wrestled with this issue for the past 12 hours and finally got it to work. Why did it take so long? Because I got thrown off the trail multiple times. First, the false leads:
在过去的 12 个小时里，我一直在努力解决这个问题，终于让它发挥作用。为什么花了这么长时间？因为我多次被甩出赛道。一、虚假线索：
"Make it HTTPS" -- Doesn't matter. My Chrome extension now makes regular HTTP calls to a different domain and works just fine. (UPDATE: A little more clarification. The "make it https" myth is rooted in a similar problem people tend to have when it comes to SCRIPT loading. If you need to bring in an outside .js file, then yes, you need to modify your content_security_policy and include the proper hostname, which seems to only accept https. Keep in mind this is different than hitting an external hostname for something like REST services. As I stated before, this does not require modification of the content_security_policy, nor https.)
"Use JSONP in your JQuery AJAX calls" -- This might be a way to address cross-domain AJAX in normal web pages, but isn't necessary in a chrome extension due to the built-in Content Security Policy. Further, implementing JSONP sounds like a PITA because it requires server-side changes to handle the callback parameter (or something, I'm still not sure). In any case, not necessary.
"Mess with the Content Security Policy (CSP) string in your extension" - Under manifest version 2, the default string works fine: "script-src 'self'; object-src 'self'". You don't even have to explicitly specify it. What you need is a to include the domain you're trying to hit from the extension as a "permission" value.
“使其成为 HTTPS”——无所谓。我的 Chrome 扩展程序现在对不同的域进行常规 HTTP 调用并且工作正常。（更新：多一点澄清。“使它成为 https”的神话根源于人们在 SCRIPT 加载时往往遇到的类似问题。如果您需要引入外部 .js 文件，那么是的，您需要修改您的 content_security_policy 并包含正确的主机名，它似乎只接受 https。请记住，这与为 REST 服务之类的东西点击外部主机名不同。正如我之前所说，这不需要修改 content_security_policy，也不需要修改 https。 )
“在您的 JQuery AJAX 调用中使用 JSONP”——这可能是一种在普通网页中解决跨域 AJAX 的方法，但由于内置的内容安全策略，这在 chrome 扩展中不是必需的。此外，实现 JSONP 听起来像 PITA，因为它需要服务器端更改来处理回调参数（或其他什么，我仍然不确定）。无论如何，没有必要。
“与扩展中的内容安全策略 (CSP) 字符串混淆” - 在清单版本 2 下，默认字符串工作正常：“script-src 'self'; object-src 'self'”。您甚至不必明确指定它。您需要的是将您尝试从扩展中访问的域包含为“权限”值。
The solution:
解决方案：
Remove all inline javascript from your extension. Get it into a separate .js file. I suspect that for most html files with any decent amount of javascript, this process will suck. Luckily for me, all I had was a body onload which I was able to move into a separate js file as window.addlistener onload event instead.
从您的扩展程序中删除所有内联 javascript。将其放入单独的 .js 文件中。我怀疑对于大多数包含大量 javascript 的 html 文件，这个过程会很糟糕。对我来说幸运的是，我所拥有的只是一个主体 onload，我能够将其作为 window.addlistener onload 事件移动到一个单独的 js 文件中。
The page you really need to read to get past this issue is here: https://developer.chrome.com/apps/contentSecurityPolicy
您真正需要阅读以解决此问题的页面在这里：https: //developer.chrome.com/apps/contentSecurityPolicy
回答by intotecho
I get this error [Report] when I run Augury chrome extension to debug an Angular app. Disable the extension and the error goes away. This won't help people who are writing extensions, but it may help those that aren't.
当我运行 Augury chrome 扩展来调试 Angular 应用程序时，我收到此错误 [报告]。禁用扩展，错误就会消失。这不会帮助那些正在编写扩展的人，但它可能会帮助那些没有的人。
[Report Only] Refused to load the script 'https://apis.google.com/js/googleapis.proxy.js?onload=startup' because it violates the following Content Security Policy directive: "script-src 'report-sample' 'nonce-EagvF0PX1Z3gVL2Dka1hbA' 'unsafe-inline' 'strict-dynamic' https: http:". 'strict-dynamic' is present, so host-based whitelisting is disabled. Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
