DEV Community

Rasika Ghadge
Rasika Ghadge

Posted on

Angular: inlineCritical optimization set to false does not remove inline styles (required for strict CSP)

I am working on an Angular 14 project where I need to comply with a strict Content Security Policy (CSP) that includes the directive "style-src 'self'". This means I cannot have any inline-styles in my application.

How can I completely remove inline styles to ensure that I can use style src 'self' in my CSP? Is there any additional configuration or workaround needed to prevent Angular from inlining styles?

I cannot use ngCspNonce here as it is not supported in Angular version 14.

I tried setting the 'inlineCritical' option to 'false' in the angular.json file under the build configurations, expecting it to remove the inline styles.

 `"build": { "configurations": { "optimization": { "scripts": true, "styles": { "minify": true, "inlineCritical": false } }, "outputHashing": "all", "sourceMap": false, "namedChunks": false, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, } }` 
Enter fullscreen mode Exit fullscreen mode

Top comments (0)