HTMLツール

無料 CSP ハッシュジェネレーター

インラインスクリプト・スタイル用のCSPハッシュ値を生成します。SHA-256、SHA-384、SHA-512に対応。

ツールを読み込み中...

CSP ハッシュジェネレーターとは

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'.

クイックアンサー

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-...'.

制限事項

  • 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.

使い方

  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.

主な用途

  • 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.

用途

使用例

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.

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.

よくあるミス

  • 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.

検証

  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

CSP ハッシュジェネレーターのFAQ

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.

関連ツール

その他のhtmlツール

こちらもお試しください

こちらもお試しください