内容安全策略：无法在 Chrome 扩展程序中加载 Google API答案

【问题标题】：Content Security Policy: cannot load Google API in Chrome extension内容安全策略：无法在 Chrome 扩展程序中加载 Google API
【发布时间】：2012-08-26 09:40:23
【问题描述】：

这是一个相对的 Chrome 扩展。我正在尝试一个使用 Google Chart API 的简单方法

我的 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>

我收到以下消息：

拒绝加载脚本“http://www.google.com/jsapi?key=xxxxxxxxxxx”，因为它违反了以下内容安全政策指令：“script-src 'self' chrome-extension-resource:”。

我知道这是与权限相关的事情，我试图修改我的 Manifest 文件但没有成功：

{
  [...]
  "manifest_version": 2,
  "permissions": ["http://*.google.com/"],
  "content_security_policy": "script-src 'self' http://www.google.com; object-src 'self'",
}

有什么想法吗？

【问题讨论】：

使用https: 资源。 Http 资源永远不能被列入白名单。

标签： javascript google-chrome-extension google-api content-security-policy

【解决方案1】：

在过去的 12 个小时里，我一直在努力解决这个问题，终于让它发挥了作用。为什么花了这么长时间？因为我多次被甩出赛道。一、假线索：

“设为 HTTPS”——没关系。我的 Chrome 扩展程序现在对不同的域进行常规 HTTP 调用，并且工作正常。（更新：再澄清一点。“使其成为 https”的神话植根于人们在脚本加载时往往遇到的类似问题。如果您需要引入外部 .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'”。您甚至不必明确指定它。您需要的是包含您尝试从扩展中访问的域作为“权限”值。

解决办法：

从您的扩展程序中删除所有内联 javascript。将其放入单独的 .js 文件中。我怀疑对于大多数带有大量 javascript 的 html 文件来说，这个过程会很糟糕。对我来说幸运的是，我所拥有的只是一个主体 onload，我可以将它作为 window.addlistener onload 事件移动到一个单独的 js 文件中。

您真正需要阅读以解决此问题的页面在这里：https://developer.chrome.com/apps/contentSecurityPolicy

【讨论】：

请展示如何解决这种情况的代码示例，尤其是在清单文件中的content_security_policy。
@E.E.33 这个 repo 很旧，扩展名已经失效，但它有一个清单文件，你可以查看：github.com/cyrusadkisson/hackbook-chromex

【解决方案2】：

只需让它使用https 协议即可。你得到的错误是关于Content Security Policy。

请参阅页面的Relaxing the default policy 部分。它提到您只能将HTTPS、chrome-extension 和chrome-extension-resource 列入白名单。

【讨论】：

感谢@Amaan 它使它工作......几乎！我应该有其他政策吗？即使现在加载了 Google API，我也无法启动它。 <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart", "table"]}); </script> 拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src 'self' google.com”。
好吧，没有内联脚本！使用 document.getElementById('elementID').addEventListener 代替事件。为您的 JS 代码块添加一个 popup.js 文件。参考developer.chrome.com/trunk/contentSecurityPolicy.html#H3-1

【解决方案3】：

当我运行 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.

【讨论】：