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.

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

   [both included nonces]

3. 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.

Seems like you have a default CSP applied, one very strict with just "default-src 'none'". You need to locate this one and turn it off. All content needs to pass all policies, and this one blocks everything.