CSP・SRIハッシュ生成（Content-Security-Policy / integrity）
スクリプトやCSSのファイルからSRIの integrity 値と <script>／<link> タグを作り、CSP（Content-Security-Policy）をディレクティブごとに組み立てます。すでにあるレスポンスヘッダーの診断は HTTPヘッダー解析・セキュリティ診断 をご利用ください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
SRI（integrity）ハッシュ
JS・CSSなどのファイルを選択、またはここにドラッグ＆ドロップします（64MBまで）。
CSP（Content-Security-Policy）
ディレクティブごとの許可する送信元
診断
使い方
- SRIが必要なら、「ファイルから計算」でJS・CSSを選び（またはテキストを貼り付け）、タグ用のURLを入れて、integrity とHTMLタグをコピーします。
- CSPは「プリセット」から近いものを選び、ディレクティブごとの送信元を調整します。
- 「診断」の指摘を確認し、「Report-Onlyにする」で動作確認してから本番適用するのがおすすめです。
- 「出力形式」を選んで「コピー」し、サーバー設定やHTMLに貼り付けます。
注意事項
- SRIのハッシュは、ファイルの内容がバイト単位で1つでも違うと一致しません。貼り付けたテキストは改行コードや末尾の改行が元のファイルと変わることがあるため、できるだけファイルを選んで計算してください。
- SRIの対象ファイルは、別オリジンのCDNなどでは CORS（Access-Control-Allow-Origin）を許可している必要があります。このツールが出力するタグには crossorigin="anonymous" を付けています。
- このツールは外部のURLを取得しません。CDNのファイルは、ダウンロードして選択するか、中身を貼り付けて計算します。
- CSPを厳しくするとインラインスクリプト・外部SNSの埋め込み・解析タグなどが動かなくなることがあります。まずReport-Onlyで確認し、ブラウザの開発者ツールのコンソールで違反を確認してください。
- nonce（リクエストごとに変わる値）はサーバー側での生成が必要です。静的サイトではスクリプトのハッシュ（'sha256-…'）を送信元に追加する方法が使えます。
- 出力は設定の雛形です。実際のサイトの読み込み元に合わせて調整し、適用後は必ず動作確認をしてください。
用語解説
CSP（Content-Security-Policy）
ページが読み込める画像・スクリプト・接続先などをサーバーが宣言する仕組みです。想定外の送信元からの読み込みをブラウザがブロックするため、XSS（スクリプト注入）の被害を抑えられます。
SRI（Subresource Integrity）
script や link に integrity 属性でハッシュ値を指定し、読み込んだファイルが改ざんされていないかをブラウザが検証する仕組みです。CDNが侵害された場合の対策になります。
nonce
リクエストごとに生成するランダムな値です。CSPとスクリプトタグに同じ値を付けると、そのタグだけ実行を許可できます。
よくある質問
SRIはsha256・sha384・sha512のどれを選べばよいですか？
どれもブラウザが対応しています。MDNなどでは sha384 が一般的に使われており、迷ったら sha384 で問題ありません。複数選ぶと integrity 属性に空白区切りで並び、ブラウザは最も強い方式で検証します。
SRIを付けたのにスクリプトが読み込まれません。
ファイルの内容がハッシュ計算時と1バイトでも違うか、別オリジンのファイルでCORSが許可されていない可能性があります。CDNがファイルを更新していないか、crossorigin="anonymous" が付いているか、配信元が Access-Control-Allow-Origin を返しているかを確認してください。
CSPを設定したらサイトの一部が動かなくなりました。
インラインスクリプトや外部の解析・広告・埋め込みタグが、許可していない送信元からの読み込みとしてブロックされている可能性があります。まず「Report-Onlyにする」で配信し、ブラウザの開発者ツールのコンソールに出る違反メッセージを見て、必要な送信元だけを追加してください。
metaタグとHTTPヘッダーのどちらで設定すべきですか？
HTTPヘッダーを推奨します。metaタグでは frame-ancestors などが無効で、Report-Onlyも使えず、タグより前に読み込まれたリソースには効きません。サーバー設定を変えられない静的ホスティングでは、metaタグが次善策になります。
CDNのURLを入れるだけでハッシュを計算できますか？
できません。このツールはデータを外部に送らずブラウザ内で処理するため、URLからは取得しません。CDNのファイルをダウンロードして選択するか、中身を貼り付けてください。
このページをシェア