T
security web-security sri hash cdn frontend cybersecurity

サブリソース整合性 (SRI) と SRI ハッシュ計算機で Web アプリケーションを保護する

サードパーティのスクリプトの脆弱性からウェブサイトを保護します。サブリソース整合性 (SRI) の実装方法を学び、SRI ハッシュ計算機を使用して CDN アセット用の安全な整合性ハッシュを生成する方法を解説します。

2026-04-16

サブリソース整合性 (SRI) と SRI ハッシュ計算機で Web アプリケーションを保護する

現代の Web 開発では、すべてをゼロから構築することは稀です。React、Vue、Bootstrap などのライブラリをホストするために、コンテンツデリバリネットワーク (CDN) を利用しています。しかし、この依存関係にはリスクが伴います。もし CDN が侵害され、読み込んでいるスクリプトが実のところ悪意のあるコードに置き換えられていたらどうなるでしょうか？

そこで登場するのが サブリソース整合性 (SRI) です。このガイドでは、SRI の仕組みと、ユーザーの安全を守るために SRI ハッシュ計算機 を使用する方法について説明します。

1. サブリソース整合性 (SRI) とは？

サブリソース整合性 (SRI) は、ブラウザが取得したリソース（例：CDN からのリソース）が予期せぬ改ざんを受けずに配信されたことを検証できるようにするセキュリティ機能です。

仕組み

HTML にリソースを含める際に、そのリソースの暗号ハッシュを integrity 属性に指定します。ブラウザは以下の手順を実行します。

  1. リソースを取得する。
  2. 取得したリソースのハッシュを計算する。
  3. 指定されたハッシュと比較する。
  4. 一致すればリソースを実行し、一致しなければブラウザはそのリソースをブロックします。

HTML 構文

<script src="https://example.com/example-framework.js"
        integrity="sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcOtpguf4Dez6GdrJCT9Wo+SWax9fEE99l"
        crossorigin="anonymous"></script>

2. SRI ハッシュ計算機の使用

SRI を実装するには、読み込むファイルの正しい暗号ハッシュが必要です。SRI ハッシュ計算機 はこのプロセスを自動化します。

SRI で一般的なハッシュアルゴリズム

  • SHA-256: 安全ですが、ハッシュ値がわずかに短くなります。
  • SHA-384: SRI で最も一般的に推奨されるアルゴリズムです（セキュリティと長さのバランスが取れています）。
  • SHA-512: 最も安全で、ハッシュ値が長くなります。

SRI ハッシュ生成の手順

  1. ファイルの提供: スクリプトのローカルバージョンをアップロードするか、CDN アセットの URL を指定します。
  2. アルゴリズムの選択: SHA-256、SHA-384、SHA-512 から選択します。
  3. 生成: ツールはアルゴリズム名で始まる文字列を生成します（例: sha384-...）。
  4. コピー＆ペースト: 生成された文字列をスクリプトまたはリンクタグの integrity 属性に挿入します。

3. 現代の Web セキュリティにおいて SRI が重要な理由

CDN 侵害に対する防御

大規模な CDN がハッキングされたとしても、SRI はサイトの安全を確保します。悪意のあるコードはハッシュと一致しないため、ブラウザは実行を拒否します。

コンプライアンスと信頼

SRI の使用は、OWASP などのセキュリティ組織が推奨するベストプラクティスです。ユーザーやクライアントに対して、データの安全性を真剣に考えていることを示すことができます。

中間者攻撃 (MITM) の防止

SRI は、通信に悪意のあるコードを注入しようとする攻撃者から、侵害されたネットワーク（公共 Wi-Fi など）上のユーザーを保護します。

4. SRI エラーのトラブルシューティング

リソースの読み込みに失敗した場合、コンソールに次のようなエラーメッセージが表示されることがあります。 None of the "integrity" hashes in the "integrity" attribute match the content of the subresource.（"integrity" 属性のどの整合性ハッシュもサブリソースの内容と一致しません。）

主な原因:

  • ハッシュの誤り: ハッシュを生成する際に、異なるバージョンのファイルを使用した。
  • crossorigin 属性の欠如: オリジンをまたぐリソースに対して SRI を機能させるには、crossorigin="anonymous" 属性が必須です。
  • CDN による圧縮: 一部の CDN では、ファイルの内容を動的に変更（ミニファイやオンザフライの圧縮など）する場合があり、それによってハッシュが変わってしまいます。ブラウザが受信するものと全く同じものをハッシュ化しているか確認してください。

SRI ベストプラクティスのまとめ

アクション 理由
SHA-384 を使用する 速度とセキュリティのバランスが取れた業界標準。
常に crossorigin を追加する クロスサイト SRI 検証に必要。
サードパーティスクリプトを監査する 信頼できる提供元のスクリプトに対してのみ SRI を使用する。
ハッシュ生成を自動化する 手入力によるミスを防ぐために SRI 計算機を使用する。

結論

サブリソース整合性は、Web アプリケーションのセキュリティを劇的に向上させる、強力で低負荷な方法です。デプロイプロセスの一部として SRI ハッシュ計算機 を使用することで、現代の Web における最も一般的な攻撃ベクターの一つからサイトとユーザーを守ることができます。

FAQ: よくある質問

Q: 自社の内部スクリプトに SRI を使用できますか？

A: はい。サードパーティ製スクリプトほど重要ではありませんが、ビルドプロセス中の整合性チェックとして役立ちます。

Q: CDN がスクリプトのバージョンを更新したらどうなりますか？

A: ファイルの内容が（たとえ 1 文字でも）変われば、ハッシュも変わります。スクリプトのバージョンを更新するたびに、integrity 属性も更新する必要があります。

Q: SRI はページの読み込みを遅くしますか？

A: パフォーマンスへの影響は無視できるほど小さいです。現代のブラウザは、スクリプトの処理と並行して非常に高速にハッシュを計算します。

ブログに戻る