---
description: How to run Angular under a Content Security Policy using ngCspNonce and CSP_NONCE, and send violation reports to Report URI.
---

# 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](/frameworks/nginx/), [Apache](/frameworks/apache/) or [Express](/frameworks/express/) pages. Your URL comes from the [Setup](https://report-uri.com/account/setup/) page:

    Content-Security-Policy-Report-Only: default-src 'self'; style-src 'self' 'nonce-{random}'; script-src 'self' 'nonce-{random}'; report-uri https://abc123.report-uri.com/r/d/csp/reportOnly

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](https://angular.dev/best-practices/security)

## Start Monitoring with Report URI

**Already using us for CSP?** Find your report-uri value on [Setup](https://report-uri.com/account/setup/), or view your [CSP reports](https://report-uri.com/account/reports/csp/).

**New to Report URI?** Create an account and grab your report-uri value from the [Setup](https://report-uri.com/account/setup/) page.

[Start your free trial](https://report-uri.com/register/?plan=starter2025)