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

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 ''不安全评估'".请注意,'script-src'未明确设置,因此'default-src'用作后备.

我知道这有很多事情Content Script Policy(我不太了解它)但是,我按照这个和这个链接给了我足够的信息,什么是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'有一些限制.

• 内容脚本上下文是不是受到这个CSP.unsafe-eval不受限制(因为你可以executeScript使用任意代码),但是,内联脚本和远程脚本限制不适用于内容脚本,因为:

• 页面DOM中的任何脚本,无论是内联还是<script src="...">标记,都是在页面本身的上下文中执行的,并且受页面本身的CSP约束.只有一个例外,<script> /* code */ </script>在页面中注入一个将绕过内联代码限制以立即执行.

您所看到的显然是通过<script src="https://domain_name.com/my_script.js">在页面中注入来尝试加载远程脚本的结果.这取决于页面自己的CSP并失败.

1. 理论上,您可以通过使用拦截和劫持响应头来影响页面自己的CSP webRequest.但是,这不是一个好方法:您通常会干扰第三方页面的安全性.没有人会对此感到高兴.

2. 你可以做的是使用XHR在后台页面加载脚本,然后:

   • 使用chrome.tabs.executeScript({code: ...})不符合页面CSP 的内容将其注入内容脚本上下文;

   • 将它传递给上下文脚本,以便可以通过添加<script>...</script>到DOM 来注入它,只要它没有进一步违反它(通过加载更多脚本或使用eval /内联代码),它就会绕过页面的CSP.

     PS:正如Rob W建议的那样,如果你打算这样做,那么内容脚本就可以使用XHR本身(假设你https有源代码)

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.
};