As per this thread https://github.com/angular/angular-cli/issues/20864
We have the industry recommended CSP applied to our production server. We're preparing to roll out a new version of our portal, based on ANZ 13 - which by default has angular css optimization enabled. This breaks the styles on the site when you use this CSP.
What is Volosofts strategy for handling this? It appears that out of the box, ANZ is broken/non-compatible with a strict/secure CSP. Have I missed something that is available to just "turn on"?
Note: loosening our CSP is not an option.
Thanks
1 Answer(s)
-
0
Hi @hra
This is currently the most practical and widely adopted method by many developers facing this issue. Angular's style optimization can generate inline styles that often violate your CSP. By simply disabling this feature, you can achieve immediate compatibility. To do this, in your angular.json file, in the architect -> build -> configurations -> production section, simply change the optimization setting as stated below.
"optimization": { "scripts": true, "styles": { "minify": true, "inlineCritical": false }, "fonts": true },If you don’t want to completely forego Angular CSS optimization, implementing a nonce-based CSP is technically the safest way possible. However, this requires significant additional development effort.
A unique "nonce" is generated for each server response. This nonce is both specified in the HTTP Content-Security-Policy header as style-src 'nonce-...' and is included as a nonce attribute in all <style> tags dynamically added by Angular. The browser will only execute styles that have a matching nonce.
Angular's default compilation process does not have the ability to automatically add nonces to optimized CSS.
The easiest way to currently ensure compatibility with Angular's style optimization while maintaining your strict CSP is to turn off Angular's optimization. While nonce based CSP offers greater security flexibility, it currently imposes a significant custom development overhead to overcome the incompatibility with Angular.
The most practical way to resolve this issue without relaxing your current CSP is to disable Angular’s problematic CSS optimization feature (specifically inlineCritical CSS). This will ensure your style files are loaded as separate files, making them compatible with your style-src 'self' directive. It may have a minor impact on performance, but if your security requirements take priority, this is an acceptable trade-off.
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image)
