Use external api with web extension manifest v3 - google-chrome-extension

I'm creating a web extension and I need to use google recaptcha in it. But when I try to import the library I get an error
Refused to load the script 'https://www.google.com/recaptcha/api.js?onload=onloadcallback&render=explicit' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
I tried to set my script src to authorize request to https://www.google.com
"content_security_policy": {
"extension_pages": "script-src 'self' 'https://www.google.com'; object-src 'self'"
},
but I got an error
'content_security_policy.extension_pages': Insecure CSP value "'https://www.google.com'" in directive 'script-src'.
It is still possible to use external script with manifest v3, and if yes what should I do ?

Related

Content Security Policy blocking all third party images/js and other resources

I have set content security policy via .htaccss as below. Now it blocks all third-party images/js and other resources that are not getting loaded on the website. We are using CDN as well
....
# Content Security Policy (CSP) HTTP Header
Header add Content-Security-Policy "default-src 'self';"

Is it still possible to integrate Google Sign-In within a Chrome Extension?

I've been attempting to follow this guide to integrate Google Sign-In within my chrome extension, but I kept getting an error saying that,
Refused to load the script 'https://www.gstatic.com/firebasejs/8.0/firebase.js' because it violates the following Content Security Policy directive: "script-src 'self'```."
I then tried to include,
"content_security_policy": {
"extension_pages": "script-src 'self' https://apis.google.com; script-src 'self' https://www.gstatic.com; script-src 'self' https://www.googleapis.com; script-src 'self' https://securetoken.googleapis.com;"
}
in my manifest as stated in the aforementioned guide, but then I got the error,
'content_security_policy.extension_pages': Insecure CSP value "https://apis.google.com" in directive 'script-src'.
Could not load manifest.
I then removed the content security policy and tried to include the firebase.js file in my extension directly, but then now I get an error saying,
Refused to load the script 'https://apis.google.com/js/api.js?onload=__iframefcb944385' because it violates the following Content Security Policy directive: "script-src 'self'".
I don't think I'm doing the content security policy incorrectly, so my question is if it's still possible to integrate Google Sign-In within a Chrome Extension. My guess would be no and that it's related to how Manifest V3 will not execute remote code anymore, but I just wanted to double check to make sure that I wasn't doing anything wrong.

chrome extension manifest 3 https://apis.google.com

This line in manifest 3
"content_security_policy": {
"extension_pages": "script-src 'self'; script-src-elem 'self' https://apis.google.com; object-src 'self';"
},
Gives me error
Refused to load the script 'https://apis.google.com/js/api.js?onload=__iframefcb41660' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
I'm using google api for authentication with firebase. In manifest v2 all was fine.
You cannot use external scripts in manifest V3, everything should be inside the extension.
Try using a fetch() if it's an API endpoint.

Content Security Policy: The page’s settings blocked the loading of a resource at blob

Blob images aren't showing via JavaScript because of the Content Security Policy in Waterfox 56:
Content Security Policy: The page’s settings blocked the loading of a
resource at blob:http://localhost/1e511fde-fb52-41fc-b7db-6b8b6cf64171
(“img-src http://localhost data:”).
My image CSP:
img-src \'self\' data:;
Self-answered, see below.
Adding blob: resolves the issue, only use a space for the array delimiter (and semi-colons for the key/value pair delimiters):
Before:
img-src \'self\' data:;
After:
img-src \'self\' blob: data:;

How to allow external script to load in Chrome Extension popup.html via Content Security Policy?

Chrome is giving me the following error:
Refused to load the script 'http://domain.com/myexternalscript.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'"
Currently, in my manifest my Content Security Policy is as follows:
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
How do I alter my security policy so that it can allow the script to run?
On a normal page, you could use
script-src 'self' 'unsafe-eval' domain.com; ...
but extensions only allow external scripts over HTTPS. You'll need to use
script-src 'self' 'unsafe-eval' https://domain.com;
and serve your script over HTTPS.
You must whitelist each external domain you want to use. You can use wildcards to match any subdomain: https://*.domain.com.
See Google's extension documentation on relaxing the default CSP for more information. See also MDN's page Using Content Security Policy.

Resources