I am developing a Chrome Extension based on manifest v3 and can't get React dev tools to work.
Here is what I did:
yarn add -D react-devtools
Add script tag to page of extension:
<script src="http://localhost:8097"></script>
Add content security policy to the manifest file:
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'; script-src-elem 'self'; unsafe-inline 'localhost';"
}
Error I am getting:
Refused to load the script 'http://localhost:8097/' because it violates the following Content Security Policy directive: "script-src-elem 'self'".
I have tried all kinds of variations in unsafe-inline and nothing seems to work.
Related
I am getting the error Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'" while adding babel-plugin-istanbul to a chrome extension which uses manifest v3 which doesn't allow eval function.
But, the package adds var global = new Function("return this")() to the background.js file. Is there any way to solve this?
I'm building a micro-frontend web app with single-spa and am trying to set up import map overrides on my deployed site.
I'm getting the following console error when trying to load a micro frontend script from localhost
script-load.js:86 Refused to load the script 'http://localhost:8085/whatever.js' because it violates the following Content Security Policy directive: "script-src 'unsafe-inline' 'unsafe-eval' https: localhost:*". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
I have the following Content-Security-Policy in my HTML:
meta http-equiv="Content-Security-Policy" content="default-src 'self' https: localhost:*; script-src 'unsafe-inline' 'unsafe-eval' https: localhost:*; connect-src https: localhost:* ws://localhost:*; style-src 'unsafe-inline' https:; object-src 'none';"
I was under the impression that script-src localhost:* would allow overriding the MFE scripts with scripts I had running locally.
Keep the import map like this don't add http before
<script type="systemjs-importmap">
{
"imports": {
"#dell/react1":"//localhost:8080/test-react1.js"
}
}
</script>
I am getting this error when I'm trying to do <script src="https://savehut.xyz/files/file.js"></script> with a chrome extension:
Refused to load the script 'https://savehut.xyz/files/file.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.
I have this in my manifest.json file: (it's manifest v3 btw)
"content_security_policy": {
"script-src": "'self' 'unsafe-eval' https://cdn.jsdelivr.net/* https://savehut.xyz/* 'unsafe-inline';"
}
jsdelivr works, but savehut.xyz doesn't.
btw, the file location isn't /files/file.js, that's just an example thing
I am attempting to deploy a react app to Heroku. I have a NodeJs/Express API and it is serving my app created with create-react-app.
I am trying to display images in an tag from an external API (https://www.thecocktaildb.com) on my site and I continue to receive the following error in production:
Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "img-src 'self' data:".
I have tried to get around this using many variations of the following code snippet in my public/index.html file but nothing has worked so far.
<meta
http-equiv="Content-Security-Policy"
content="img-src 'self' https://www.thecocktaildb.com data:;"
/>
I have run out of things to try and cannot find a solution anywhere. Please help.
https://stackoverflow.com/a/40360666/11624647
try add in your tag
img-src * 'self' data: https:
code:
<meta http-equiv="Content-Security-Policy" content="default-src *;
img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
style-src 'self' 'unsafe-inline' *">
I'm working on a Chrome extension and wanted to load scripts from localhost for development. So I updated the manifest file to have the following line:
"content_security_policy": "script-src 'self' http://localhost; object-src 'self'",
According to the doc on Content Security Policy, it's perfectly fine to use localhost or 127.0.0.1 without https.
However, I get the following (taunting) error message when I try to load the extension from chrome://chrome/extensions/:
Could not load extension from '/Users/Tim/Desktop/temp/test'. Invalid value for 'content_security_policy': Both 'script-src' and 'object-src' directives must be specified (either explicitly, or implicitly via 'default-src'), and both must whitelist only secure resources. You may include any of the following sources: "'self'", "'unsafe-eval'", "http://127.0.0.1", "http://localhost", or any "https://" or "chrome-extension://" origin. For more information, see http://developer.chrome.com/extensions/contentSecurityPolicy.html
To confirm the problem, you can create an empty directory with the following manifest.json file:
{
"name": "Example extension",
"description": "Trying to demonstrate a bug in Chrome",
"version": "0.1",
"homepage_url": "http://example.com",
"content_security_policy": "script-src 'self' http://localhost; object-src 'self'",
"manifest_version": 2
}
and load the directory as an unpacked extension. You should be getting the error. If you remove http://localhost or change it to https://localhost, it will load fine.
Am I missing something?
(NB: I'm using Chrome 22.0.1229.79)
Thanks!
The ability to add localhost to the CSP value was enabled by Chromium revision 151470, which is in Chrome 23 (currently in the dev channel, soon to be in the beta channel).