CDNのリソースを使う時はSRIを利用したほうが良い

HTML+CSS

CDNのSRIは、リソース(CDN上のデータのこと)の改ざんを検証するためのものです。
もし利用できるなら、利用したほうがセキュリティ上は安全でしょう。

CDNとは

CDN (Content Delivery Network)は、CSSやJavaScriptなどを外部サーバーから読込む仕組み。

有名なjQueryBootstrap、以前記事で取り上げたChart.jsもCDNでライブラリを提供しています。

フリーのCDNプロバイダーにはjsDelivr、cdnjsがあります。

jQueryならGoogle Hosted Libraries、Microsftも提供しています(上記、jQueryサイト参照)。
さくらインターネットなど、CDNサイトを有償で提供してるプロバイダもあります。

CDNを使うメリット

オリジンサーバー(自分のサーバーのこと)とは別の場所にサイトの一部を配置するので、負荷分散が可能であること。

デメリット

デメリットもなくはありません。

障害ポイントが増えること(CDNサーバーがダウンすると自サイトが使えなくなる)、アクセスログが取得できないこと(必要なければ問題ない)、はデメリットです。

また、適切に使用しないと、改ざんされたスクリプトを実行していまうリスクもあります。DNSキャッシュポイズニング(DNSキャッシュ汚染とも)があった場合も、不正なスクリプトが実行されるリスクがあります(後で詳述)。

CDNの利態によっては、オリジンサーバーとCDNのキャッシュサーバーを同期させ、ブラウザからのアクセスを分散するものがあります。この形態の場合、オリジンサーバーに新しいデータがあっても、キャッシュサーバーのデータが有効期間内だと古いデータをブラウザに渡してしまう、などのデメリットもあるようです。
(ただ、jQuery、BootstrapなどのライブラリをCDNで使う場合、この辺りの心配はあまりしなくていいでしょう)

CDNの何が問題か

CDNプロバイダーのスクリプトが改ざんされてしまった場合、不正なコードを実行させられてしまうというリスクがあります。

ちなみに、DNSキャッシュポインズニング攻撃を受けて、不正サイトのスクリプトを実行してしまう場合も同様ですね。

DNSキャッシュポイズニングについては以下で説明。

上記を防止するのが次に説明するSRIです。

SRIとは

SRI(SubResource Integrity)は、スクリプト改ざんをブラウザーが検証するための機能です。
具体的には、JavaScriptやCSSを参照する際、<script>等の属性として以下の2つを付与します。

integrity属性

リソース(CDN上のデータ)のハッシュ値が値に設定されます。
ファイルが異なればハッシュ値は変わってしまうので、スクリプトが改ざんを検知します。
現在利用可能なハッシュアルゴリズムはsha256, sha384, sha512ですが、数値が大きくなるほど強度が増しますが、いずれも強度的には問題ないとされているので(現段階では)、問題はないでしょう。

crossorigin属性

CORS (Cross-Origin Resource Sharing)で使用されるものです。
異なるオリジンのリソースを利用する際のアクセス権に関するものですが、クライアント側で一方的に指定できるものではないので、jQueryなどを利用する場合はデフォルトの「crossorigin=”anonymous”」で問題ありません。

要するに、SRIを施したほうがセキュリティ面で良い、ということになります。

参考資料