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 !
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 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?
when we use script link in pug templete then this type of error occure in console,
we also set csp header in meta tag as well as set.header to server script
Refused to load the script 'https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.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.
this is my pug code
block append head
meta(http-equiv="Content-Security-Policy" content="script-src 'self' api.mapbox.com js.stripe.com 'unsafe-inline'")
script(src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js')
link(href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet')
script(src='https://js.stripe.com/terminal/v1/')
If you set your CSP in both meta tag and response header anything will have to pass both policies. Modify or remove your response header CSP.
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.