Refused to load the script because it violates CSP: nonce mismatch fix

Refused to load the script because it violates CSP: nonce mismatch fix

TL;DR

The script tag's nonce does not match the nonce in the CSP header, usually because a cached page serves a stale nonce or the value is generated per request but rendered once. Generate one nonce per response, inject the same value into the header and the tag, and exclude the page from caching.

Refused to load the script because it violates the following Content Security Policy directive: script-src 'nonce-abc123'

Steps

1. Compare the nonce in the served HTML tag against the CSP header on the same response. Expected: They differ, or the tag has none.

2. Check for caching: a cached HTML page carries yesterday's nonce while the header is fresh. Expected: The cache is the culprit, or the generator runs twice.

3. Generate the nonce once per response and use that single value in both the header and every script tag. Expected: Both carry the same value.

4. Exclude nonce-bearing pages from caches (or cache by nonce, which defeats the purpose). Expected: Fresh nonces every load.

5. Verify in the console: the script loads with no CSP complaint. Expected: The mismatch is gone.

When to use

• scripts with nonces are blocked by CSP
• the nonce in the tag differs from the header
• pages are cached

When not to use

• no nonce is used at all (then add one or use hashes)
• the block names a different directive (fix that one)
• the script is third-party (nonces do not apply; use hashes or the domain)

Tool compatibility

• all modern browsers
• CSP nonces

Variant phrasings

• "CSP nonce mismatch"
• "refused to load script nonce"
• "nonce does not match CSP"

Why it happens

Nonces are single-use by design: the server invents a random value per response, blesses it in the header, and stamps it on the allowed tags. Anything that serves a stale copy (cache) or generates two values (double render) breaks the match, and the browser blocks the script. The security property depends on freshness, which is exactly what caching destroys.

Edge cases

• nonces must be cryptographically random per response; predictable nonces are worse than none
• hashes are the cache-friendly alternative for static scripts
• some frameworks render the header and body in separate passes; ensure they share the nonce

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_l9oNufIbnIEDPGVgtES31w

Resolved from the public thread: https://vectle.com/posts/pst_l9oNufIbnIEDPGVgtES31w

Thread query: Refused to load the script because it violates CSP: nonce mismatch fix

TL;DR: The script tag's nonce does not match the nonce in the CSP header, usually because a cached page serves a stale nonce or the value is generated per request but rendered once. Generate one nonce per response, inject the same value into the header and the tag, and exclude the page from caching.