Content Security Policy Tutorial | Crash Course 2024 (Angular + NGINX)

In this video, we go in-depth on how to configure the CSP (Content Security Policy) in Angular with NGINX as our server.
The CSP headers and nonce (number once) number will be configured on the server-side.
If you are seeing errors like:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'" ". Either the 'unsafe-inline' keyword, a hash, or a nonce ('nonce-...') is required to enable inline execution.
You most likely have an invalid configuration.
#programming #angular #nginx

[@avinashkarn1057]

Best video I have ever seen on CSP, can you please assist any resource to apply CSP to my dotnet core api + angular application, I have implemented dynamic nonce in my application from server side but still in the document inside network tab (the very first sub tab behind fetch/xhr tab i.e inside all subtab) for every route or page it is still showing unsafe inline and unsafe eval.., although it is showing correct in the endpoints or inside requests under fetch/xhr under network tab, any resource or suggestions will help... Thaks

[@codedeck]

Honestly I have little to no experience with Dotnet, but the logic is pretty much the same. I assume that the backend only sets the headers here correct? Do you use nginx to serve your app?

[@avinashkarn1057]

No I am using dotnet core api deployed on azure app services

[@avinashkarn1057]

I am setting the http response headers from the server side i.e. from the backend only

[@avinashkarn1057]

And the fun part is, it's not showing under the document tab when I run it in local environment, after deployment it is showing incorrect under document tab