SRI ハッシュが一致しないとどうなりますか？

ブラウザーはリソースをブロックし、違反をコンソールに報告します。リソースが不可欠な場合、ページが壊れることがあります。これは望ましい動作です。改ざんされたコードを読み込むより、壊れるほうがましです。SRI 違反を監視し、リソースを意図的に更新したときはハッシュも更新してください。

SRI はすべての CDN 攻撃から守れますか？

いいえ。SRI が防ぐのはリソース内容の改変 (改ざん、MITM) です。防げないもの：CDN のダウン (フォールバックを使う)、CDN が別のリソースを配信すること (URL の間違い)、CDN によるトラフィックのログ記録です。SRI は防御の 1 層にすぎません。HTTPS、CSP、信頼できる CDN と組み合わせてください。

外部リソースに Subresource Integrity(SRI)を使う

SRI は外部スクリプトやスタイルのハッシュを検証することで、改ざんされていないことを保証します。integrity 属性の生成と検証を学びましょう。

1

SRI は <script> タグと <link> タグに integrity 属性を追加します：integrity="sha384-<base64-hash>"。ブラウザーはダウンロードしたリソースのハッシュを計算し、integrity 属性と比較します。一致しなければ、リソースはブロックされます。これにより、CDN の侵害や MITM 攻撃による外部リソース経由の悪意あるコード注入を防げます。
2

ハッシュ計算ツール →
外部リソース (スクリプトや CSS ファイル) の SHA-384 ハッシュを計算します。ハッシュを base64 でエンコードします。integrity 属性は integrity="sha384-<base64-hash>" です。SRI には SHA-384 を使ってください (SHA-256 ではなく)。推奨されるアルゴリズムです。また、クロスオリジンのリソースに SRI を使うには crossorigin 属性も必要です。
3

SHA-3 / Keccak ハッシュ計算 →
あるいは、SRI に SHA-3-256 を使う方法もあります。SHA-384 が標準ですが、SHA-3 も最新のブラウザーでサポートされています。利用可能な中最も強いアルゴリズムを使ってください。ハッシュはリソースの正確なバイト列に対して計算しなければなりません。どんな変更 (空白、圧縮) でもハッシュは変わります。

よくある質問

SRI ハッシュが一致しないとどうなりますか？: ブラウザーはリソースをブロックし、違反をコンソールに報告します。リソースが不可欠な場合、ページが壊れることがあります。これは望ましい動作です。改ざんされたコードを読み込むより、壊れるほうがましです。SRI 違反を監視し、リソースを意図的に更新したときはハッシュも更新してください。
SRI はすべての CDN 攻撃から守れますか？: いいえ。SRI が防ぐのはリソース内容の改変 (改ざん、MITM) です。防げないもの：CDN のダウン (フォールバックを使う)、CDN が別のリソースを配信すること (URL の間違い)、CDN によるトラフィックのログ記録です。SRI は防御の 1 層にすぎません。HTTPS、CSP、信頼できる CDN と組み合わせてください。