CSPインラインハッシュ生成器｜script-src/style-src用のsha256ハッシュ値を即時生成

Content-Security-Policy (CSP) の script-src や style-src ディレクティブで使用する、インラインスクリプト/スタイルのsha256ハッシュ値をオンラインで簡単に生成するツールです。コードを貼り付けるだけで、CSPヘッダーにそのまま追加できる形式のハッシュ値が即座に出力されます。

💡 ツール概要

このツールは、Webサイトのセキュリティを強化するCSP設定を支援します。クロスサイトスクリプティング（XSS）攻撃のリスクを低減するため、特定のインラインコードのみを安全に許可したい開発者向けのツールです。

• リアルタイムハッシュ生成 インラインスクリプトやCSSコードをテキストエリアに貼り付けると、入力と同時にSHA-256ハッシュ値が自動で計算されます。
• CSP準拠フォーマット 出力結果は 'sha256-...' という形式になっており、そのまま script-src や style-src ディレクティブにコピー＆ペーストして使用できます。
• クライアントサイドでの処理 ハッシュ値の計算はすべてお使いのブラウザ内で完結します。入力されたコードがサーバーに送信されることはなく、セキュリティ面でも安心です。

🧐 よくある質問

Q. <script>タグや<style>タグは含めて計算しますか？

A. いいえ、含めません。CSPの仕様では、ハッシュ計算の対象はタグに囲まれたスクリプトまたはスタイルの「内容（コンテンツ）」のみです。先頭や末尾の空白、改行もハッシュ値に影響するため、タグ内部のコードを正確にコピーして貼り付けてください。

Q. 生成されたハッシュ値はどのように使いますか？

A. HTTPレスポンスヘッダーのContent-Security-Policyフィールド、またはHTMLの<meta>タグで指定します。以下のように、許可したいオリジン（例: 'self'）などと並べて記述します。

// HTTPヘッダーの例
Content-Security-Policy: script-src 'self' 'sha256-a1b2c3d4...';

// metaタグの例
<meta http-equiv="Content-Security-Policy" content="style-src 'self' 'sha256-e5f6g7h8...';">

📚 CSPインラインハッシュ生成器の豆知識

CSPでインラインコードを許可する方法には、このツールで生成する「ハッシュ（hash）」の他に「ノンス（nonce）」を利用する方法もあります。両者の主な違いは、静的か動的かです。

• ハッシュ (hash-source) コードの内容自体からハッシュ値を計算する方法です。コードが静的で変更されない場合に適しています。一度ハッシュ値を計算すれば、そのコードが存在する限りCSPヘッダーで使い回すことができます。このツールはこの方式に対応しています。

• ノンス (nonce-source) リクエストごとに生成される一度限りのランダムな文字列（ノンス）を利用する方法です。サーバーサイドでノンスを生成し、CSPヘッダーと許可したい<script>タグの両方に同じ値を埋め込む必要があります。動的にスクリプトが生成されるページに適していますが、実装がやや複雑になります。

どちらの方法も、セキュリティリスクの高い 'unsafe-inline' を使用せずにインラインコードを許可するための優れた手段です。コンテンツの性質に応じて適切な方法を選択することが重要です。