integrity属性

他のサーバにあるJavaScriptやCSSなどを利用する時は、改ざんに気を付ける必要があります。

本ページでは、integrity属性について説明します。

integrity属性とは

JavaScriptやCSSなどは、他のドメインから読み込むことができます。これは、JavaScriptのライブラリなどでよく使われていて、CDN(Content Delivery Network)などを利用して配信されています。

CDNは、世界中のサーバで構成されていることがあり、そこにアップロードしたスクリプトなどを読み込んで利用することができます。その際、integrity属性を使うと、スクリプトなどを読み込む際に改ざんされていないかチェックをすることができます。これを、SRI(Subresource Integrity)と言います。integrity属性は、link、script要素で使えます。

利用例

以下は、integrity属性を使ったscript要素の例です。

【integrity属性を使ったscript要素の例】
<script src="https://example.com/script.js" integrity="sha384-xxxxxxxxxxx" crossorigin="anonymous"></script>

赤字部分にハッシュ関数、青字部分にハッシュ値(ダイジェスト)を指定します。ハッシュ関数とハッシュ値については、次で説明します。

また、crossoriginについては、「crossorigin属性」をご参照ください。

SRIの仕組み

SRIは、ハッシュを使って行われます。

ハッシュとは、元のデータから全く異なる値を計算することです。この計算には、ハッシュ関数が使われます。ハッシュ関数には、SHA-256、SHA-384、SHA-512があります。

また、計算された値はハッシュ値と言います。例えば、test.jpというJavaScriptのファイルがあった時、そのデータからハッシュ値を計算します。

このハッシュ値は、同じデータであれば同じ値になりますが、データが違うと同じ値になる可能性が低くなっています。この特性を利用して、以下の手順でSRIを確認します。

  1. Webページを作る側は、CDNのスクリプト(データ)からツールなどでハッシュ値を計算します。また、利用例のようにintegrity属性で、使ったハッシュ関数とハッシュ値を指定します。
  2. ユーザがブラウザでWebページを開くと、スクリプトをCDNからダウンロードする際に、integrity属性で指定しているハッシュ関数で、データのハッシュ値を計算します。
  3. ブラウザが計算したハッシュ値と、integrity属性で指定しているハッシュ値が同じであれば、改ざんされていないと判断して、スクリプトを実行します。

ブラウザが計算したハッシュ値と、integrity属性で指定しているハッシュ値が異なると、改ざんされていると判断してスクリプトは実行されません。

HTML要素(タグ)一覧」に戻る