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!
Related
I'm working on an app which is using dhtmlxSuite 4.2 and I was working on refactoring our code base in order to support Content Security Policy. For now, we are removing the 'unsafe-inline' and we are using a nonce to secure inline scripts.
Could you please provide some information regarding dhtmlx suite 4.2, does it support CSP and if yes, how can I configure it to support CSP using nonce? I was looking over internet but I'm not able to find any relevant documentation for this version.
Our script-src directive in CSP header is:
script-src 'self' 'strict-dynamic' 'unsafe-eval' 'nonce-r4nd0m'
I'm using the following line to add the dhtmlx .js files to the code:
<script nonce="r4nd0m" src="/dhtmlx/dhtmlxWindows/codebase/dhtmlxwindows.js">
The nonce and src values are not relevant, I've added them just for this example.
Currently the following error shows in browser:
`[Report Only] Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'strict-dynamic' 'unsafe-eval' 'nonce-xk0G314zlbshNaCyRmCZfqZNr3N8EEG3ZYSUkRvnfSs=
dhtmlXCellObject._detachObject|#|dhtmlxcontainer.js:1010
dhtmlXCellObject.unloadView|#|dhtmlxcontainer.js:356
dhtmlXCellObject._unload|#|dhtmlxcontainer.js:547
dhtmlXWindows._winClose|#|dhtmlxwindows.js:874
dhtmlXWindows._winButtonClick|#|dhtmlxwindows.js:1719
dhtmlXWindows._winMouseDownHandler|#|dhtmlxwindows.js:998
obj.callEvent|#|VM2422 dhtmlxcommon.js:929
_winOnMouseDown|#|dhtmlxwindows.js:259`
My understanding is that dhtmlx in creating some inline events causing to be non compliant with CSP.
I'm expecting to find a way to have dhtmlx suite 4.2 compliant with CSP filter.
Below is some some extract from the dhtmlx code base where from he stack trace:
enter image description here
enter image description here
Thank you!
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.
The react documentation points to this file as an example of using babel inline https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html
Even though it's not recommended for production, it would be helpful for me to develop faster if I could just write jsx for the time being in my chrome extension without having to compile myself. My issue is that if you try this you get an error in a chrome extension.
babel.min.js:1 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' https://unpkg.com". Either the 'unsafe-inline' keyword, a hash ('sha256-FN6NaNuBVCZD7+6eEydixs7VVD0vxTZKnwjth9yDpCC='), or a nonce ('nonce-...') is required to enable inline execution.
I've tried adding a content security policy to my chrome extension, but still get the same error: Here is my policy in my chrome extension manifest
"content_security_policy": "script-src 'self' 'unsafe-eval' https://unpkg.com; object-src 'self' 'sha256-FN6NaNuBVCZD7+6eEydixs7VVD0vxTZKnwjth9yDpCC='"
Anyone have any ideas on what I'm doing wrong?
I have an express app which is loading some external assets, but they're getting blocked by CSP. I've never had this issue before, but this is the first time im using passport.js and helmet.js within an app so maybe this has something to do with their configuration?
Refused to load the image 'https://fake-url.com' because it violates the following Content Security Policy directive: "img-src 'self' data:".
I've tried adding a meta tag to allow images from external sources but this seems to have no effect. Any help would be appreciated.
You have
content="default-src 'none'
This prevents loading resources from any source. Remove it.
Then change it to:
default-src 'self' fake-url.com';
More info bout the HTTP Content-Security-Policy response header below:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
https://content-security-policy.com/
I have several QUnit tests running successfully for our extension.
I'd like to gather code coverage information, and thought I would use blanket.js to do so.
However, when I click the 'Enable coverage' button, I see several CSP violation messages in the JavaScript Console:
Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'
I've tried updating the content security policy of the extension, adding 'unsafe-inline' and 'unsafe-eval'. With the 'unsafe-inline', Chrome doesn't load the extension. And the 'unsafe-eval' option doesn't fix the problem.
Below is the snippet of CSP from my manifest.json file:
"content_security_policy": "default-src 'unsafe-inline' 'self'"
Is there a way to get blanket.js to run successfully for a Chrome extension?
If not, is there an alternative to blanket.js for Chrome extensions?
I'm currently using:
Chrome 34
blanket - v1.1.5
QUnit v1.10.0
Any help would be appreciated.
You can try changing the implementation of _addScript to:
function(data) {
(1,eval)(data);
}
And adding 'unsafe-eval' to your CSP.