I'm writing a Chrome extension which extends the Developer tools. In the html page of my devtools panel, I want to use webpack in watch mode for fast iteration of the UI. In the extension manifest, I added this entry:
{
"content_security_policy": {
"extension_pages": "default_src: 'self' http://localhost:8081"
}
}
Then in the html page, I specify my script src as:
<script src="http://localhost:8081/devtools.js"></script>
Chrome happily loads my extension, but when it tries to load the html page, it fails with the following error:
Refused to load the script 'http://localhost:8081/devtools.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
What do I do wrong here?
Related
I'd like to know if it's still possible to embed a Twitter Timelines in a Chrome Extension with a Manifest v3.
I tried to use from the Twitter docs :
<a class="twitter-timeline" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
But I get errors :
Refused to load the script 'https://platform.twitter.com/widgets.js' 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.
Refused to load the script 'https://platform.twitter.com/widgets.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
The problem if I understood correctly is that with manifest v3 it's not possible to use external scripts.
What are the possible solutions to embed a Twitter Timeline in a Chrome Extension ?
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.
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?
The Zemanta Chrome Extension fails to load with the following error message
loader.js:13 Refused to load the script 'https://static.zemanta.com/widgets/blogger.com/merged-blogger.js?v=1451290656'
because it violates the following Content Security Policy directive:
"script-src 'self' *.google.com *.google-analytics.com 'unsafe-inline'
'unsafe-eval' *.gstatic.com *.googlesyndication.com *.blogger.com
*.googleapis.com uds.googleusercontent.com https://s.ytimg.com
www-onepick-opensocial.googleusercontent.com www-bloggervideo-opensocial.googleusercontent.com
www-blogger-opensocial.googleusercontent.com *.blogspot.com https://www.blogblog.com".
I have changed the content_securiy_policy line to the following, and reload the extension
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com https://*.zemanta.com; object-src 'self'"
Why is it that "https://*.zemanta.com" is not listed in the CSP directive in the error message above, and how can I make sure it is in the CSP?
It looks like an error thrown by a webpage with its own CSP, not inside your extension. So the CSP you set there has no effect.
It probably happens as a result of a content script trying to insert <script src="..."> into the page. That's subject to the page's CSP and can fail.
You can try to bypass the page's CSP by loading the script with XHR and inserting a <script> tag with the code included instead of src link. Note that this may fail at a later stage, since while the script will be executed this way, it will be subject to CSP in its own actions (so if it, say, tries to add a <script> tag as well, it will fail).
Alternatively, you could use webRequest API to intercept and modify the CSP header. That's risky since you're loosening the page's security in general.
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.