google-chromegoogle-chrome-extensioncontent-security-policyjavascript-injection

"Refused to load the script" error in chrome extension


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?


Solution

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