We Keep Coding

azure app insights throws a blocked:csp (content security policy) error

I am trying to use azure app insights in my react application. But when I am running this its failing to post events to azure server due to a csp error.
Refused to connect to 'https://eastus-8.in.applicationinsights.azure.com//v2/track' because it violates the document's Content Security Policy.
Refused to connect to '' because it violates the following Content Security Policy directive: "connect-src 'unsafe-inline' 'self'".
we are using these npm modules to setup insights
"#microsoft/applicationinsights-react-js": "^3.4.0",
"#microsoft/applicationinsights-web": "^2.8.9",
Below the configuration we are using:
import { ApplicationInsights } from '#microsoft/applicationinsights-web';
import { ReactPlugin } from '#microsoft/applicationinsights-react-js';
const { REACT_APP_INSIGHT_CONNECTION_STRING } = process.env;
export const reactPlugin = new ReactPlugin();
const appInsights = new ApplicationInsights({
config: {
connectionString: REACT_APP_INSIGHT_CONNECTION_STRING,
enableCorsCorrelation: true,
enableAutoRouteTracking: false,
extensions: [reactPlugin],
}
});
appInsights.loadAppInsights();
it should allow to post the events from our react app. please let me know if I am missing any configuration to fix this.

can I use both 'unsafe-inline' and 'unsafe-eval' in the same script-scr or do I need to add a new script-scr?

I am working with the gatsby-plugin-csp and want to understand if it is possible to add two keywords both 'unsafe-inline' and 'unsafe-eval' in the same script-scr and make them work? Or do I need to create two different script-scr? There are a few sources that I must use and some them of need eval() and others inline scripts.
Can I do this?
// In your gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-csp`,
options: {
disableOnDev: true,
reportOnly: false, // Changes header to Content-Security-Policy-Report-Only for csp testing purposes
mergeScriptHashes: true, // you can disable scripts sha256 hashes
mergeStyleHashes: true, // you can disable styles sha256 hashes
mergeDefaultDirectives: true,
directives: {
"script-src": "'self' 'unsafe-inline' 'unsafe-eval' www.example.com",
"style-src": "'self' 'unsafe-inline'",
"img-src": "'self' data: www.google-analytics.com"
// you can add your directives or override defaults
}
}
}
]
};
Or should I do this?
// In your gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-csp`,
options: {
disableOnDev: true,
reportOnly: false, // Changes header to Content-Security-Policy-Report-Only for csp testing purposes
mergeScriptHashes: true, // you can disable scripts sha256 hashes
mergeStyleHashes: true, // you can disable styles sha256 hashes
mergeDefaultDirectives: true,
directives: {
"script-src": "'self' 'unsafe-inline' www.example.com",
"script-src": "'self' 'unsafe-eval' www.example.com",
"style-src": "'self' 'unsafe-inline'",
"img-src": "'self' data: www.google-analytics.com"
// you can add your directives or override defaults
}
}
}
]
};
I have tried using the first option with both 'unsafe-inline' and 'unsafe-eval' in this case half of them give errors like Refused to load the script 'http://embed.example.com/next/embed.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval'
I also get this error Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.google-analytics.com https://www.googletagmanager.com
When I change the order of the keywords putting 'unsafe-eval' then 'unsafe-inline' I still get errors refusing to run other scripts.

You could have two CSPs defined, but not the same directive twice in one policy. If you define multiple policies, your content still needs to pass all policies, adding another one can only make it stricter.
Your first script-src is "'self' 'unsafe-inline' 'unsafe-eval' www.example.com", which allows anything from the same server (same host, same port and same or safer scheme), inline scripts, eval (new Function(), setInterval(), setTimeout() and eval()) and scripts from www.example.com.
Your first error is caused by script from embed.example.com, which is blocked by your policy which only allows 'self' and www.example.com. You can add embed.example.com or replace www.example.com with *.example.com.
The second error is likely related to inline event attributes (like onclick, onload etc), click on the link in the error message to see the violating code. You generally need to rewrite them using event handlers. You might be able to allow them with additional efforts in CSP level 3, but I don't think there is full browser compatibility yet.

Content Security Policy error on #googlemaps/js-api-loader

I've been struggling with this issue for few weeks now. No matter what changes I make to my CSP - I still get the same error. I'm not sure if it has anything to do with my CSP headers or not.
Set up:
I have an angular 13 SPA with a NodeJS back end.
I used NPM to install
"#angular/google-maps": "^13.3.2",
"#googlemaps/js-api-loader": "^1.14.3",
I import the methods in my dashboard.ts file:
import { Loader } from "#googlemaps/js-api-loader";
I used to following code snip it in my ngOnInit():
let loader = new Loader({
apiKey: '--------------------------',
});
loader.load().then(() => {
console.log('loaded gmaps')
const location = { lat: 51.233334, lng: 6.783333 }
this.map = new google.maps.Map(document.getElementById("map"), {
center: location,
zoom: 6
})
const marker = new google.maps.Marker({
position: location,
map: this.map,
});
})
I modified my Content Security Header to be:
<meta http-equiv="Content-Security-Policy"
content="script-src 'self' maps.googleapis.com;
img-src 'self' data: maps.gstatic.com *.googleapis.com *.ggpht.com;
font-src https://fonts.gstatic.com/ 'unsafe-inline';
style-src 'self' https://fonts.googleapis.com 'unsafe-inline';
style-src-elem 'self' https://fonts.googleapis.com 'unsafe-inline';
/>
No matter what I do - I always get the same error:
74.6f64f0c92cc7c0a0.js:346 Refused to load the script 'https://maps.googleapis.com/maps/api/js?callback=__googleMapsCallback&key=---------------'
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.
Any insight would be greatly appreciated!

