We Keep Coding

unsafe eval error while building react app chrome extension

I have an chrome extension that renders a react app in a sidebar (iframe) upon clicking on the extension icon.
The react app is being built using webpack (configured with create-react-app with craco)
I'm having the following error while trying to open the extension:
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'".
The react app code is inside src dir and the extension code in the public dir.
And I'm loading the extension from the build directory.
I did try to add devtool: 'cheap-module-source-map' as mentioned in this post to my craco.config.js
and also adding the following csp to my manifest.json
"content_security_policy": {
"extension_page":"script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"
}
but it did not resolve the issue.

Refused to connect to URL because it violates CSP

I'm building a program that uses helmet as a security layer on the server side. I fetch from the GitLab API. And I use socket.io to communicate with gitlab. I also use ngrok to get a temporary url for gitlab to send requests to while I work on localhost.
When opening the application, every few seconds I get this error:
Refused to connect to 'https://.ngrok.iosocket.io/' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
Why does this happen? I tried to add the ngrok url as connect-src but that didn't help.
This is what my helmet CSP looks like:
app.use(helmet())
app.use(
helmet.contentSecurityPolicy({
directives: {
...helmet.contentSecurityPolicy.getDefaultDirectives(),
'script-src': ["'self'", 'code.jquery.com', 'cdn.jsdelivr.net', "'unsafe-eval'"]
}
})
)

ExcelJS: "Uncaught EvalError: 'unsafe-eval' is not an allowed source of script in the following Content" in Angular App

I have deployed Angular Application that uses ExcelJS library on IIS server. My current security policy forces me to return below header in IIS Http Response
content-security-policy: script-src 'self';img-src 'self'
With this setting, angular app is not loading and giving following error.
exceljs.js:87162 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'".
Is there any way to override Http Response security Policy. I tried to add content security policy using
But it did not work.
Could anyone please suggest how to run ExcelJS with strict content security policy?

Resolved by using below Steps:
First include import regenerator-runtime before exceljs import
import 'regenerator-runtime/runtime';
import { Workbook } from 'exceljs';
2nd go to tsconfig.json and include bare version of exceljs path after "compileOnSave":false
"exceljs": [
"node_modules/exceljs/dist/exceljs.bare.min.js"
]

Load JS script in the app running in local context

I have HTML/JS based UWP application. The app is running in local context, so my "Start page" in package manifest contains: index.html.
index.html contains following line:
<script src="ms-appdata:///temp/myScript.js"></script>
So myScript is placed in temporary (TempState) folder. I am aware that files in the temp folder can be deleted by system anytime.
When I launch the app I can see following error:
CSP14312: Resource violated directive 'script-src ms-appx: 'unsafe-eval' blob:' in Host Defined Policy: ms-appdata:///temp/myScript.js. Resource will be blocked.
I know that when I switch to web context by using ms-appx-web, it will work, however, is there any other way to load any JS script in the app running in local context?
UPDATE:
I just forgot to point out that the script is provided by somebody else and cannot be included in the app package.

This is a CSP error, it's not quite relevant to the web/local context. You need to configure your CSP in <meta/> tag on the index.html. Please see the Content Security Policy (CSP)
for more details.

vs code polymer nodejs application - does not load

I have a polymer application on nodejs. I am able to launch from vscode, but when I visit the site in the browser, it gives me
Cannot GET /
The browser console prints
jquery.min.js:562 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-33YGiROm4Pzv0xXIPo82M0Dt2zrdnP4IgbJq1WeAtf8='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
(anonymous) # jquery.min.js:562
(anonymous) # jquery.min.js:605
(anonymous) # jquery.min.js:2462
When I run npm start from the terminal, the site loads fine. I have the chrome extension installed in vscode.
My launch.json entry:
{
"type": "node",
"request": "launch",
"name": "xxxx-xxx",
"program": "${workspaceFolder}/xxxx-xxx/server.js",
"env": {"PORT":"6015"}
}
I have tried running on different browsers just to ensure this is not an extension in the browser and I get the same results in all browsers. No idea why this works from the terminal, but not from inside vscode :(.