Subresource Integrity（サブリソースインテグリティ）

概要

Subresource Integrityは2024年に主要ブラウザ全Baseline対応に達し、さらにESM Import Map統合により完成度が高まった、Subresource Integrity(SRI) W3C標準仕様。3rd-party CDN(jsDelivr/cdnjs/unpkg/Cloudflare CDN等)経由でロードするスクリプト・スタイル・モジュールの完全性を、SHA-256/384/512のハッシュ値で検証する仕組み。CDN改ざん攻撃(Magecart・Polyfill.io攻撃 2024年6月等)を防ぐ重要セキュリティ機能で、<script src="https://cdn.example.com/lib.js" integrity="sha384-..."> の構文で記述する。Hashが一致しないresource はブラウザが読込拒否し、CSP require-sri-for script style ディレクティブと組合せると同一originスクリプト以外全SRI必須化される。2024年のESM Import Map仕様統合で、Modern JavaScript モジュール(import)も SRI対応可能になり、Bundler不要のEdge Native ESM運用での信頼性が向上。Chrome 45+/Firefox 43+/Safari 11.1+で対応済みの長期間安定仕様だが、2024年Baseline +Import Map統合で再び注目を集める。

主な特徴・仕組み

• integrity属性: <script integrity="sha384-base64hash"> で Hash値指定
• 複数Hash アルゴリズム: SHA-256/SHA-384/SHA-512(SHA-1は2024年非推奨)
• 複数Hash併記: integrity="sha384-A sha384-B" で複数候補から1つ一致でOK
• CSP統合: require-sri-for script style で SRI 必須化(CSP 3 Level)
• crossorigin属性: crossorigin="anonymous" でCORS有効化(CDN経由必須)
• ESM Import Map統合: 2024年新規、<script type="importmap"> の integrity Map指定
• 動的import対応: import('./mod.js', { with: { integrity: 'sha384-...' } })
• Network Error: Hash不一致時はNetwork Errorでロード拒否+エラーログ
• Cache対応: ブラウザCache HitでもHash再検証、CDN改ざん即時検知
• HSTS+SRI併用: HSTSでTransport Security+SRIでContent Integrityの2層防御
• Browser Support: Chrome 45+/Firefox 43+/Safari 11.1+/Edge 17+ Baseline 2024

スペック比較表

具体例・対応製品

<!-- 基本的なSRI -->
&lt;script
  src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"
  integrity="sha384-Ka05NgVeT4SFiOIKqiEMmH13yt9xX0KWCmZBz0+4XWSZKHJB3FJYbAR3TJoT9X3z"
  crossorigin="anonymous">
&lt;/script>

<!-- 複数Hash併記(CDN移行時) -->
&lt;link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  integrity="sha384-A sha384-B"
  crossorigin="anonymous">

<!-- ESM Import Map統合(2024年新規) -->
&lt;script type="importmap" integrity="sha384-...">
{
  "imports": {
    "lodash": "https://cdn.jsdelivr.net/npm/[email protected]/lodash.js",
    "react": "https://esm.sh/react@19"
  },
  "integrity": {
    "https://cdn.jsdelivr.net/npm/[email protected]/lodash.js": "sha384-...",
    "https://esm.sh/react@19": "sha384-..."
  }
}
&lt;/script>

<!-- 動的import + integrity -->
&lt;script>
const mod = await import('./module.js', {
  with: { integrity: 'sha384-...' }
});
&lt;/script>

Content-Security-Policy: require-sri-for script style

• Polyfill.io 改ざん攻撃(2024年6月): 攻撃発覚後、SRI必須化された業界標準
• Cloudflare CDN: 全てのCDN URLに公式SRI Hash提供
• jsDelivr/cdnjs/unpkg: CDN経由のSRI Hash自動生成、SRI Hash GeneratorがWebUIで利用可能
• GitHub: GitHub Pages のCDN自動SRI対応
• 競合機種: Polyfill.io(2024年攻撃→SRI採用)、CDN改ざんリスクのある全Web Service

自作PCでの選び方・注意点

Subresource IntegrityはWeb開発者向けのセキュリティ仕様で、jisaku.comでは外部CDN(Vercel/Cloudflare R2)経由のスクリプト・スタイル・フォント読込で運用必須レベルの重要技術。2024年6月のPolyfill.io 改ざん攻撃(数百万のWebサイトが影響)以降、SRI採用は業界標準になっており、jsDelivr/cdnjs/unpkg等の主要CDNはSRI Hash提供を当然視している。Next.js 16+TypeScript環境では、next.config.js の experimental options で SRI 自動生成可能(experimental.sri.algorithm = 'sha384')。Vite/Webpack/Rollup等のBundler も SRI Plugin で Production Buildに自動Hash追加可能。一方、jisaku.comで Self-host Asset(VercelのPublic Asset)はSRI不要で、CDN経由スクリプト(Stripe.js/Google Tag Manager/Sentry SDK等)のみSRI設定推奨。Bundler 経由の依存関係は、CDN URL+SRI HashをHTML内で固定+各依存を Vercel自社CDNで Self-host化が安全Pattern。CDN変更時(version up等)はHash更新必要、CI/CD パイプラインでSRI Hash自動更新スクリプトの運用が現実的。Polyfill.io 攻撃の教訓として、3rd-party CDN は信頼してもSRI 必須+定期的な依存関係Audit(npm audit/pnpm audit)で安全性確保。

関連用語との違い

CSP host-listとの違い: CSP host-listは Origin制限(script-src https://cdn.example.com)、SRIはHash検証(integrity="sha384-...")。両者補完関係、CSPで Origin限定+SRIでContent検証の2層防御が業界標準。 HSTSとの違い: HSTSはTransport Layer Security(HTTPS強制)、SRIはContent Integrity(Hash検証)。HSTSで通信路安全+SRIでContent改ざん検知の2層、両者でEnd-to-end Security実現する。

よくある質問（FAQ）

Q1: SRI HashはどうやってGenerate？ A: jsDelivr/cdnjs/unpkg等のCDN サイトでURL を入力すると公式SRI Hash自動生成。CLI なら openssl dgst -sha384 -binary file.js | openssl base64 -A でHash算出。Vercel/Webpack/Vite はBundler Plugin で Production Build自動 Hash追加。

Q2: CDN version変更時のHash更新は手動？ A: 手動更新でも動作するが、CI/CD でSRI Hash自動更新が安全。例: dependabot/Renovate Bot で 依存関係 update PR を生成、HTMLのSRI Hashも同時更新Hookでcommit。Hash不一致でデプロイ失敗するため、テスト環境で事前検証必須。

Q3: ESM Import Map統合の利便性は？ A: 大幅な利便性向上。Modern JavaScript モジュール(import 構文)で複数依存関係を一度にIntegrity管理可能、Bundler不要のEdge Native ESM運用が現実的になった。Deno/Bun のNative ESMでも同様に活用可能。

まとめ

• Subresource Integrity = 2024年Baseline Newly available+Import Map統合
• integrity属性+SHA-256/384/512 Hash でCDN改ざん検出
• Polyfill.io 攻撃(2024年6月)以降の業界標準セキュリティ
• ESM Import Map統合で Modern JavaScript モジュールも対応
• Chrome 45+/Firefox 43+/Safari 11.1+/Edge 17+ 全Baseline