Angular¶

Angular inserts inline styles at runtime, which is why a strict CSP breaks an otherwise untouched Angular application - the styles are blocked and the app renders unstyled. Angular's answer is a nonce it can pick up and apply to everything it injects.

What Angular gives you¶

An ngCspNonce attribute on the root application element, e.g. <app ngCspNonce="randomNonceGoesHere"></app>, which Angular uses when inserting inline styles.
A CSP_NONCE injection token, if you need to provide the value in code rather than markup.
An autoCsp option in the workspace configuration, as an alternative to wiring the attribute yourself.

A documented minimal policy for a brand-new application:

default-src 'self'; style-src 'self' 'nonce-randomNonceGoesHere'; script-src 'self' 'nonce-randomNonceGoesHere'

A recommendation to adopt Trusted Types alongside CSP, since both operate at the DOM level where XSS is actually prevented.

Setting the header¶

Angular does not serve your application, so the header comes from whatever does - see our Nginx, Apache or Express pages. Your URLs come from the Setup page:

Content-Security-Policy-Report-Only: default-src 'self'; style-src 'self' 'nonce-{random}'; script-src 'self' 'nonce-{random}' 'report-sha256'; report-uri https://abc123.report-uri.com/r/d/csp/reportOnly; report-to default
Reporting-Endpoints: default="https://abc123.report-uri.com/a/d/g"
Report-To: {"group":"default","max_age":31536000,"endpoints":[{"url":"https://abc123.report-uri.com/a/d/g"}],"include_subdomains":true}

The Reporting-Endpoints and Report-To headers tell the browser where report-to default sends reports, including the CSP Integrity reports that 'report-sha256' turns on.

The same nonce has to appear in the header and in ngCspNonce on the same response, so whatever generates the header must also render the attribute.

Things to watch for¶

A nonce needs server-side templating. Angular's guidance is explicit that you need something able to inject the value into both the header and index.html per request. A statically served index.html cannot do this - if that is your setup, you need hashes, or a nonce injected at the edge.
The nonce covers styles Angular injects, not third-party scripts you have added to index.html. Those need their own policy entries.
A CSP that blocks Angular's inline styles produces an app that loads and functions but renders with no styling at all. It looks like a CSS build failure rather than a policy problem.

Official documentation¶

Angular - Security

Start Monitoring with Report URI¶

Already using us for CSP? Find your CSP reporting directives on Setup, or view your CSP reports.

New to Report URI? Create an account and grab your CSP reporting directives from the Setup page.

Start your free trial