babel-plugin-istanbul not following CSP directive, Refused to evaluate a string as JavaScript because 'unsafe-eval' - google-chrome-extension

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?

Related

Importing node module causes CSP violation error

I am developing an Electron app. I installed the node module https://www.npmjs.com/package/tasklist
Its usage example is import {tasklist} from 'tasklist'; But I got the error:
Uncaught TypeError: Failed to resolve module specifier "tasklist". Relative references must start with either "/", "./", or "../".
Then I changed it to import { tasklist } from 'node:tasklist';
And got error:
Refused to load the script 'node:tasklist' because it violates the following Content Security Policy directive: "script-src 'unsafe-inline' 'self' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
I've Google a lot but didn't find any relevant content.
Edit: node version:18.6.0 Electron version:21.0.1

Content-Security-Policy refusing to load localhost script

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>

Using React Dev Tools with Chrome Extension based on manifest v3

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.

Manifest.json is blocking script tags in Chrome extension

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

create-react-app issue: Refused to load the image '<URL>' because it violates the following Content Security Policy directive:

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' *">

Resources