How do I resolve CSP block on lite-server and github-pages of angular app

I want to deploy my angular app. On localhost:4200 it is served without errors. When testing deployment on lite-server with:

lite-server -base-dir 'dist/<foldername>'


I get a Get-Error

Safari:

Refused to execute a script because its hash, its nonce, or 'unsafe-inline' appears in neither the script-src directive nor the default-src directive of the Content Security Policy.
​

FireFox & Chrome

"Content-Security-Policy: The page settings have blocked the execution of an inline script (script-src-elem) because it violates the following directive: 'default-src 'self'."
​

The same error is shown for style-src-elem directive.

Questions


How do I configure my csp to work with my angular application?

Why is csp falling back to default-src 'self' if default-src is set to 'none'. and script-src-elem and style-src-elem are defined in <meta> tag?

Script-src-elem defines unsafe-inline inside the policy - why is it not accepted?

Context


Information on the application:

• written in Angular 19.2.6
• image assets and json ressources are loaded from /assets/ folder
• contains a webworker
• contains inline styling
• contains embeddings
• contains images

The app is build to dist folder in /root/. The build works on localhost:4200. Here the csp from the browser/index.html

<meta http-equiv="Content-Security-Policy" content="default-src 'none';
style-src 'self' 'unsafe-inline';
img-src 'self' data:;
font-src 'self';
connect-src 'self';
worker-src 'self';
frame-src www.youtube.com;
style-src-elem 'self' 'unsafe-inline';
script-src 'self' 'unsafe-eval' 'unsafe-inline';
object-src 'self';
base-uri 'self';
"/>


I also tried to deploy the website to github-pages, without success. For deployment, I built the app in production configuration, then I pushed it to a github repo and set the pages to serve a specific branch.

Here the deployment cmd

ng build --configuration production --base-href <websitename>

I Tried


I did try different configurations of my csp.

1. I tried to solely rely on angulars auto csp set in angular.json with

"security": {
"autoCsp": true
},


no success. errors on localhost, too.

1. I tried to merge my own and the auto csp. no success. errors on localhost, too.

[both included nonces]

1. I wrote my own - see above. Here no localhost errors appear, but still I am not able to test deploy on lite-server and github pages refuses connection, too.

I was expecting that the csp shown above allows me to load the contents of my website through lite-server and github-pages.

I do not understand much from CSP, so I am having a hard time troubleshooting or seeing the obvious. Thank you for your support.

Continue reading...