SRIとは
SRI(Subresource Integrity、サブリソース完全性)は、CDNなど外部のサーバーから読み込むJavaScriptやCSSが、改ざんされていないことを、ブラウザがハッシュ値で検証する仕組みです。script や link タグの integrity 属性に、期待するハッシュ値を書きます。
SRIが必要な理由
外部から読み込むファイルは、配信元が侵害されたり、ドメインの運営者が代わったりすると、読み込んでいるすべてのサイトに、不正なコードが配られます。2024年には、多くのサイトが使っていたスクリプト配信のドメインが運営者の変更後に不正なコードを返すようになり、訪問者が不審なサイトへ転送される事態になりました。
SRIを付けておけば、ファイルの内容が1文字でも変わった時点で、ブラウザは実行も適用もしません。
SRIの仕組み
- ブラウザが、外部のファイルを取得する。
- ファイルのハッシュ値を計算し、
integrity属性の値と比べる。 - 一致すれば実行し、一致しなければ読み込みを止める。
使えるアルゴリズムは sha256、sha384、sha512 です。sha384 がよく使われます。外部のファイルには crossorigin="anonymous" が必要で、配信元がCORSを許可している必要があります。
SRIの確認方法
ページが読み込んでいる外部のスクリプトに、integrity 属性が付いているかを見ます。次のコマンドは、外部のURLを読み込む script タグを一覧します。
curl -s https://example.com/ | grep -o -E '<script[^>]*src="https?://[^"]*"[^>]*>'表示された各行に、integrity= が含まれているかを確かめます。自サイトのドメインのものは、対象にしなくて構いません。
SRIの設定例
ハッシュ値は、ファイルから計算します。
curl -s https://cdn.example.com/lib.js | openssl dgst -sha384 -binary | openssl base64 -A出力の先頭に sha384- を付けた文字列を、HTMLに書きます。
<script src="https://cdn.example.com/lib.js"
integrity="sha384-ここに計算した値"
crossorigin="anonymous"></script>WordPressでは、wp_enqueue_script で読み込むスクリプトに、script_loader_tag フィルターで属性を足せます。
add_filter('script_loader_tag', function ($tag, $handle) {
if ($handle === 'my-lib') {
$tag = str_replace(' src=', ' integrity="sha384-ここに計算した値" crossorigin="anonymous" src=', $tag);
}
return $tag;
}, 10, 2);よくある間違いと注意点
latestのような版を指定しないURLや、内容が頻繁に変わるファイル(解析タグ、広告タグ、アクセスする端末で内容が変わるスクリプト)には付けられません。更新のたびに読み込みが止まります。版を固定したURLに付けます。crossorigin属性を付け忘れると、外部のファイルは読み込まれません。- ライブラリの版を上げたときは、ハッシュ値も更新します。
- 自サイトのサーバーから配るファイルに付けても、効果は限られます。HTMLとハッシュ値を同じサーバーが出しているため、そのサーバーが侵害されれば、両方が書き換えられます。
Webサイト セキュリティチェッカーで確認する
Webサイト セキュリティチェッカーは、別のドメインから読み込むスクリプトやスタイルシートに、integrity 属性が付いていないものがないかを診断します。読み込み元のドメインごとに、まとめて示します。
関連用語
- CSP
- XSS(クロスサイトスクリプティング)
- セキュリティヘッダー
- CORS
関連する用語
サイトの設定を無料で確認する
サイトのURLを入力するだけで、SRI(サブリソース完全性) などの設定状況を診断できます。Webサイト セキュリティチェッカー「Security Checker X」は、登録なしで使えます。
