jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML Tools

Free CSP Hash Generator

Content Security Policy allows specific inline scripts and styles by their cryptographic hash. This tool hashes your exact inline code and outputs the CSP directive — every space, newline, and indent matters, so the hash matches only the exact content you provide.

Loading tool...

What is CSP Hash Generator?

A CSP hash is a base64-encoded SHA-256, SHA-384, or SHA-512 digest of an inline script or style block's exact content. When you add the hash to your CSP header as script-src 'sha256-...' or style-src 'sha256-...', the browser allows that specific inline code to run while blocking all other inline scripts or styles. This is the most secure alternative to 'unsafe-inline'.

quickAnswer

Use a CSP hash to allow a specific inline script or style without enabling all inline code with unsafe-inline. The hash is a cryptographic digest of the exact code content — SHA-256 is the standard. Add the hash to your CSP as script-src 'sha256-...' or style-src 'sha256-...'.

limitations

  • The hash is only valid for the exact content hashed. Any whitespace, formatting, or content change produces a completely different hash and breaks the CSP allowlist.
  • Some build tools and HTML minifiers may modify inline whitespace in production, invalidating hashes generated from development code. Verify against production output.
  • CSP hashes do not work with inline event handlers (onclick, onerror) without enabling unsafe-hashes, which weakens security significantly.

How to use this tool

  1. Copy the exact inline script or style content from your HTML — every space, newline, and indent must match.
  2. Paste it into the text area and select the hash algorithm.
  3. Copy the hash value and add it to your CSP header or meta tag as part of script-src or style-src.

What you can use it for

  • Allow a specific inline script for a critical-path loader or analytics snippet without enabling all inline scripts.
  • Allow a small inline style block for above-the-fold critical CSS while a stylesheet loads.
  • Upgrade an existing CSP that uses unsafe-inline to hash-based allowlisting for stronger security.

Use cases

Practical examples

example

Critical-path inline style

A page needs a small inline style for the hero section above the fold. Hash the exact style block, add style-src 'sha256-...' to the CSP, and remove unsafe-inline. The browser runs only this specific style block.

example

Inline analytics boot script

A privacy-focused site inline-loads a small analytics boot script. Hash the script, add script-src 'sha256-...', and block all other inline scripts including any that might be injected by compromised third-party resources.

Common mistakes

  • Changing even one whitespace character after generating the hash — the hash will no longer match and the script or style is blocked.
  • Using the same hash for minified and unminified versions of the same code — they produce different hashes.
  • Assuming a hash from a development environment matches the production build — code minification or templating changes the content.

verification

  1. Check the browser console for CSP violation reports after adding the hash — a blocked script or style shows a violation message with the expected hash.
  2. Use the browser DevTools Application panel or Security tab to inspect the active CSP policy and confirm your hash is recognized.

FAQ

Questions about CSP Hash Generator

Why does my hash stop working after I edit the inline code?

The hash is a cryptographic digest of the exact byte sequence of the inline code. Any change — adding a space, changing indentation, adding a comment, or modifying a single character — produces a completely different hash. You must regenerate the hash every time you modify the inline code. This is by design: it ensures only the exact code you approved can run.

Should I use a hash or a nonce for CSP?

Hashes are best for static inline code that rarely changes, like critical CSS or a small boot script. Nonces are better for dynamically generated inline code because a nonce changes on every page load, while a hash would need to be recomputed for every unique output. For static sites, hashes are simpler because they do not require server-side nonce generation.

What is unsafe-hashes and should I enable it?

unsafe-hashes allows hashes to be applied to inline event handlers (onclick, onerror, etc.) and javascript: URLs. This is dangerous because event handlers often contain user-influenced values. Only enable unsafe-hashes if you fully control every event handler attribute and understand that a hash match on an event handler can enable script injection if user input reaches the attribute value.

Related tools

More html tools

Html

ARIA Live Region Generator

Generate accessible ARIA live region HTML snippets with role, aria-live, aria-atomic, and aria-relevant attributes. Includes optional JavaScript update function.

Open tool

Also try

Also try

Seo

AI Crawler robots.txt Builder

Build a robots.txt policy for AI crawlers. Choose from open, selective, or strict presets and block specific AI training bots while allowing search engines.

Open tool