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

问题描述 投票：3回答：4

关于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，或者有一些我不知道或错过的非常重要的事情。有关如何执行此操作的任何建议/提示？

google-chrome google-chrome-extension content-security-policy javascript-injection
4个回答
5
投票

在不禁用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.
};
5
投票

扩展中有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约束。只有一个例外，在页面<script> /* code */ </script>中注入will bypass inline code restrictions以立即执行。

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

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

正如@Xan所引用的那样，chrome.tabs.executeScript应用于扩展页面，似乎你将远程脚本注入当前网页，这违反了当前页面的CSP。

一种推荐的方法是制作远程脚本的本地副本，但是，如果你有充分的理由在服务器中托管它，我建议你在后台页面中对服务器进行ajax调用，然后调用var xhr = new XMLHttpRequest(); xhr.onload = function() { chrome.tabs.executeScript(tabId, {"code": xhr.responseText}); xhr.open("GET", SERVER_SCRIPT_URL); xhr.send(); 注入代码到当前页面。

代码片段如下所示：

https://www.google-analytics.com/analytics.js
0
投票

我在谷歌分析方面面临同样的问题，并通过在权限数组中添加网址“"permissions": ["activeTab", "storage","https://www.google-analytics.com/analytics.js"], ”来解决：

qazxswpoi
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.