HTML nonce Global Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The nonce attribute is a global attribute in HTML that provides a cryptographic token (a “number used once”) to elements, primarily used to enhance the security of inline scripts and styles in web pages. Its main purpose is to work with Content Security Policy (CSP), helping browsers determine whether inline scripts or styles are allowed to execute.

Purpose and Use

The nonce attribute helps prevent cross-site scripting (XSS) attacks by allowing the server to assign a unique, unpredictable value to inline scripts or styles. When a page includes a Content Security Policy that permits scripts or styles with a specific nonce, only elements carrying that exact nonce value will execute.

This makes it possible to safely use inline scripts or styles without having to disable CSP restrictions, ensuring that any injected malicious code (which would not have the correct nonce) is blocked by the browser.

Applicable Elements

While the nonce attribute is global and can technically appear on any HTML element, it is only meaningful on the following elements:

<script> – for inline JavaScript
<style> – for inline CSS

Example in context:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Nonce Example</title>
  <!-- A style with nonce -->
  <style nonce="abc123">
    body { background-color: lightblue; }
  </style>
  <!-- CSP header must match nonce -->
  <script nonce="abc123">
    console.log('This script is allowed to run');
  </script>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

In the above example:

The nonce="abc123" value must match the nonce specified in the site’s Content Security Policy.
Any <script> or <style> without this exact nonce would be blocked from execution.

Best Practices

Use a unique nonce for each page load – Nonce values should be randomly generated per HTTP response to prevent attackers from reusing old values.
Never hard-code nonce values in your HTML templates – They should be generated server-side dynamically.
Pair with CSP header – The nonce is only effective if you have a CSP that recognizes it, for example:

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

Do not reuse nonces across pages or sessions – Reusing nonces reduces security effectiveness.

Security Considerations

The nonce attribute is a powerful defense against inline script injection, but it is not a substitute for sanitizing user input.
Attackers cannot predict or forge the nonce if generated securely.
Only inline scripts or styles with a matching nonce are executed, which mitigates the risk of XSS for those elements.

Syntax

<script nonce="EDNnf03nceIOfn39fn3e9h3sdfa">console.log('This trusted script will run.');</script>

Values

nonce
The value of a nonce attribute is not a fixed keyword. Instead, it must follow these criteria:
- Type: A high-entropy, cryptographically strong base64 string.
- Uniqueness: It must be unique for every single page load (request). If a nonce is reused, it becomes predictable, defeating its security purpose.
- Length: While there is no strict character limit, it is typically at least 128 bits of entropy (about 24+ characters) to prevent brute-force attacks.

Example

HTML

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Nonce Example</title>

  <!-- A style with nonce -->

  <style nonce="abc123">

    body { background-color: lightblue; }

  </style>

  <!-- CSP header must match nonce -->

  <script nonce="abc123">

    console.log('This script is allowed to run');

  </script>

</head>

<body>

  <h1>Hello World</h1>

</body>

</html>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML nonce global attribute. Hover over a browser icon to see the version that first introduced support for this HTML global attribute.