The CSP in the error message has script-src "script-src 'self'" while the one you have defined has "'self' maps.googleapis.com". Most likely there are two CSPs defined, and all content has to pass all policies. Your policy is defined as a meta tag. Look for CSP defined in a response header as well. You will need to determine why and where the other CSP is set and then change or remove it.

Figured it out. Basically, my Angular APP was being served by my NodeJS application. My NodeJS application is using Helmet and it seems that the default CSP from Helmet was over riding the Angular CSP set up in the index.html.

How to allow https://* in csp?

So I am using CSP for my website, but I am running into an issue when it comes to my img-src header, I am using NodeJS, and Express to program my website, in which this website is for my Discord Bot, and well I am wanting to take the time to revamp the website, but now I am stuck.
======
So, I am using the following code for my headers:
app.use(
helmet.contentSecurityPolicy({
directives: {
// eslint-disable-next-line no-irregular-whitespace
...helmet.contentSecurityPolicy.getDefaultDirectives(),
'default-src': ['\'unsafe-inline\'', '\'self\'', '\'https://*\'', '\'http://*\''],
'script-src': ['\'self\'', '\'unsafe-inline\'', '\'unsafe-eval\'', '*'],
'img-src': ['\'self\'', '\'https://*\'', '\'http://*\''],
},
})
);
====
And the error I get (For both Default and Img):
Couldn't Parse unknown Host: https://*
Couldn't Parse unknown Host: http://*
Content Security Policy: Couldn’t parse invalid host 'https://*'
Content Security Policy: Couldn’t parse invalid host 'http://*'
====
Thank you in advance for the help.
If anyone would like to check out the website for any sort of Idea of what I am trying to do, the link is https://therpbot.xyz/, and I am trying to get image links from discord.

If you want to allow https without specifying a domain, then just use "https" without the colon, slashes or star, like this:
Content-Security-Policy: "default-src https:; script-src https; img-src https"
[edit]: for default-src, include the colon...

Hosts like 'https://*' are really invalid, because host-sources should not be a single quoted.
Remove one pair single quotes around '\'https://*\'', '\'http://*\'':
app.use(
helmet.contentSecurityPolicy({
directives: {
// eslint-disable-next-line no-irregular-whitespace
...helmet.contentSecurityPolicy.getDefaultDirectives(),
'default-src': ['\'unsafe-inline\'', '\'self\'', 'https://*', 'http://*'],
'script-src': ['\'self\'', '\'unsafe-inline\'', '\'unsafe-eval\'', '*'],
'img-src': ['\'self\'', 'https://*', 'http://*'],
},
})
);

Content Security Policy error while loading a script

i am trying to render a chart in my app using Pug as seen below:
block content
h2 Question statistics
.col-lg-12
script(src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js")
.chart-container
canvas#myChart2
script.
var ctx = document.getElementById("myChart2").getContext('2d');
ctx.canvas.parentNode.style.width = '50%'
var idata = [1]
var ilabel = [2]
var myChart = new Chart(ctx, { /* ... etc */
This was loaded just fine before a week or so but today when i tried to access this feature the chart would not render.
The error in my console is this:
Refused to load the script
'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.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.
and
Refused to execute inline script because it violates the following
Content Security Policy directive: "script-src 'self'". Either the
'unsafe-inline' keyword, a hash
('sha256-AklvVxShqs4WBi3vUz7qSiPkes2rSVGoNyoZXYVnSA8='), or a nonce
('nonce-...') is required to enable inline execution.
This is the first time i am seeing this error and i don't know how to solve it. Any ideas?

As turned out in comments, here's the line of code that broke it all:
app.use(helmet());
Helmet is a really neat module designed to let you protect your server from the most common attack vectors without worrying much about details. Alas, as any good security tool, it operates in 'paranoid mode' by default. Here's what this small line is actually equivalent to:
app.use(helmet.contentSecurityPolicy());
app.use(helmet.dnsPrefetchControl());
app.use(helmet.expectCt());
app.use(helmet.frameguard());
app.use(helmet.hidePoweredBy());
app.use(helmet.hsts());
app.use(helmet.ieNoOpen());
app.use(helmet.noSniff());
app.use(helmet.permittedCrossDomainPolicies());
app.use(helmet.referrerPolicy());
app.use(helmet.xssFilter());
Yep, a lot of stuff. The one that messed up your setup is the first item of this list. Here's the default values sent as Content-Security-Policy header values by that line:
default-src 'self';
base-uri 'self';
block-all-mixed-content;
font-src 'self' https: data:;
frame-ancestors 'self';
img-src 'self' data:;
object-src 'none';
script-src 'self';
script-src-attr 'none';
style-src 'self' https: 'unsafe-inline';
upgrade-insecure-requests
Once again, that makes sense, as Helmet doesn't know anything about external entities you're using - and your level of trust to those. It's you who are responsible for providing this data, either by adding hash info or by listing the trusted sources in the configuration. For example:
helmet.contentSecurityPolicy({
useDefaults: false,
directives: {
defaultSrc: ["'self'"],
scriptSrc: ["'self'", "example.com"], // scripts from example.com are now trusted
objectSrc: ["'none'"],
upgradeInsecureRequests: [],
},
})
You can configure each module individually, or add this configuration into helmet directly:
app.use(
helmet({
contentSecurityPolicy: {
useDefaults: false,
directives: { ... }
},
})
);