We Keep Coding

ASP.NET MVC Application Insights Javascript Snippet preventing other JavaScript from working

I've just updated the Content-Security-Policy settings in the Web.Config file and added the Application Insights JavaScript snippet in my _Layout.cshtml.
Here is what the Content-Security-Policy in the Web.config looks like.
script-src-elem
'self'
'unsafe-inline'
'unsafe-eval'
https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js
*.mymapjs.com
script-src
'self'
'unsafe-inline'
'unsafe-eval'
https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js
*.mymapjs.com
mymapjs.com is not longer working properly, my maps aren't showing up, and my browser is upset with me yelling at me in red letters with the error:
Access to XMLHttpRequest at 'mymapjs.com' from origin 'mywebsite.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
When I remove the https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js url from the Web.config Content-Security-Policy I get the warning:
Refused to load the script 'https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js' because it violates the following Content Security Policy directive: "script-src-elem 'self' 'unsafe-inline' 'unsafe-eval' https://*.mymapjs.com use.other.net use.other.net/ https://myfont.net/it.js

It turns out I enabled the enableCorsCorrelation = true in the Application Insights configuration.
So then I tried updating the correlationHeaderExcludedDomains values with a wild card value for the mymapjs.com.
correlationHeaderExcludedDomains:
[
'myapp.azurewebsites.net',
'*.queue.core.windows.net',
'*.mymapjs.com'
]
The wild card alone didn't work. I had to strictly type the JS libraries urls AND have the wildcard for it to work properly. It wants the scripts that are directly being requested from the _Layout.cshtml as well as the ones generated from the JS libraries.
correlationHeaderExcludedDomains:
[
'myapp.azurewebsites.net',
'*.queue.core.windows.net',
'*.mymapjs.com'
'https://mymapjs.com-core-events.js'
'https://mymapjs.com-services.js'
'https://mymapjs.com-ui-services.js'
]
If anyone else gets caught up figuring this out, I hope this helps.

Is it possible to integrate Stripe into a chrome extension

I am trying to integrate Stripe but facing the following issues.
When I am loading normally via ngx-stripe, it's giving me this error in the console.
Refused to load the script 'https://js.stripe.com/v3/' because it
violates the following Content Security Policy directive: "script-src
'self' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly
set, so 'script-src' is used as a fallback.
I change content_security_policy in manifest to "script-src 'self' https://js.stripe.com/v3/; object-src 'self' " but it's giving me this error in the console.
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'
https://js.stripe.com/v3/".
After that, I tried adding content_scripts but it's giving me this error and don't let me to import the zip file as well while saying
Could not load javascript '' for content script.
How can I overcome this issue? and is it possible to integrate Stripe into a chrome extension because Stripe only works via https but extension working with chrome://

The answer provided by #EndersJeesh works for me with Chrome extensions with manifest version 2.
I was wondering whether it was going to stop working in manifest version 3:
https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#remotely-hosted-code
The Remotely Hosted Code says that you will not be able to load remote hosted code so I imagine that loading https://js.stripe.com/v3 will not be possible.
The best solution would be for all the Stripe code to be embedded in the extension but there's no npm package for this Stripe code.
Any comments from #EndersJeesh or others would be appreciated.

I ran into these and several subsequent issues integrating stripe into a chrome extension.
Explanation:
I'll first state what I believe was happening. Using the stripe react libraries, I believe they have an inline js call somewhere, causing the error you're seeing about js.stripe.com. I think this would be fixed by adding unsafe-inline into your content_security_policy, but that will not be executed by chrome extensions per the extension CSP.
Solutions:
So here are the various things I did (solving one typically led to having to solve the next set of errors).
I initially had my constent_security_policy set to
"content_security_policy": "script-src 'self' https://js.stripe.com/v3; object-src 'self';"
I was running into your issue above, and so I added the script into my header call, leading my index.html file to be the following:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://js.stripe.com/v3" async></script>
</head>
<body>
<div id="modal-window"></div>
</body>
</html>
That resolved the first set of errors which matched yours above, but it led to the next set of issues:
I then hit a series of errors around Refused to frame ... because it violates the following Content Security Policy directive: "frame-src"..., so I fixed these by adding to my content_security_policy the following:
frame-src https://js.stripe.com/v3
So my final version of my content_security_policy is as follows:
"content_security_policy": "script-src 'self' https://js.stripe.com/v3; object-src 'self'; frame-src https://js.stripe.com/v3"
I hope that does it for you. It took several hours to work through all of that for me.

Chrome Extension Content-Security-Policy throwing errors, while it's set on *

I've tried all possible setups for the CSP settings in my manifest.json, this is my current (very open and unsafe, I know).
When I open the background inspect for the extension, the first time after reloading it's fine, sometimes up until the fifth time, and then all of a sudden the errors below start pouring in..
"content_security_policy": "default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * 'unsafe-inline';"
And still I'm getting the following error
Refused to load the script 'https://myapp-12345.firebaseio.com/.lp?start=t&ser=1234567&cb=15&v=5' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
What I've tried
Removing the chrome extension when I change the manifest.json
Is there anything I'm missing?

