How to set Content Security Policy in Chrome Extension Manifest.json in order for Firebase to work

Question

I made a Chrome Extension and used Firebase to collect data into a database. It worked fine for some time, but it seems there were some changes to Chrome. Now I get the following error in the javascript console when using Inspect Element on my Extension:

Refused to load the script 'https://(myID).firebaseio.com/(otherprivatedata)' because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

This script is written at firebase.js:171, it's not script that I added.

I attempted to follow this guide and add the "content_security_policy" tag to my manifest.json as instructed: https://github.com/firebase/firebase-chrome-extension

I added the following line to my manifest.json as instructed:

"content_security_policy": "script-src 'self' https://cdn.firebase.com https://*.firebaseio.com; object-src 'self'"

However when I add this line, I now get an error when trying to load my script in chrome://extensions

Error Loading Extension

Failed to load extension from: ~\XXX\my_ext

Manifest is not valid JSON. Line: 14, column: 5, Syntax error.

And it highlights the line I just added above (content_security_policy). What am I doing wrong? It seems anything after "content_security_policy" is completely refused by Chrome.

Even when I try the sample code from Google, it doesn't work. developer.chrome.com/extensions/contentSecurityPolicy

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

How can I set the content_security_policy in order for Firebase to work in an Extension?

(My firebase.jp is already downloaded and packaged in with my Extension since Chrome won't let me call it as remote.)

Pisolite

Include your complete manifest.json. Probably there's an extra or missing comma somewhere. – Forgery

Answer 1

Yep, thanks rsanchez... totally forgot a comma...

...   
  "options_page": "option.html",
  "manifest_version": 2, <- THIS COMMA
  "content_security_policy": "script-src 'self' https://cdn.firebase.com https://*.firebaseio.com; object-src 'self'"
}

Works now, thanks for your help!

Pisolite

i am getting this issue Invalid value for 'content_security_policy'. Could not load manifest – Brody

are you using version 3 @Brody – Nippur

i think so... so what's the solution for manifest v3.... anyway? @SaurabhVerma – Klarrisa

Answer 2

Update 2022

Manifest V3 has changed the way content security policy is specified. Please have a look at the doc. So according to V3, the above policy should be now be specified in this manner:

{
  ...
  "manifest_version": 3,
  "content_security_policy": {
    "extension_pages": "script-src 'self' https://cdn.firebase.com https://*.firebaseio.com; object-src 'self'"
  }
  ...
}

Sartin

Documentation says you cannot do this : "The extension_pages policy cannot be relaxed beyond this minimum value". developer.chrome.com/docs/extensions/mv3/manifest/…. – Debrahdebrecen

while trying to load the extension it says "Insecure CSP,Could not load manifest." – Hangbird

This does not work. The doc says Manifest V3 does not allow remote URLs in script-src of extension_pages – Limacine

This is not working... – Homelike

Answer 3

Learn how to use sandbox on chrome extension

on manifest v3 json file

"content_security_policy": {
    "sandbox": "sandbox allow-scripts allow-forms allow-popups allow-modals; script-src 'self' 'unsafe-inline' 'unsafe-eval'; child-src 'self';"
  },
  "sandbox": {
    "pages": [
      "index.html"
    ]
  }

https://developer.chrome.com/docs/extensions/reference/manifest/sandbox

Bierman