SRI（サブリソース完全性） とは？

SRIは、CDNなど外部サーバーから読み込むJavaScriptやCSSファイルが本物かどうかをハッシュ値で検証する仕組みだよ。HTMLのscriptタグに integrity="sha384-xxxx..." みたいな属性を付けておくと、ブラウザがダウンロードしたファイルのハッシュを計算して、一致しなければ読み込みを拒否してくれるんだ

CDN自体は信頼できるけど、万が一CDNのサーバーが攻撃されてファイルが書き換えられたらどうなる？世界中のWebサイトが同じCDNからjQueryやBootstrapを読み込んでいるから、1つのファイルを改ざんするだけで数百万のサイトに悪意のあるコードを配布できちゃうんだ。これがサプライチェーン攻撃だよ

実際に起きているよ。2018年にはイベント配信サービスのCDNが攻撃されて、仮想通貨を盗むスクリプトが仕込まれた事例があるし、npmパッケージの改ざん事件も何度も起きている。SRIがあれば、たとえCDNが攻撃されてもブラウザ側で検知して読み込みをブロックできるんだ

すごく簡単だよ。たとえば <script src="https://cdn.example.com/lib.js" integrity="sha384-abc123..." crossorigin="anonymous"></script> みたいに書くだけ。ハッシュ値はshasum コマンドやオンラインツールで生成できるし、cdnjsやjsDelivrなどの主要CDNはコピペ用のintegrity付きタグを提供してくれているよ

SRIの検証にはファイルの中身をバイト単位で読み取る必要があるんだけど、別ドメインのリソースはCORSの制限で中身にアクセスできないことがある。crossorigin="anonymous" を付けることで、CORSリクエストとして読み込んでハッシュ検証が正しく動作するようになるんだ

SHA-256、SHA-384、SHA-512が使えるけど、W3Cの仕様ではSHA-384が推奨されているよ。SHA-256でも十分安全だけど、SHA-384はパフォーマンスと安全性のバランスが良いとされているんだ。ちなみにintegrityには複数のハッシュをスペース区切りで書けて、ブラウザは最も強いアルゴリズムを優先して検証するよ

CDN側がファイルを正規にアップデートしたらハッシュが変わるから、integrityの値も更新しないとサイトが壊れる可能性があるよ。だからバージョン固定のURLを使うのが鉄則だね。あとContent Security Policyのrequire-sri-forディレクティブを使えば、SRIなしの外部リソース読み込みを一律ブロックすることもできるよ