You can only relax CSP in Chrome extensions to a certain extent
"content_security_policy" entry in Chrome Extension manifest allows developers to relax the CSP to a certain extent only. The subset of values allowed for style-src is very limited, quote from the official documentation:
Currently, developers can allowlist origins with the following
schemes: blob, filesystem, https, and chrome-extension. The host part
of the origin must explicitly be specified for the https and
chrome-extension schemes. Generic wildcards such as https:, https://*
and https://*.com are not allowed; ...
Many of the values specified in your CSP (eg. * and 'unsafe-inline' for script-src) are not valid in "content_security_policy" and Chrome ignores them (with a warning) when parsing manifest.json.
Why you don't see warnings or errors about the invalid CSP values
I suspect that you might be checking errors in JavaScript console of the background page. You need to check the errors and warnings generated for your manifest.json first. Go to chrome://extensions/ and click on the Errors button for your extension. There will be several warnings such as this:
content_security_policy': Ignored insecure CSP value "*" in directive
'script-src'.
Edit:
I just noticed that the Errors page (chrome://extensions/?errors=<extension-id>) behaves inconsistently. There seems to be a bug that causes the warnings about ignored CSP values to only show up after reloading the extension.
Links to documentation:
"content_security_policy" in Chrome
"content_security_policy" in Firefox
(The specification is basically identical but I find the documentation on MDN nicer and easier to follow.)

Wasm module compile error in Chrome Extension

In my extension I want to use my own WebAssembly module.
After loading my module (to background.html, or popup.html), I catch the compile error:
CompileError: WebAssembly.compile(): Wasm code generation disallowed by embedder.
Are wasm modules not supported in Chrome Extensions?

It seems from this issue that Chrome requires script-src: 'unsafe-eval' CSP directive be active for WebAssembly compilation. See this discussion as to why this is the case, at least for now.
Chrome Extensions come with default restrictions on CSP; that includes not allowing unsafe-eval. Some of the restrictions cannot be lifted; in this case, you can allow unsafe-eval by adding a manifest key:
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
This should be enough to test if Wasm works in extensions. But heed this warning from documentation:
However, we strongly recommend against doing this. These functions are notorious XSS attack vectors.
Instead of allowing unsafe-eval for your whole extension, you can sandbox code that requires it, using the following approach from the docs:
Using eval in Chrome Extensions. Safely.
The gist of it is to create a separate page in your extension, where unsafe-eval is allowed but Chrome API access is disallowed; you then embed this page in your extension and communicate with it using postMessage().

Chrome implemented special policy 'wasm-eval' exclusively for apps and extensions to resolve this problem. It is chrome-specific, but slowly moving into CSP and WebAssembly standards. Just replace 'unsafe-eval' with 'wasm-eval' in #Xan's solution.
Note though, this is still an attack vector and it's your responsibility to verify the source of executed assembly. See for example uBlock's author thoughts on this policy.

I tried the 'unsafe-eval' and 'wasm-eval' provided by the other answers here but it didn't fix it. Turned out it's specific to the website. If I try it on Github, it doesn't work. But on reddit.com it works. Below is the error I'm seeing in Chrome developer mode. This is for Chrome extension made using Blazor NET6 with AOT. Hopefully someone finds this useful.
CompileError: WebAssembly.instantiate(): Wasm code generation disallowed by embedder
window.Module.s.printErr # blazor.webassembly.js:1
(anonymous) # blazor.webassembly.js:1
async function (async)
(anonymous) # blazor.webassembly.js:1
window.Module.s.instantiateWasm # blazor.webassembly.js:1
createWasm # dotnet.6.0.0.cnc7cl383g.js:1
(anonymous) # dotnet.6.0.0.cnc7cl383g.js:1
blazor.webassembly.js:1 Uncaught (in promise) CompileError: WebAssembly.instantiate(): Wasm code generation disallowed by embedder
at blazor.webassembly.js:1
at async blazor.webassembly.js:1

I tried it in typo-script on a TYPO3-system and 'unsafe-eval' or 'wasm-eval' won't work. :-(
I defined it in the .htaccess and it works. :-)
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin {linkToDomain}
Header set Access-Control-Allow-Credentials true
Header set Content-Security-Policy "default-src 'self' blob: 'unsafe-eval' 'wasm-eval' {other code ...} ; {other code ...} script-src 'self' 'unsafe-eval' 'wasm-eval' {other code ...}; object-src 'self' 'wasm-eval';{other code ...}"
</IfModule>
P.S. Safari makes problems. After adding a site.manifest, extending the Content-Security-policy for default-src in TypoScript od TYPO3 and .htaccess it seems to work. (see above)
It seems to me, that every browser works different.

Mozilla Observatory does not recognize my CSP header

I checked my website on https://observatory.mozilla.org/analyze.html?host=michael.walter.berlin and it is permamently saying that I did not implement a CSP-Header. I implemented it, which can be seen in the headers in Google Chrome and even on the website of Mozilla.
My .htaccess is setting the headers and looks like this:
[...]
Header set X-Content-Security-Policy "default-src 'self';style-src 'self' https://fonts.googleapis.com;font-src 'self' https://fonts.gstatic.com;script-src 'self' https://oss.maxcdn.com;"
[...]
The output from mozilla's observatory is
X-Content-Security-Policy: default-src 'self';style-src 'self' https://fonts.googleapis.com;font-src 'self' https://fonts.gstatic.com;script-src 'self' https://oss.maxcdn.com;
The CSP-Header is recognized from my browser and shows errors in the console when I am violating these rules.
Can anyone tell me what I am doing wrong?
Thanks in advance.