content security policy (CSP) not working with style-src self

Question

I want a content security for my angular app, however if I write the following content security:

<meta http-equiv="Content-Security-Policy" 
      content="
      default-src 'none'; 
      img-src 'self'; 
      font-src 'self'; 
      connect-src 'self'; 
      script-src 'self'; 
      style-src 'self'; 
      trusted-types angular angular#unsafe-bypass; 
      object-src 'none'">

But with s tyle-src 'self' ; I get a bunch of erros for my created components. I did some research and found that issue https://github.com/angular/angular/issues/6361

This means the only solution is to use? Or missunderstood something?

 style-src 'self' 'unsafe-inline';

Answer 1

I have been configuring my CSP a couple of days now and it seems that unsafe-inline is needed with Angular and isn't likely to change in the short term.

This angular issues talk about it. https://github.com/angular/angular-cli/issues/3430 https://github.com/angular/angular-cli/issues/12378