HTML nonce Attribute

Introduction

The nonce attribute holds a one-time token (number used once) on trusted inline <script> and <style> elements. It works together with Content Security Policy (CSP)—not on its own. When your server sends a header like Content-Security-Policy: script-src 'nonce-abc123', the browser runs only inline scripts whose nonce attribute matches that value. Injected attacker scripts without the correct nonce are blocked. This tightens CSP compared to allowing all inline code with 'unsafe-inline'.

What You’ll Learn

Purpose of nonce Attribute

The primary purpose of nonce is to let you use a strict CSP that blocks most inline JavaScript and CSS while still allowing specific trusted inline blocks your server placed in the HTML. Cross-site scripting (XSS) attacks often inject new <script> tags; those injected tags will not have the secret nonce value generated for that response, so CSP refuses to execute them.

The server generates a fresh random nonce for every page load, puts the same value in the CSP header (as 'nonce-VALUE') and in the nonce attribute on each allowed inline <script> or <style>. External scripts loaded from allowed origins use script-src https://cdn.example.com instead—they do not need a nonce attribute.

📝 Syntax

Server sets CSP header and matching nonce on inline resources:

<!-- HTTP response header (set by server) -->
Content-Security-Policy: script-src 'nonce-r4nd0m'; style-src 'nonce-r4nd0m'

<script nonce="r4nd0m">
  initDashboard();
</script>

<style nonce="r4nd0m">
  .hero { color: navy; }
</style>

<!-- No nonce — blocked when CSP is strict -->
<script>alert("blocked");</script>

Syntax Rules

• Value is an opaque string; CSP uses 'nonce-VALUE' (with quotes in the header).
• Generate a new unpredictable value on every HTTP response—never reuse across users or pages.
• Valid on <script>, <style>, and <link> (stylesheet).
• External scripts from allowed hosts do not use nonce—they rely on host allowlists.
• JavaScript IDL property: scriptElement.nonce returns the attribute value.
• Set server-side in HTML templates; client-side assignment does not satisfy CSP for inline scripts.

💎 Values

The nonce attribute accepts a single token string:

• nonce="r4nd0mToken" — Must match 'nonce-r4nd0mToken' in CSP.
• Use cryptographically secure random bytes (e.g. 16+ bytes, base64-encoded).
• Same nonce can appear on multiple trusted inline tags in one response.
• Do not expose the nonce in URLs or logs unnecessarily.
• JavaScript: element.nonce reads the value; avoid writing it from untrusted scripts.

// Node.js example — generate per request
const crypto = require("crypto");
const nonce = crypto.randomBytes(16).toString("base64");

res.setHeader(
  "Content-Security-Policy",
  "script-src 'nonce-" + nonce + "'; style-src 'nonce-" + nonce + "'"
);

// Pass nonce into HTML template for script/style tags

Applicable Elements

nonce vs 'unsafe-inline' vs hash

Examples Gallery

Inline script with CSP, inline style with CSP, and reading script.nonce from server-rendered markup.

<meta http-equiv="Content-Security-Policy"
      content="script-src 'nonce-trusted123'">

<script nonce="trusted123">
  initApp();
</script>

<script>evil();</script> <!-- blocked -->

<meta http-equiv="Content-Security-Policy"
      content="style-src 'nonce-style789'">

<style nonce="style789">
  .card { border-radius: 8px; }
</style>

<script id="boot" nonce="<%= serverNonce %>">
  console.log(document.getElementById("boot").nonce);
</script>

♿ Accessibility

• nonce is invisible to users — It does not affect screen readers or keyboard navigation directly.
• Do not block critical UI scripts — Ensure CSP nonces cover accessibility helpers (skip links, focus management) your page needs.
• Prefer external scripts — Moving logic to external files reduces inline CSP complexity and aids caching.
• Test with CSP enabled — Verify assistive features still work under your production policy.
• Avoid inline event handlers — onclick="" attributes are blocked by strict CSP and are poor for accessibility; use addEventListener in nonce-approved or external scripts.

💡 Best Practices