CSP Hash Generator
Hash an inline script for use in a CSP script-src directive.
Overview
The CSP Hash Generator computes the SHA-256, SHA-384, or SHA-512 digest of an inline <script> or <style> block, formatted in the exact 'sha256-<base64>' form that a Content-Security-Policy header expects. Paste the literal script body, copy the hash, and add it to your script-src or style-src directive — no nonce, no unsafe-inline.
This is the workflow when you have a small inline snippet you cannot move to an external file and want to keep your CSP strict. Front-end engineers learning how to whitelist an inline script in CSP or how to generate a sha256 hash for script-src will reach for it during the move from unsafe-inline to a hardened policy.
How it works
CSP Level 2 introduced inline hashing: the browser computes the same digest over the script body (no surrounding tags, exact bytes) and only executes it if the result matches a hash listed in the policy. The generator runs SHA-256/384/512 over the supplied text, encodes the bytes as standard base64, and wraps the value in single quotes with the algorithm prefix.
A single byte of whitespace difference produces a different hash, so the input must exactly match what is between the <script> open and close tags. Mixing two inline scripts requires one hash per block — the browser does not concatenate.
Examples
- Input
console.log('hi');→'sha256-cd9827ad4f...'. - Input
document.body.classList.add('ready')(with no trailing semicolon) → distinct hash from the same string with a semicolon. - A multi-line snippet generates one hash that matches only when the script content is preserved byte-for-byte.
- An empty input returns the hash of the empty string, which is rarely useful but valid.
FAQ
Do I include the script tags in the input?
No. Only the JavaScript or CSS body — what lives between the opening and closing tags.
Why doesn't my hash match what the browser computes?
Almost always whitespace or line-ending differences. Server-side template engines often trim or normalise content. Match exactly what ships in the rendered HTML.
Should I prefer hashes or nonces?
Hashes for static content (a small inline init script). Nonces for content the server generates per request. Hashes survive caching; nonces require fresh delivery on every response.
Does SHA-256 vs SHA-512 matter for security here?
Functionally no — any of the three CSP-approved algorithms gives equivalent integrity. SHA-256 is the most compact and the browser industry default.