CDNスクリプトへSRIを設定する方法｜UtilityBox実務ガイド

このガイドで防ぐ問題

外部CDNのファイル変更や改ざん時に、想定外コードを読み込むリスクを減らします。

特に「latestなど内容が変わるURLへ固定ハッシュを付けている。」状態を見落とさないため、作業を始める前に元データや現在の設定を残し、変更前後を比較できる状態を作ることが重要です。

CDNスクリプトへSRIを設定する方法では、処理が完了したかだけでなく、入力条件、変更内容、確認結果の3点を記録します。自動判定で確定できない部分は、利用先の仕様や担当者の判断と照合してください。

WORKED EXAMPLE

CDNスクリプトへSRIを設定する方法の確認記録例

「latestなど内容が変わるURLへ固定ハッシュを付けている。」可能性のあるケースを、元データを壊さずに切り分けます。

処理・確認前

発生している問題
外部CDNのファイル変更や改ざん時に、想定外コードを読み込むリスクを減らします。

最初に確認する原因
1. latestなど内容が変わるURLへ固定ハッシュを付けている。
2. crossorigin属性が不足している。
3. ライブラリ更新時にハッシュを更新していない。

処理・確認後

作業記録
1. 固定バージョンURLのファイルを取得します。
2. SHA-384等のSRI値を生成し、integrityとcrossoriginを設定します。
3. 更新時はファイル内容とハッシュを同時に更新します。

完了判定
- 正常時に読み込める。
- 1文字変更したファイルがブラウザに拒否される。
- フォールバック動作を必要に応じて用意する。

この例で確認するポイント

正常時に読み込める。
動的に内容が変わるリソースには適しません。
関連ツールは「sri-hash-generator、file-hash-calculator、csp-header-builder」です。処理結果を確定情報として扱わず、利用先の仕様と照合します。

最初に原因候補を分ける

同じ症状でも原因は一つとは限りません。特に「latestなど内容が変わるURLへ固定ハッシュを付けている。」に該当する場合と「crossorigin属性が不足している。」に該当する場合では、確認すべき入力や設定が異なります。

一度に複数の条件を変更せず、変更前の状態と比較できるように一項目ずつ確認すると、再発時にも判断しやすくなります。

latestなど内容が変わるURLへ固定ハッシュを付けている。
crossorigin属性が不足している。
ライブラリ更新時にハッシュを更新していない。

結果を採用する前に照合する

最低限、確認項目の「正常時に読み込める。」を満たすことを確かめます。結果の一部だけで判断せず、件数、形式、代表値、境界条件など、このガイドに示す確認項目を組み合わせてください。

また、動的に内容が変わるリソースには適しません。この限界に該当する場合は、ツールの結果だけで作業を確定せず、仕様書や元データへ戻って確認します。

問題が起きる主な原因

latestなど内容が変わるURLへ固定ハッシュを付けている。
crossorigin属性が不足している。
ライブラリ更新時にハッシュを更新していない。

安全に作業する手順

1
固定バージョンURLのファイルを取得します。
2
SHA-384等のSRI値を生成し、integrityとcrossoriginを設定します。
3
更新時はファイル内容とハッシュを同時に更新します。

結果を利用する前の確認項目

正常時に読み込める。
1文字変更したファイルがブラウザに拒否される。
フォールバック動作を必要に応じて用意する。

作業完了前のチェックリスト

変更前の元データまたは設定を保存した
固定バージョンURLのファイルを取得した
SHA-384等のSRI値を生成し、integrityとcrossoriginを設定した
更新時はファイル内容とハッシュを同時に更新した
正常時に読み込める。
1文字変更したファイルがブラウザに拒否される。
フォールバック動作を必要に応じて用意した
このガイドの限界と利用先の仕様を確認した

この方法の限界と注意点

動的に内容が変わるリソースには適しません。
SRIは配信元への通信自体を止めません。

UtilityBoxのガイド方針

ツールの操作方法だけでなく、結果を誤用しないための具体例、確認項目、処理の限界、元データを保管すべき場面まで記載します。原因・手順・完了判定・限界を運営者が確認したガイドだけを一覧と検索対象へ掲載します。

品質確認の方法と更新方針を確認する →

CDNスクリプトへSRIを設定する方法