Question

有很多关于SO的问题与此类似，但没有一个问题解决了我的目的我正在创造一个像chrome扩展的'pinterest'。它在网页上注入脚本，收集图像，然后将其发布到某个地方。一切都运作得很好然而当我在pinterest本身运行时，它给了我这个错误：

拒绝加载脚本“https://domain_name.com/my_script.js”，因为它违反了以下内容安全策略指令：“default-src'self'https：// .pinterest.com https：// .pinimg.com * .pinterest.com * .pinimg.com * .google.com connect.facebook.net .google-analytics.com https：// .googleapis.com 。 gstatic.com https：// .facebook.com * .facebook.com www.googleadservices.com googleads.g.doubleclick.net platform.twitter.com * .tiles.mapbox.com * .online-metrix。 net * .bnc.lt bnc.lt * .yozio.com'unsafe-inline''unsafe-eval'“。请注意，'script-src'未明确设置，因此'default-src'用作后备。

我知道这与Content Script Policy有很大关系（我对此并不了解）但是，我跟着this和this链接，这给了我足够的信息，关于什么是CSP以及如何使用它。
我已经完成了所需的一切（我认为），但它仍然无效。这是我的manifest.json

{
  "manifest_version": 2,

  "name": "Image Posting",
  "description": "This extension enables you to post images",
  "version": "1.0",

  "browser_action": {
    "name": "Image Posting"
  },
  "homepage_url": "https://www.domain_name.com/",
  "background":{
      "scripts":["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["jquery.js", "content.js"]
    }
  ],
  "icons": {
     "128": "icon_128.png",
     "16": "icon_16.png",
     "48": "icon_48.png"
  },
  "permissions": [
    "activeTab",
    "notifications"
  ],
  "web_accessible_resources": [
    "icon_48.png"
  ],
  "content_security_policy": "default-src 'self'  https://domain_name.com/my_script.js; script-src 'self'  https://domain_name.com/my_script.js; style-src 'self' https://domain_name.com/my_style.css; 'unsafe-inline' 'unsafe-eval'"
}

在某一点上，我也认为可能有一些事情实际上无法实现，然后我尝试了BUFFER扩展，并且它可以成功地在pinterest上注入他们的脚本，这意味着这件事在某种程度上是可能的。另外，不要忘记像AdBlocker这样的扩展可以在每个站点上运行，并且它们也必须从远程服务器中提取一些资源。他们是否以任何方式绕过CSP，或者有一些我不知道或错过的非常重要的事情。有关如何执行此操作的任何建议/提示吗？

Answer 1

扩展中有3个CSP正在发挥作用：

content_security_policy指令仅适用于扩展程序自己的页面（例如后台页面）。如果未指定，则默认为script-src 'self'; object-src 'self'且some restrictions on how it can be modified.
内容脚本上下文不受此CSP约束。 unsafe-eval is unrestricted（因为您可以使用任意代码执行executeScript），但是，内联脚本和远程脚本限制不适用于内容脚本，因为：
页面DOM中的任何脚本，无论是内联还是<script src="...">标记都是在页面本身的上下文中执行的，并且受 CSP的约束页面本身。只有一个例外，在页面will bypass inline code restrictions中为{em>立即执行执行<script> /* code */ </script>注入<script src="https://domain_name.com/my_script.js">。

您看到的内容显然是通过向页面中注入webRequest来尝试加载远程脚本的结果。这取决于页面自己的CSP并失败。

理论上，您可以通过使用chrome.tabs.executeScript({code: ...})拦截和劫持响应标头来影响页面自己的CSP。但是，这不是一个好方法：您通常会干扰第三方页面的安全性。没人会对此感到高兴。
您可以做的是使用XHR在后台页面加载脚本，然后：
- 使用<script>...</script>将其注入内容脚本上下文，该https不受页面CSP的约束;
- 将其传递给上下文脚本，以便通过向DOM添加columns将其注入到页面中，只要不进一步违反该页面，就会绕过页面的CSP。（通过加载更多脚本或使用eval /内联代码）。
  
  PS：正如Rob W建议的那样，如果您计划这样做，那么内容脚本可以使用XHR本身（假设您有<ul>源） < / p>

Answer 2

如果不禁用CSP，则无法注入未列入白名单的脚本。

扩展脚本不受此限制，因此请将文件托管在扩展程序包中，在web_accessible_resources中声明它，然后您就可以运行该脚本。

var s = document.createElement('script');
s.src = chrome.extension.getURL('script.js'); // In web_accessible_resources
(document.head || document.documentElement).appendChild(s);
s.onload = function() {
    s.remove(); // Clean up, just to be nice.
};

Answer 3

正如@Xan所引用的，"content_security_policy"应用于扩展页面，似乎您将远程脚本注入当前网页，这违反了当前页面的CSP。

一种推荐的方法是制作远程脚本的本地副本，但是，如果您有充分的理由在服务器中托管它，我建议您在后台页面中对服务器进行ajax调用，然后调用{ {1}}将代码注入当前页面。

代码段看起来像：

chrome.tabs.executeScript

Answer 4

我在使用Google Analytics（分析）时遇到了同样的问题，并通过在权限数组中添加网址“ https://www.google-analytics.com/analytics.js”来解决：

"permissions": ["activeTab", "storage","https://www.google-analytics.com/analytics.js"],

Chrome扩展中的“拒绝加载脚本”错误

4 个答案: