I'm building a chrome extension and facing a problem related to csp.
I'm using manifest V3
below is my csp
"content_security_policy": {
"extension_pages": "script-src 'self' 'unsafe-inline' 'https://cdn.jsdelivr.net/'; object-src 'self'"
}
I'm using alpine.js in my code and wanted to run it.
It was running in v2 but I'm not able to get it working in manifest v3.
Thanks
Please see the Migrating to Manifest V3 (mv3).
Scripts from external domains are not allowed in mv3, all scripts must be included into extension package.
"extension_pages": - this policy covers pages in your extension, including HTML files and service workers. These page types are served from the chrome-extension:// protocol. For instance, a page in your extension is chrome-extension://<extension-id>/foo.html.
Therefore https://cdn.jsdelivr.net/ is a wrong source for CSP in mv3. BTW, host-sources like 'https://cdn.jsdelivr.net/' shouldn't be single-quoted in CSP
"I'm not able to get it working in manifest v3" is not a technical description of problem. If something fails to work, there should be diagnostic messages in the console.
As #granty wrote it's not allowed to use external scripts in Manifest v3.
Even if Alpine.js is included as a local js file it seems that it is using eval(), which is prohibited by manifest v3 as well.
It's allowed in sandboxed pages only (should be explicitly listed in the manifest), but such pages have some restrictions (like disabled extensions API)
"sandbox": {
"pages": ["awesome_alpine.html"]
},
https://developer.chrome.com/docs/extensions/mv3/mv3-migration/#content-security-policy
https://developer.chrome.com/docs/extensions/mv3/sandboxingEval/
Related
I am currently writing a browser extension that supports Manifest-v2 and v3 which requires the CashJS library (lightweight version of JQuery) for convenience. I would like my content script content/index.js to be able to use this library content/cash.min.js but I get a CSP violation stating:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-wThdlNeRf1Fp3UGuX3Ch9caqVJ8S7Wn41fdlaVxsRDE='), or a nonce ('nonce-...') is required to enable inline execution.
Here is my manifest.json (for v3):
...
"content_scripts": [{
...
"js": [
"content/cash.min.js",
"content/index.js"
]
}],
...
I have tried using content_security_policy in various ways (hashes & enabling unsafe-inline) but Chrome refuses it:
"content_security_policy": "script-src 'self' 'sha256-wThdlNeRf1Fp3UGuX3Ch9caqVJ8S7Wn41fdlaVxsRDE='; object-src 'self';"
It gives the error Invalid value for 'content_security_policy'. when attempting to load the extension. I have read this page from Mozilla as well as other posts discussing this issue but haven't found a solution that fits my needs.
This article from Chrome's documentation mentions using their sandboxing feature but it only seems to work for webpages, not the scripts themselves.
I really don't want to intercept the headers as proposed here.
Any help would be much appreciated!
I cannot succeed in including Vue 3 in a simple Chrome extension. I created a local folder within the extension with the
following structure and content
but I always get the following error message when I try to lead the library from any extension's pages:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Either the 'unsafe-inline' keyword, a hash ('sha256-NEG1aW1******'), or a nonce ('nonce-...') is required to enable inline execution.
I don't understand the issue. Any other library that I bundle directly inside the extension has always worked just fine, but this is not happening with Vue.
Does anyone have any idea?
Thanks!
I'm making a chrome extension that will create an iframe, inject it into the page, and then run a react app inside that iframe. I'm making the react app with Create React App and one of the <script/>s in build/index.html will not be executed due to security issues.
The index.html has three <script/>s in it:
<script>!function(e){function r...<LONG CHUNK OF BUNDLED CODE></script>
<script src="/static/js/2.f6218dca.chunk.js"></script>
<script src="/static/js/main.c335a43f.chunk.js"></script>
The first script listed above is a large bundled script that I mainly cut out here. The second two seem to load and run fine, but I get the following error message for the first one.
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-ssRao1c5f8Pf3VvQXjkNHGmrQ6+tZ7Fuaxxxxxxxxxx='), or a nonce ('nonce-...') is required to enable inline execution.
I have encountered this error before when working with manifest v2 and know there are a bunch of answers showing how to get around it, but they don't seem to work with manifest v3. As stated here about the new v3 security policies:
"The script-src, object-src, and worker-src directives may only have
the following values:
self
none
Any localhost source, (http://localhost, http://127.0.0.1,
or any port on those domains)"
therefore the error message above seems to be outdated. If I add 'unsafe-inline' or 'sha256-ssRao1c5f8Pf3VvQXjkNHGmrQ6+tZ7Fuaxxxxxxxxxx=' to my content security policy I can't load the extension into Chrome - it's rejected with a message like "'content_security_policy.extension_pages': Insecure CSP value "'unsafe-inline'" in directive 'script-src'."
Also it seems I have the right v3 security policy set for the other two scripts - I can verify this by changing it and getting three of the above error messages, one for each script.
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'"
},
Is there anyway to load the first script of bundled js code? Or would I have to put it in another file and load it with <script src="/path/to/new_file.js"...?
Also here is the code in my content script that creates the iframe and injects the react app into it, in case it's relevant:
const modal = document.createElement('dialog');
modal.setAttribute("style", "height:40%");
modal.innerHTML =
`<iframe id="headlineFetcher" style="height:100%"></iframe>
<div style="position:absolute; top:0px; left:5px;">
<button>x</button>
</div>`;
document.body.appendChild(modal);
const dialog = document.querySelector("dialog");
dialog.showModal();
const iframe = document.getElementById("headlineFetcher");
iframe.src = chrome.runtime.getURL("index.html");
iframe.frameBorder = 0;
You'll need to set an environment variable to tell it to not use an inline script:
INLINE_RUNTIME_CHUNK=false
Add this to your .env file and when you rebuild the offending bit of React is placed into a file.
While attempting to port the extension from manifest version 1 to version 2, this appeared:
Port error: Could not establish connection. Receiving end does not
exist. chromeHidden.Port.dispatchOnDisconnect
miscellaneous_bindings:232
This appeared in Console in developer tools. I have no idea where to start fixing this cause i don't know what's causing it to begin with..
what can cause this problem? and is there someway to know exactly what's causing it?
Thanks.
The most likely cause of failure is the activation of the default Content security policy when "manifest_version": 2 is active. A consequence of the default CSP is that inline JavaScript will not be executed.
<script>chrome.extension.onConnect.addListener(...);</script>
The previous line is an example of inline code. The solution is to place the script in an external JS file:
<script src="script.js"><!--original contents moved to script.js--></script>
Background pages/scripts
When you were using background pages, do not use:
"background_page": "background.htm", or
"background": {"page": "background.htm"},
but
"background": {"scripts": ["background.js"]}
where background.js contains the script which was initially placed within the <script> tags at background.htm.
Inline event listeners
Browser action popups, app launchers, option pages, etc. often contain inline event listeners. By the CSP, these are also forbidden.
<button onclick="test();"> does not work. The solution is to add the event in an external JS file using addEventListener. Have a look at the documentation or this answer for an example.
Other
JavaScript creation from strings (eval, Function, setTimeout, ...) is forbidden. Rewrite your code to not create code from strings, or use the sandbox manifest option (introduced in Chrome 21). Since Chrome 22, the unsafe-eval CSP policy can be used to lift this restriction.
JSONP does not work, because external (JavaScript) resources cannot be loaded in the extension's context. Use an ordinary XMLHttpRequest instead of JSONP (more information + example).
The only exception is when the resource is fetched over httpsnot http. The CSP can be adjusted to introduce this exception - see documentation:
"content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
Official documentation
The official documentation also provides an excellent explanation on the topic, see "Tutorial: Migrate to Manifest V2".
For me solution was changing:
<script type="text/javascript" src="bgScript.js"></script>
to:
<script src="bgScript.js"></script>
Maybe it's also help others!
I have chrome extension in that I am trying to use GWT RPC. Cant make it work. I compile my GWT code with <add-linker name="xsiframe" /> in my module xml file. I am still getting following exceptions in js chrome console without any line numbers:
Refused to execute JavaScript URL because of Content-Security-Policy.
My manifest.json, ver.2is like this:
"permissions": [
"http://*/"
],
"content_security_policy": "default-src * 'unsafe-inline'; script-src 'self'; object- src 'self'; frame-src about:",
"web_accessible_resources": [
"js-lib/",
"js-code/",
"compiled_gwt_code_from_gwt-war/"
]
Is there a know solution for this deployment? Or what is probably wrong?
Thanks
The new CSP is bullshit. It deliberately cuts off functionality, and it doesn't allow overrides, even though developers know damn well what they're doing.
For now, revert to manifest v.1 in extension manifest.
...
manifest_version: 1,
...
The spec should probably become less communist in the future.