“拒绝加载脚本” Chrome扩展中的错误 [英] "Refused to load the script" error in chrome extension

问题描述

有很多关于SO的问题与此类似，但是他们都没有解决我的目的。

我正在创建一个像chrome扩展那样的'pinterest'。它在网页上注入脚本，收集图像并将其发布到某处。一切工作都很完美，但是当我在pinterest上运行它时，它给了我这个错误：


lockquote
blockquote

拒绝加载脚本' 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' '不安全-EVAL'。请注意，'script-src'没有明确设置，所以'default-src'被用作后备。

我知道这与 Content Script Policy 有很大关系（但我不太了解它），但是，我遵循这个和这个链接给我足够的信息，介绍什么是CSP以及如何使用它。

我所做的一切（我认为）是必需的，但它仍然无法正常工作。这是我的manifest.json

  {
manifest_version：2，
 
name：Image Posting，
description：这个扩展名可以让你发布图片，
version：1.0，
 
 browser_action：{
name：图片发布
}，
homepage_url：https://www.domain_name.com/，
background ：{
scripts：[background.js] 
}，
content_scripts：[
 {
matches：[< all_urls> ;]，
js：[jquery.js，content.js] 
} 
]，
图标：{
 128：icon_128.png，
16：icon_16.png，
48：icon_48.png
}，
权限： [
activeTab，
通知
]，
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，还是有一些非常重要的东西，我不知道或者错过。如何做到这一点？

解决方案

在不禁用CSP的情况下，您无法注入未列入白名单的脚本。 b
$ b

扩展脚本不受此限制，因此将该文件托管在扩展包中，并在 web_accessible_reso urces ，您应该可以运行该脚本。

  var s = document.createElement（'script'）; 
 s.src = chrome.extension.getURL（'script.js'）; //在web_accessible_resources 
（document.head || document.documentElement）.appendChild（s）; 
 s.onload = function（）{
 s.remove（）; //清理，只是为了好。 
}; 
  

There are a lot of questions on SO similar to this one however none of them solved my purpose.
I'm creating a 'pinterest' like chrome extension. It injects script on webpage, collect images and then post it somewhere. Everything is working perfectly however when i run this on pinterest itself, it gives me this error:

Refused to load the script 'https://domain_name.com/my_script.js' because it violates the following Content Security Policy directive: "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'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

I know this has a lot to do with Content Script Policy (and i don't know much about it) however, i followed this and this link which gave me enough info on what is CSP and how to use it.
I've done everything (what i think) that is required but it still is not working. Here is my 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'"
}

at a point, i also thought that there might be something in this which cannot be actually done however, i then tried BUFFER extension, and it can successfully inject their script on pinterest as well which means this thing is somehow possible. Also, not to forget that extension like AdBlocker works on every site and they also must be pulling some resources from a remote server. Are they bypassing CSP by any means or there is something really crucial that i don't know or missed. Any suggestions/tips on how to do this?

解决方案

Without disabling the CSP, you cannot inject scripts that are not whitelisted.

Extension scripts are exempt from this restriction, so host the file in your extension package, declare it in web_accessible_resources and you should be able to run the script.

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

这篇关于“拒绝加载脚本” Chrome扩展中的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！