Content Security Policy blocks Angular Styles

Question

I want to publish a web application with a strict Content Security Policy. The last remaining issue is: style-src 'self';

I get an error in the browser console saying that a resource was blocked from loading based on the style-src directive in the CSP. The error references code in the main..js file that is produced from ng build --prod.

If I add 'unsafe-inline' to the style-src directive in the CSP, everything works fine, however, I do not want to do this.

Is there anything I can do in my code or build option to make the web application work with the more restrictive CSP?

I was using Angular 11 and just upgraded to 12 and have the same error.

Thanks!

Answer 1

Options for resolution:

1. Use SHA-256 hashes

If there is a relatively small amount of such violations, you can add their hashes. Example, if you see this in your log:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'report-sample'". Either the 'unsafe-inline' keyword, a hash ('sha256-YpcdPia2p132TdnpnY8zwrWWSqByEKGZBY5iqsLBkSg='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

Add 'sha256-YpcdPia2p132TdnpnY8zwrWWSqByEKGZBY5iqsLBkSg=' You may also need 'unsafe-hashes' - depending on the context. Note: This approach is not easy to sustain. A small change in a style will force you to recreate the hash. It's useful only when you have a handful of such inline scripts.

2. Nonces

You can use nonces to "bless" inline styles and approve them. However, even Google experts who advocate for CSP nonces don't usually deploy them on style-src - only on script-src. Note: This approach is hard to deploy. A unique nonce needs to be generated for every pageload.

3. Use 'unsafe-inline' - it's fine for style-src (not great for script-src)

Really, even setting a CSP with style-src 'unsafe-inline' 'self' someurl.com; is much safer than 99.9% of sites. More than accounts.google.com that does not restrict style-src at all. Github have a fantastic high quality CSP with style-src: 'unsafe-inline'

Good luck!

Answer 2

If I add 'unsafe-inline' to the style-src directive in the CSP, everything works fine, however, I do not want to do this.

Looks like that's impossible at the moment. According to Angular's support thread at Github, an allowing 'unsafe-inline' in style-src is required for Angular applications (have a look at "Suggested Steps" 1. "We should clearly state that allowing 'unsafe-inline' in style-src is required for Angular applications.").

Answer 3

Update for Angular 16: you can now provide a CSP_NONCE token and it will apply that nonce to any CSS added by Angular. The nonce will just need to match the one from your Content Security Policy.

bootstrapApplication(AppComponent, {
  providers: [{
    provide: CSP_NONCE,
    useValue: globalThis.myRandomNonceValue
  }]
});

https://angular.io/guide/security#content-security-policy