CSP compliance: Angular uses inline styles internally, preventing removal of unsafe-inline

[Muhammad Youshea Khan]

Hi team,

We’ve been working on tightening our application’s Content Security Policy (CSP) and successfully removed all inline scripts and styles from our own codebase. However, we’ve discovered that Angular itself injects inline styles dynamically at runtime, which forces us to keep 'unsafe-inline' in our style-src directive.

Our current Content-Security-Policy (simplified):

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self';

When we remove 'unsafe-inline' from style-src, Angular components fail to render correctly because inline <style> blocks are injected by the framework (for example, through component encapsulation or Angular Material).

We’d like to achieve full CSP compliance without unsafe-inline, but it seems currently impossible due to these framework-generated styles.

Questions:

1. Is there an official or recommended way to configure Angular to avoid runtime inline styles (e.g., through ViewEncapsulation options or build-time style injection)?

2. If not, is there any planned roadmap for CSP compliance improvements in future Angular versions?

3. Are there known workarounds for production environments (e.g., nonces or hashes that Angular can align with)?

Environment details:

• Angular: 16 and 19 | two repos

• Angular Material: 16.2.12 | 19.2.3

• Build system: Angular CLI

• Browser(s): Chrome, Edge

Thank you for your time and for maintaining such an incredible framework.

Best,
Muhammad Youshea Khan
Techlogix Pvt Ltd