セキュリティの
学び場

そもそもサブリソースとは何なのか

今皆さんがご覧いただいているこのページを始め、多くのWebサイトは複数の要素（リソース）によって構成されています。

その中でサブリソースは、主要なリソース（メインリソース、通常はHTML）から独立して読み込まれる追加のリソースを指します。これらサブリソースを用いることは、Webサイトのパフォーマンスを向上させる、コードの再利用性を向上させる、といった利点があることから、開発プロセスにも大きな影響があります。

サブリソースには、一般的に以下のような種類が含まれます。

• ・スタイルシート（CSS）
• ・スクリプト（JavaScript）
• ・画像およびメディアファイル（画像、ビデオ、音声ファイルなど）
• ・フォントファイル　など

サブリソースは多くの場合、CDN（Contents Delivery Network）を始めとした外部環境から外部リソースとして読み込まれます。
この際、外部リソースを差し替えられたり、改竄された際に不要、または不正なリソース読み込まないよう、適切にサブリソースを管理することが必要になります。

そこで注目されるセキュリティ対策がサブリソース完全性（Subresource Integrity、SRI）です。

※CDNについては【縁の下の力持ち『CDN』その仕組みとは？】でも解説しています。

CDNのサブリソース改竄による影響

例えば、CDNにセキュリティ侵害があり、読み込み元のサブリソースが改竄されてしまった場合の影響を考えてみましょう。

CDNにある読み込み元のサブリソースが改竄された場合、以下のような影響が考えられます。

• ・ページを表示した際に不正なJavascriptが実行される
• ・ページ内で意図しない挙動や操作を強制される
• ・ページの表示を異なるデザインに改竄されてしまう

これらは、メインリソースであるWebサイトそのものへのセキュリティ侵害ではないにもかかわらず発生する恐れがあります。

ここで有効な対策がサブリソース完全性です。
サブリソース完全性を用いることで、読み込むサブリソースのファイルの整合性を確認することができるため、CDNなどの外部リソースが改竄された場合に発生するセキュリティ上の問題から保護され、Webサイトの信頼性を確保することができます。

次の章で具体的な仕組みと実装方法を見てみましょう。

サブリソース完全性の仕組みと実装方法

サブリソース完全性を実装するには、外部リソースを読み込むHTML要素に「integrity」属性を追加する必要があります。この属性には、リソースの整合性を確認するためのハッシュ値が含まれます。

手作業による設定手順は以下のようになります。

参考情報: W3C サブリソース完全性

1. 1. 外部リソースのハッシュ値を生成
   外部リソース（例: CDNから提供されるJavaScriptファイル）のハッシュ値を計算します。これはハッシュ関数（SHA-256など）を使用して行います。計算されたハッシュ値はBase64形式で表記します。

2. 2. HTML要素に「integrity」属性を追加
   リソースを読み込むHTML要素に「integrity」属性を追加し、ハッシュ値を指定します。
   

   ```
   <script src="https://example.com/cdn/script.js" integrity="sha256-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>
   ```

3. 3. リソースの読み込み
   Webサイトにアクセスしたブラウザはリソースをダウンロードし、ハッシュ値を計算して指定された値と照合します。値が整合した場合、正当なリソースであると判断し、リソースは正常に読み込まれます。値が異なる場合、リソースが変更されたと判断し、リソースの読み込みを中止します。

■ 注意
サブリソース完全性を利用する場合、対象リソースのバージョン管理規則に注意ください。一般的なCDN上のリソースはバージョン管理により、リリース後のハッシュ値は固定のため、問題ありません。一方で、適切にバージョン管理されず、当該URLの外部リソースが変更される場合にはハッシュ値が変動し、サブリソース完全性によりリソース読み込みに失敗するため、注意が必要です。

まとめ

このように、Webサイトにおいてサブリソースを使用することは多くの利点を享受することができます。

しかし一方で、サブリソースを外部リソースから読み込むことが一般的であり、CDNなどの外部リソース読み込み元にセキュリティ侵害があった場合に、改竄された不正なリソースを読み込んでしまうことによるWebサイトへのセキュリティ上の懸念があります。

サブリソース完全性を用いることは、CDN改竄対策から保護するための効果的な手段です。セキュリティを向上するために、サブリソース完全性を含めたサブリソースの適切な管理を検討しましょう。