# WebサイトのSRI設定方法｜外部スクリプトのハッシュ検証と更新手順

> SRIは、HTMLに記したハッシュとブラウザーが取得したファイルの内容を照合し、一致しないリソースを読み込まない仕組みです。提供元を確認した固定版のファイルからSHA-384を生成し、integrity属性とクロスオリジン時のCORS設定を確認します。正規更新ではファイルとHTMLを同じ変更単位で見直し、CORSの失敗とハッシュ不一致を分けて調べます。

## メタ情報

- URL (HTML): https://funnel-ai.jp/media/website-subresource-integrity/
- 公開日: 2026-10-08
- 最終更新: 2026-10-07
- テーマ: Funnel Ai Media -AI- (https://funnel-ai.jp/media/ai/)
- カテゴリ: Web制作・LP (https://funnel-ai.jp/media/web-design/)
- 編集: ファネルAi編集部 (https://funnel-ai.jp/company/funnelai-editorial/)
- 監修: ファネルAi監修チーム (https://funnel-ai.jp/company/funnelai-review/)
- 出典メディア: Funnel Ai Media (https://funnel-ai.jp/media/)

## 本記事のポイント

- SRIは固定したファイルの取得内容をハッシュ照合し、一致しないリソースの読み込みを拒否する。
- クロスオリジンでSRIを使うときは、crossorigin属性と配信元のCORS応答を両方確認する。
- 正規の更新時は提供元を確認した実ファイル、ハッシュ、HTMLを同じ変更単位で検証する。

## 想定質問

- Subresource Integrity（SRI）は何を検証し、検証対象のスクリプトやスタイルシートが一致しないとブラウザーはどう扱いますか？
- 固定版のJavaScriptやCSSからSHA-384などのSRIハッシュを生成し、integrity属性へ設定するにはどうしますか？
- 別オリジンのCDNからSRI対象ファイルを読み込むとき、crossorigin属性と配信側のCORS応答をどう確認しますか？
- CDNファイルの正規更新後にSRIハッシュが一致しない場合、変更元・実ファイル・HTMLの更新をどう照合して復旧しますか？

---

本文（HTML）は https://funnel-ai.jp/media/website-subresource-integrity/ を参照してください。