I’ve build a google cloud function that takes an input and sends it to Firestore. I’ll need to call it inside a Firefox WebExtension, that I’ll use on Twitter. Not the first time I’m doing this type of project but this time I’m having issues regarding the “Content-Security-Policy”.
I’ve try to call my GC function with the GC testing tool, then with Postman, then inside a Python Script and finally inside the console of a new opened tab. All of this worked! But it doesn’t work inside my WebExtension. So I tried to call my function inside the console (Firefox) while being on twitter. It doesn’t works either. I’m getting the following error message :
error TypeError: NetworkError when attempting to fetch resource. <anonymous> debugger eval code:9
Following by this :
Content Security Policy: The page’s settings blocked the loading of a resource at https://...cloudfunctions.net/...?...=... (“connect-src”).
When trying on Chrome, I’m getting this message of error :
error TypeError: Failed to fetch
at <anonymous>:9:1
Refused to connect to 'https://....cloudfunctions.net/...?...=...'
because it violates the following Content Security Policy directive: "connect-src 'self' blob:
Another interesting information I could give is that, when opening the console (in Firefox) when visiting a Twitter page, I’m getting the following warning message :
Content Security Policy: Ignoring “'unsafe-inline'” within script-src or style-src: nonce-source or hash-source specified
And the following error message :
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).
FYI : Inside the GC function, I’ve set headers the followings way :
response.headers.set("Access-Control-Allow-Origin", "*")
headers.set("Access-Control-Allow-Methods", "GET, POST")
I’ve also try to add the following line, but it doesn’t work :
response.headers.set("Content-Security-Policy", "default-src * self blob: data: gap:; style-src * self 'unsafe-inline' blob: data: gap:; script-src * 'self' 'unsafe-eval' 'unsafe-inline' blob: data: gap:; object-src * 'self' blob: data: gap:; img-src * self 'unsafe-inline' blob: data: gap:; connect-src self * 'unsafe-inline' blob: data: gap:; frame-src * self blob: data: gap:;")
Could you guys help me that ? I’m really stuck. Thanks !!
Advertisement
Answer
Another interesting information I could give is that, when opening the console (in Firefox) when visiting a Twitter page, I’m getting the following warning message :
Content Security Policy: Ignoring “'unsafe-inline'” within script-src or style-src: nonce-source or hash-source specified
This is not a WebExtension error, it’s a Twitter’s CSP warning because it supports backward browsers compatibility mode. Just ignore it, you can’t influence Twitter’s CSP.
I’ve also try to add the following line, but it doesn’t work:
response.headers.set("Content-Security-Policy", "...")
WebExtension can not publish CSP in this way, you need to use content_security_policy key in the app’s manifest (manifest.json file). See details in CSP in WebExtension.
The default content security policy for extensions is: script-src 'self'; object-src 'self'; that’s why https://...cloudfunctions.net/ source is blocked. Also looks like you use some kind of inline scripts in your WexExtension, therefore you have to add 'hash-value' to the script-src in the content_security_policy key.
* The 'unsafe-inline' token can’t be used in the content_security_policy key.
Pls note that extensions with 'unsafe-eval', 'unsafe-inline', remote script, blob, or remote sources in their CSP are not allowed for extensions listed on addons.mozilla.org due to major security issues.