Google Chrome Extension – Content Security Policy : URLs with query parameters

I am trying to build a web scraping extension that extracts information on my Youtube channel pages. (Yes, Youtube Data Api V3 doesn’t provide all ^^)

For example, I used Jquery to build requests like that :

// get total uploaded video count
        const resultPage = await $.ajax({
            dataType: "html",
            method: "GET",
            url: "https://www.youtube.com/my_videos?o=U",
            xhrFields: {
                withCredentials: true
            }
        });

My manifest.json looks like this :

{
  "name": "__MSG_appName__",
  "short_name": "__MSG_appShortName__",
  "description": "__MSG_appDescription__",
  "version": "1.0.0",
  "manifest_version": 2,
  "default_locale": "en",
  "icons": {
    "16": "images/icon-16.png",
    "128": "images/icon-128.png"
  },
  "background": {
    "scripts": [
      "jquery-3.3.1.min.js",
      "scripts/background.js"
    ]
  },
  "browser_action": {
    "default_icon": {
      "19": "images/icon-19.png",
      "38": "images/icon-38.png"
    },
    "default_title": "__MSG_browserActionTitle__",
    "default_popup": "pages/popup.html"
  },
  "permissions": [
    "downloads",
    "https://www.youtube.com/*"
  ],
  "content_security_policy": "default-src 'self'; style-src 'self'; script-src 'self'; connect-src https://youtube.com/*; img-src https://youtube.com/*"
}

It should handle permissions and csp rules but this is what I got :

Refused to connect to 'https://www.youtube.com/my_videos?o=U' because it violates the following Content Security Policy directive:

Any ideas how to fix it ? Docs about it ( https://developer.chrome.com/extensions/contentSecurityPolicy and https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy ) doesn’t seem to explain how to handle url with query parameters stuff …

Thanks for help

What’s the modern (2018) content-security-policy to run remote javascript in Chrome extensions?

I’m trying to use the Google Visualization library in my Chrome Extension, and when I try to load https://www.gstatic.com/charts/loader.js, I get the error:

Refused to execute inline script because it violates the following
Content Security Policy directive: “script-src ‘self’ blob:
filesystem: chrome-extension-resource:”. Either the ‘unsafe-inline’
keyword, a hash
(‘sha256-ZRvXLJRIwJtPp4Q/LF39rKzf75yD0249hUZYvrG/9pw=’), or a nonce
(‘nonce-…’) is required to enable inline execution.

I used report-uri.com to calculate the hash of the loader.js file, and it gives a different hash ('sha256-14OtDwc5s6lM8VxjsiIX5HQkz3E4AJaO9L7z60fYdgQ='). I don’t know if the first one (ZRvXL...) is an example provided by Chrome or is actually the hash it calculated for me.

Either way, I added both of them to my manifest.json without any luck. I’ve been reading up on the CSP documentation without any success in defining my manifest’s content_security_policy value. I also looked at another answer to this question, but it seems Chrome’s security policies may have changed in the last four years, rendering that answer obsolete.

I’m currently using the following CSP, without luck:

  "content_security_policy": "script-src 'self' https://www.gstatic.com/ 'sha256-14OtDwc5s6lM8VxjsiIX5HQkz3E4AJaO9L7z60fYdgQ=' 'sha256-ZRvXLJRIwJtPp4Q/LF39rKzf75yD0249hUZYvrG/9pw='; object-src 'self' https://www.gstatic.com/ 'sha256-14OtDwc5s6lM8VxjsiIX5HQkz3E4AJaO9L7z60fYdgQ=' 'sha256-ZRvXLJRIwJtPp4Q/LF39rKzf75yD0249hUZYvrG/9pw=' 'unsafe-inline'",

Because google.visualization TOS prohibits downloading the code locally, I can’t get around this by simply downloading the file and packaging it with my extension.

Chrome Extension – “could not load javascript ” for content script”

Can anyone see why the below manifest (truncated for brevity) is producing:

could not load javascript ” for content script

{
    ...
    "content_scripts": [{
        "matches": [""],
        "js": [
            "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js",
            "assets/js/content-script-curr-tab.js"
        ]
    }],
    ...
    "content_security_policy": "object-src 'self'; script-src 'self' https://apis.google.com https://cdnjs.cloudflare.com"
    ...
}

If I remove the reference to the Cloudflare script, it loads, yet I’ve clearly whitelisted the Cloudflare CDN in the content security policy.

network request showing api call data Security

I have a WEB Api call (GetCustomers) which get a list of customers and that works fine.
Problem is in the Network Request after I have logged in I can see GetCustomers and on clicking this I can see the complete list of customers.

Is there a way to hide these calls from being displayed?
See attached – don’t want the GetRulesValidation call and resulting data to be displayed in the Network Request Tab within Chrome.

I am using Angular4 on the Front End and a C# WEB API.

Thanks
Maiur

NetworkRequest in Chrome

inline executing / src – Chrome Extension

I’m writing an extension that needs to save the users password/username, and I’m getting cockblocked by “content security policy”…
I’d like to save the usernames and password to chrome.storage.local, with JavaScript, but I keep getting erros because of “content security policy”.


I’ve tried playing around with “content_security_policy” in the manifest.json, but honestly can’t get it to work… Any suggestions would be appreciated.

Chrome Extension – Content Security Policy directive (LinkedIn)

I am using a chrome extension to parse a username and crosscheck it on my db. However LinkedIns CSP prevents me making GET-calls from the chrome extension.

This is my console error:

Refused to connect to 'https://my.api.url/' because it violates the following Content Security Policy directive: "connect-src 'self' wss: static.licdn.com s.c.lnkd.licdn.com static-fstl.licdn.com static-src.linkedin.com dms.licdn.com static-exp1.licdn.com static-exp2.licdn.com s.c.exp1.licdn.com s.c.exp2.licdn.com static-lcdn.licdn.com s.c.lcdn.licdn.com media.licdn.com m.c.lnkd.licdn.com platform.linkedin.com https://www.linkedin.com https://indeed-indeed.p.mashape.com/apisearch cdn.lynda.com media-exp2.licdn.com media-exp1.licdn.com video-uploads-prod.s3.amazonaws.com video-uploads-prod.s3-accelerate.amazonaws.com https://media-src.linkedin.com/media/".

Is there any way to override this in the meta tags or give chrome extensions extra permissions?

Web Extension – Content Security Policy Error when Iframe Source Executes Script

I have a chrome/firefox web extension that uses a content script to inject HTML into a webpage when a button is clicked. The HTML that is injected consists of an iFrame nested within several divs.

Here’s the relevant portion of the content script:

var iFrame = document.createElement("iFrame");
iFrame.id = "contentFrame";
iFrame.style.cssText = "width: 100%; height: 100%; border: none;";
iFrame.src = browser.extension.getURL("inject-content/inject.html");

var boxDiv = document.createElement("div");
boxDiv.style.cssText = "left: calc(100% - 390px); position: fixed; top: 0px; width: 390px; z-index: 1;"

var zeroDiv = document.createElement("div");
zeroDiv.style.cssText = "position: fixed; width: 0px; height: 0px; top: 0px; left: 0px; z-index: 2147483647;";

var outerDiv = document.createElement("div");
outerDiv.id = outerDivID;

boxDiv.appendChild(iFrame);
zeroDiv.appendChild(boxDiv);
outerDiv.appendChild(zeroDiv);
document.body.appendChild(outerDiv);

As indicated by the code, the source of the iFrame is a file called “inject.html”. Two important features of inject.html are:

1) A script tag (inside the header) that refers to the file for a javascript library in the same directory.


2) A piece of inline javascript that uses “perfect-scrollbar.js”. Also, for reference, here is the library itself: https://github.com/utatti/perfect-scrollbar


When I directly open the file from my computer (i.e – right-click, open with Chrome), it works fine. However, when I use my extension in Firefox, I get the following error:

Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”).

Source:
console.log(“hello world”);

va….

I read through the documentation and it seems like in-line javascript is not allowed by the default content security policy.

Relevant documentation:

The default content security policy for extensions is:

"script-src 'self'; object-src 'self';"

This will be applied to any extension that has not explicitly set its own content security policy using the content_security_policy manifest.json key. It has the following consequences:

You may only load and resources that are local to the extension.

The extension is not allowed to evaluate strings as JavaScript.

Inline JavaScript is not executed.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_inline_script

