見えるセキュリティ
SRI(サブリソース完全性)
SUBRESOURCE INTEGRITY
この概念とは?
SRI(Subresource Integrity:サブリソース完全性)は、取得したJavaScriptやCSSの内容を、ページが指定したハッシュと照合する仕組みです。ブラウザが内容からハッシュを計算し、一致しなければ、そのファイルの実行や適用を止めます。この教材では、同じURLから届くJavaScriptの内容だけを変えて比較します。
取得されたことと、ページで利用されたことは別です。
- THEME
- web-vuln
- KIND
- defense
- REVIEW
- self-reviewed ·
同じ期待値で照合し、届く本文だけを変えて比較します。
共通の前提:SRI有効・CORS成功
ページを配信するサイト
https://shop.example/notice
HTML・期待値
JavaScriptを配信するCDN
https://cdn.example/hello.js
JSファイル
閲覧しているブラウザ
取得・照合・実行
01 / ページが期待するハッシュを指定する
サイト → ブラウザ:HTMLと期待値 A
ここからは、閲覧しているブラウザ内の処理 ↓
閲覧しているブラウザ
照合する場所はブラウザです。取得された本文を、実行前に確認します。
HTMLの期待ハッシュ A
integrity属性(両モード共通)
sha384-fkahY7fXJ9Jd29SgWuIYXvpGpfUr2SldwEB1uIWSvEgKevRuEsgvzSTPWvMIvAUR受信本文:未取得
本文のハッシュ:未計算
ページ表示(説明用)
script:未実行
お知らせ
説明用の図解です。コードの実行・外部への送信は行いません。
どちらも同じ期待値でファイルを取得。一致時は実行してようこそ、不一致時は実行せずお知らせ。現在はSTEP 1、未実行、ページ表示は「お知らせ」です。
一致なら実行。不一致なら実行せず、「お知らせ」のままです。
STEP 01 / 4
ページが期待するハッシュを指定する
STEP 1 / 4: ページが期待するハッシュを指定する
HTMLには、確認したJavaScriptのハッシュがintegrity属性に指定されています。ブラウザは、この値を照合の基準にします。
技術的な詳細を見る
期待値は両モードともSHA-384のAです。src・integrity・crossoriginを変えず、取得する本文だけを変えて比較します。[S01 §3.1–3.3][S03]
この概念の要点
要点
ページの期待値と、取得した本文を照合する
HTMLのintegrity属性にあるハッシュを基準に、ブラウザがファイルの内容から計算した値を比較します。同じURLというだけでは照合を通過しません。
要点
取得後、実行・適用前に止める
不一致ならJavaScriptを実行せず、CSSなら適用しません。取得されたことと、ページで利用されたことは別です。
要点
一致は安全性の証明ではない
SRIは期待した内容との一致を確認します。ファイルの選定・脆弱性への対応・更新時の確認も必要です。正規の更新でも、期待値が古ければ不一致になることがあります。[S04・S05]
理解確認
理解確認
理解確認
SRIの補足
integrityの書き方と対象
ハッシュは、ファイルの内容から計算する要約値です。ページは、確認した内容のハッシュをintegrity属性に指定しています。両モードでSRIを使い、別オリジンの取得に必要なCORSの条件も満たしています。
integrity属性は、アルゴリズム名とBase64形式のハッシュを組み合わせます。この例はSHA-384です。SHA-256・SHA-384・SHA-512が使われます。この図のハッシュは、表示用の本文から実際に計算した値です。[S01 §3.1–3.2]
<p id="notice">お知らせ</p>
<script
src="https://cdn.example/hello.js"
integrity="sha384-fkahY7fXJ9Jd29SgWuIYXvpGpfUr2SldwEB1uIWSvEgKevRuEsgvzSTPWvMIvAUR"
crossorigin="anonymous"></script>CSSのスタイルシートを読む<link rel="stylesheet">にもintegrityを指定でき、不一致ならそのCSSを適用しません。CSSには、そのCSS本文から計算した期待ハッシュを使います。JavaScriptのハッシュを流用しません。[S01 §3.8.1]
ハッシュはファイル内容のバイト列を対象にするので、空白・改行等の違いも照合に影響します。URLやファイル名だけから作る値ではありません。SHA-384の計算内部・複数ハッシュの優先順位・moduleの依存グラフは、この教材では扱いません。
別オリジンのSRIとCORS
別オリジンからSRI付きの外部scriptを取得するには、CORSの条件も満たす必要があります。この例ではHTMLのcrossorigin="anonymous"でCORSを使い、CDNがHTTP応答にAccess-Control-Allow-Origin: *を付けます。[S01 §3.3.2・S02・S03]
図の取得条件は両モード共通で、HTTP 200、Content-Type: text/javascript、Access-Control-Allow-Origin: *です。CORSが成功したうえで、SRIの一致・不一致を比較しています。
anonymousは、この別オリジンへの要求でCookie等の認証情報を送らない設定です。通信を匿名化する機能ではありません。crossorigin属性だけでは、配信先のCORS許可を代わりに設定できません。
| 条件 | この外部scriptの扱い |
|---|---|
| CORS成功・SRI一致 | 主例では実行へ進む |
| CORS成功・SRI不一致 | 主例では実行しない |
| CORS失敗 | CORSの条件で読み込みに失敗。SRI不一致とは別の理由 |
別オリジンの普通のscriptは、SRIなし・crossoriginなしで読み込める場合があります。それはSRI付きの取得条件とは別で、CORS教材のfetchによる応答読み取りとも対象が異なります。SOPが別オリジンの通信・資源の利用をすべて禁止する、という意味ではありません。[S03・S06]
同一オリジンの外部ファイルにもSRIを使えます。SRIは外部APIやCDN専用の仕組みではありません。[S01 §3.3.2]
HTTPS・CSPと何が違う?
HTTPSを使っていても、配信サーバー上のファイルが変われば、その変更された内容が届くことがあります。SRIでは、期待値が変わっていない条件で、その内容の違いを検知できます。HTTPSは通信の保護、SRIは期待する内容との照合を担い、組み合わせて使います。[S01 §1・§5.1]
既存のCSP教材では、nonceという許可条件に基づくscriptの実行制限を学びました。今回のSRIは、外部ファイルの本文から計算した値をintegrityと照合します。CSPにはハッシュを使う機能等もあるため、「CSPは内容を確認しない仕組み」と一般化せず、学んだ場面を区別します。
SRIの照合を通っても、別のCSPや読み込み条件が実行を止める場合があります。主図は、それらの追加条件で止まらない例です。[S02 §4.1・S03]
信頼する内容・更新・限界
同じURLでも、取得した本文が変わると、この例では期待ハッシュと一致しなくなります。この例では、照合を通過したJavaScriptは実行され、ページに「ようこそ」と表示されます。不一致のファイルは実行されず、ページに「お知らせ」と表示されます。SRIは期待した内容との一致を確認する仕組みなので、確認する内容の選定と、更新時の確認も必要です。
SRIはコードの悪意・脆弱性や作者の本人性を判定しません。信頼して採用する内容を選び、その内容から期待ハッシュを用意する必要があります。ハッシュを指定しただけで、脆弱なライブラリが安全になるわけではありません。[S04]
正規更新でも本文が変われば、期待値と不一致になる場合があります。利用する版と内容を確認し、srcとintegrityを整合させて更新します。不一致を直すために、届いたファイルを無条件に期待値へ取り込み続ける運用にはしません。[S04・S05]
HTMLを配信する側まで侵害され、integrityを書き換えられたり削除されたりすると、この基準を守れません。SRIはサイト本体の保護や依存関係の管理を代替しない仕組みです。[S01 §5.1・S05]
| 設定 | SRIによる扱い |
|---|---|
| 有効なintegrityを指定し、この例のように不一致 | SRIで実行を止める |
| SRIを使わない | SRIの照合による停止はない。ほかの条件も通れば、その内容が実行される |
参考資料
- 参考資料W3C — Subresource Integrity
S01Recommendation(2016-06-23版)|§1、§3.1–3.3、§3.7、§3.8.1、§5.1|期待値・照合・不一致・CSS・限界|仕様書確認:2026-10-06
- 参考資料WHATWG — Fetch Living Standard
S02Living Standard|§4.1 Main fetch、§4.10 CORS check|取得後の照合・network error・CORS条件|仕様書確認:2026-10-06
- 参考資料WHATWG — HTML Living Standard, script
S03Living Standard|script integrity、外部classic scriptの取得、§2.5.4 CORS settings attributes|属性の役割|仕様書確認:2026-10-06
- OWASPOWASP — Third Party JavaScript Management Cheat Sheet
S04継続更新の対策指針|Subresource Integrity、Keeping JavaScript libraries updated、MarSecOps|採用内容と更新の運用|仕様書確認:2026-10-06
- OWASPOWASP Community — Subresource Integrity (SRI)
S05継続更新の補助説明|Description、considerations、更新|主サイト自体の侵害と限界|仕様書確認:2026-10-06
- 参考資料MDN Web Docs — Subresource Integrity
S06標準仕様ではなく補助説明|Using SRI、How browsers handle SRI、SRI and CORS|表示上の更新2026-04-14|仕様書確認:2026-10-06