CSP Nonce Generator

How to use the generated nonce

1. The CSP nonce preset is active: 16 random bytes in Base64, giving a 24-character value ending in ==.

2. Ready to paste shows the header and the matching tag, for example:

   Content-Security-Policy: script-src 'nonce-SQu4/GjzG3plY6CUwsx8gA=='
   
   <script nonce="SQu4/GjzG3plY6CUwsx8gA==" src="/app.js"></script>
   

3. Use it to try out a policy in a local test page or a staging config. Press Generate new for another value.

A nonce copied from this page is the same on every request, so it protects nothing in production. Real deployments generate it in server code, as shown below.

How a nonce-based policy works

With script-src 'nonce-…' the browser runs a script only if its nonce attribute matches the value in the header of that very response. Your own <script> tags get the attribute from your templates. Markup an attacker injects through an XSS bug does not know the value, because it changes on every page load, and the browser refuses to run it.

Three details matter in practice:

• The value is compared as text. Copy it exactly, = included, and keep the single quotes around 'nonce-…' in the header but not in the attribute.
• Browsers hide the attribute. Once the page loads, getAttribute("nonce") returns an empty string and CSS selectors cannot see the value, which stops some exfiltration tricks. Scripts that need it read the nonce property instead.
• 'strict-dynamic' lets a trusted, nonced script load further scripts without each needing its own nonce. It is the usual companion of nonces in a modern policy, and with it the browser ignores host allowlists such as https:.

The policy can also be delivered in a <meta http-equiv="Content-Security-Policy"> tag; nonces work there too, though some directives, such as frame-ancestors, do not.

Generating a nonce per response

The server creates 16 random bytes for each request, puts them in the header and passes the same value to the template. In Node.js, without any framework:

const crypto = require("crypto");
const http = require("http");

http.createServer((req, res) => {
  const nonce = crypto.randomBytes(16).toString("base64");
  res.setHeader("Content-Security-Policy",
    `script-src 'nonce-${nonce}' 'strict-dynamic'; object-src 'none'; base-uri 'none'`);
  res.setHeader("Content-Type", "text/html; charset=utf-8");
  res.end(`<script nonce="${nonce}" src="/app.js"></script>`);
}).listen(8080);

In Python, base64.b64encode(secrets.token_bytes(16)).decode() gives the same kind of value; frameworks with CSP middleware usually expose it as a template variable. Whatever you use, make sure a cache in front of the server does not store the HTML with one nonce and hand it to every visitor. Caching the page body while the header changes breaks every script; caching both repeats the nonce for everyone.

Nonces, hashes and SRI

A nonce approves a script tag for one response. A CSP hash approves a specific inline script forever: 'sha256-…' is the Base64 SHA-256 of the exact text between <script> and </script>. For <script>alert('Hello');</script> it is:

script-src 'sha256-gKHd+pSZOJ3MwBsFalomyNobAcinjJ44ArqbIKlcniQ='

Hashes suit static sites and inline snippets that never change; compute them with the SHA-256 to Base64 tool, minding whitespace, since one extra space changes the hash. Subresource Integrity is a third mechanism with the same Base64 digests: integrity="sha384-…" on a <script src> makes the browser check the downloaded file itself. The SRI hash generator builds those tags.

FAQ