I would solve the problem of inline javascript by using import statements, but according to Mozilla, those are not supported in Firefox right now: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

According to the documentation, it is possible to allow some inline Javascript by creating a sha-256 hash of your script.

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/content_security_policy

Allow the extension to execute inline scripts, by supplying the hash of the script in the “script-src” directive.

Allow the inline script: :

"content_security_policy": "script-src 'self' 'sha256-qznLcsROx4GACP2dm0UCKCzCG+HiZ1guq6ZZDob/Tng='; object-src 'self'"

and this

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_inline_script

Alternatively, you can create hashes from your inline scripts. CSP supports sha256, sha384 and sha512.

Content-Security-Policy: script-src 'sha256-B2yPHKaXnvFWtRChIbabYmUBFZdVfKKXHbWtWidDVF8='

When generating the hash, don’t include the

Content Security Policy: Loading external javascript in Chrome extension

I want to host my javascript file instead of packing it with the extension. I have read about whitelisting cross domain with Content Security Policy. This is what I have, but it throws error

"Could not load javascript '' for content script."

manifest.json

{
  "name": "My Chrome App",
  "version": "1.0",
  "manifest_version": 2,

  "content_scripts": [{
            "matches": [""],
            "js": ["https://example.com/platform/myjs.js"],
            "run_at": "document_end"
  }],

  "background": {
        "scripts":["background.js"]
  },          

  "description": "My app description goes here", //on hover
  "icons": {
              "128": "icon.png"
  },

  "browser_action": {
              "default_title": "My Chrome App",
              "default_popup": "popup.html"
  },


  "permissions": [
              "http://*/*", "https://*/*","tabs"
  ],

  "content_security_policy": "script-src 'self' https://example.com; object-src 'self'"

}

Is it impossible what I am trying to do? Or is there a workaround? I cannot find an updated answer to this question since CSP has been updated a couple years ago.

How to white-list inline script in the content security policy (CSP) of a Chrome extension?

I’m using the library list.js in a Chrome extension, and it uses inline-scripting to insert the pagination in the web pages, which included as element like this:


So, in order to make this work in the extension I guess I need to white-list it to the content security policy (CSP).

To do so, I tried to relax the CSP for the inline script, as described in the Chrome docs here, but I can’t do it and still getting the console error:

Refused to execute JavaScript URL because it violates the following
Content Security Policy directive: “script-src ‘self’
‘sha256-{HASH}'”. Either the ‘unsafe-inline’ keyword, a hash
(‘sha256-…’), or a nonce (‘nonce-…’) is required to enable inline
execution.

I followed the instructions here to generate a sha256 hash and tried:

$echo -n "function Z(){Z=""}Z()" | openssl dgst -sha256 -binary | openssl enc -base64

$echo -n "function Z(){Z=""}Z()" | openssl dgst -sha256 -binary | openssl enc -base64

After I get the hash, I include it in the manifest.json as follows:

...
"content_security_policy": "script-src 'self' 'sha256-{HASH}'; object-src 'self'",
...

What am I doing wrong?

Pusher in Chrome Extension stopped working – Content Security Policy

I have an extension which I has socket listening inside working for months, however recently (for the last 2 weeks) it stopped working. The csp I used to have was:

"content_security_policy": "script-src 'self' 'unsafe-eval' https://*.pusher.com; object-src 'self';" (which was working)

However, now, it’s throwing error:

WebSocket connection to ‘wss://ws-{pusherId}.pusher.com/app/aae7320263d9626a6429?protocol=7&client=js&version=4.1.0&flash=false’ failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED

OPTIONS https://sockjs-{pusherId}.pusher.com/pusher/app/aae7320263d9626a6429/412/0du6seh0/xhr_streaming?protocol=7&client=js&version=4.1.0&t=1522495955875&n=1 net::ERR_NAME_NOT_RESOLVED

After some investigations, I came across

"content_security_policy": "script-src 'self' 'unsafe-eval' https://www.mywebsite.com https://*.pusher.com; object-src 'self'; connect-src https://www.mywebsite.com wss://*.pusher.com https://*.pusher.com", but it is still returning the same errors.

What is the proper way of making it work in chrome extension? Is there a way of bypassing it with CSP policy that I am missing?