HTML nonce Attribute

HTML nonce Attribute

The HTML nonce attribute contains a cryptographic value that can be used with Content Security Policy (CSP) to authorize specific scripts and styles. The server generates a new unpredictable nonce for each response and includes the same value in the CSP and on the elements that are allowed by the policy.

Global Attribute

The nonce attribute is a global HTML attribute. Its practical use with Content Security Policy is to authorize specific <script> and <style> elements.

How nonce Works

A nonce is a random value generated by the server for a single response. The value is included in a CSP directive and in the nonce attribute of each script or style that the policy should allow.

Content-Security-Policy: script-src 'nonce-RANDOM_VALUE'

<script nonce="RANDOM_VALUE">
  // Allowed by the matching CSP nonce
</script>

The browser compares the nonce on the element with the nonce permitted by the policy. When they match, the resource is allowed by that nonce source expression. A script without the required authorization remains blocked by the applicable policy.

Using nonce with <script>

A nonce can authorize an inline script that would otherwise be blocked by a Content Security Policy that restricts inline JavaScript.

<script nonce="RANDOM_VALUE">
  document.getElementById("message").textContent = "This script is allowed.";
</script>

The value in the element must match the nonce value supplied by the server in the applicable CSP directive.

Using nonce with <style>

The same technique can authorize a <style> element when inline styles are restricted by the site's Content Security Policy.

<style nonce="RANDOM_VALUE">
  .notice {
    font-weight: bold;
  }
</style>

The CSP can include the matching nonce in a style-src directive to authorize the styles in that element.

Generating a Secure Nonce

A production nonce must be generated on the server using a cryptographically secure random value. A new unpredictable nonce should be generated for every HTTP response and inserted into both the CSP and the elements it is intended to authorize.

Do not copy a fixed nonce value into every page response. Reusing a predictable value defeats the security purpose of a nonce because an attacker may be able to discover the value and use it to bypass the policy.

Security Considerations

Nonce-based policies can allow specific scripts and styles without broadly permitting all inline code with directives such as 'unsafe-inline'. This makes nonces useful when implementing a restrictive Content Security Policy.

Browsers also protect nonce values from some forms of exposure. For example, reading the content attribute with getAttribute("nonce") returns an empty string in modern browsers. When script legitimately needs the value, it can be accessed through the element's nonce property.

Common Mistakes

Do not use the same fixed nonce for every response. Generate a new unpredictable value each time the server sends the page.

Do not create nonce values using predictable information such as timestamps, sequential numbers, or simple counters. Use a cryptographically secure random generator.

Do not place a nonce on an element and expect it to provide protection by itself. The nonce must work with a Content Security Policy containing the corresponding nonce source expression.

Do not manually add the same nonce to every script indiscriminately. Only scripts and styles that are intended to be trusted by the policy should receive the authorized nonce.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The nonce global attribute and nonce-based Content Security Policy are widely supported in current core browsers. Its practical behavior depends on the page’s Content Security Policy.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the nonce Attribute

A real CSP nonce must be generated by the server for each response, so a normal static editor example cannot securely demonstrate the complete process. The example instead shows how the same generated value appears in the CSP and on the script it authorizes.

Summary

The HTML nonce attribute contains a cryptographic value used with Content Security Policy to authorize specific scripts and styles. A secure nonce must be unpredictable, generated by the server for each response, and matched by the corresponding nonce source expression in the CSP.