CDN のファイルに付ける integrity 属性の値を、ブラウザ内で計算します
CDN から読み込む JavaScript や CSS が、配信元で差し替えられていないかをブラウザに検証させる仕組みです。integrity 属性にファイルのハッシュを書いておくと、ブラウザはダウンロードした中身のハッシュを計算し、一致しなければ実行も適用もしません。W3C の Subresource Integrity 仕様で定義され、script と link rel="stylesheet" で使えます。
値の形は アルゴリズム名-Base64 です。sha384- のようにハイフンで区切り、続く部分はハッシュのバイト列を Base64 で書いたものです。16進ではないので、一般的なハッシュツールの出力をそのまま貼っても通りません。このツールはブラウザの WebCrypto で計算し、Base64 まで済ませた形で出します。
別オリジンから読み込むリソースに SRI を掛ける場合、crossorigin="anonymous" が必要です。これが無いと、ブラウザは中身を読めない不透明なレスポンスとして扱うため、ハッシュを検証できません。生成されるタグにはこの属性を含めています。配信側が CORS ヘッダを返していない CDN では、SRI 自体が使えません。
空白区切りで複数書けます。仕様では、ブラウザが理解できるもののうち最も強いものだけを使って検証します。したがって sha256 と sha512 を並べても「両方満たす」ではなく「sha512 で検証する」動きになります。移行期に古いブラウザ向けの値を残す用途に使ってください。
| アルゴリズム | Base64 の長さ | 使いどころ |
|---|---|---|
| sha256 | 44文字 | 互換性重視。短いが現在の推奨は sha384 以上 |
| sha384 | 64文字 | 実務での既定。多くの CDN の案内もこれ |
| sha512 | 88文字 | 最も強い。値は長くなる |
ハッシュ計算はすべてブラウザ内（WebCrypto）で行っています。選んだファイルやテキストがサーバーへ送られることはありません。ローカルの file:// で開いた場合は WebCrypto が使えないことがあります。
Subresource Integrity の仕様が Base64 を指定しているためです。ハッシュのバイト列を Base64 で書き、先頭にアルゴリズム名とハイフンを付けます。一般的なハッシュツールが出す16進の文字列をそのまま貼っても検証は通りません。
別オリジンから読み込む場合は必要です。これが無いとブラウザはレスポンスの中身を読めないため、ハッシュを検証できません。同一オリジンのファイルには不要です。
ブラウザは理解できるもののうち最も強いものだけで検証します。両方を満たす必要がある、という動きにはなりません。古いブラウザ向けの値を残す移行用途で使います。
いいえ。ハッシュ計算はブラウザの WebCrypto ですべて行います。選んだファイルや貼り付けたテキストがサーバーへ送信されることはありません。