サブリソース完全性（SRI）対応について知りたい | サポートサイト

概要

サブリソース完全性（Subresource Integrity / 以下SRI）とは、
外部から読み込むJSファイルやCSSファイルなどのサブリソースが改ざんされていないことを、
ブラウザで検証する仕組みです。

サブリソースをCDN（Content Delivery Network / コンテンツ配信ネットワーク）などから読み込む際、
そのファイルがいつ変更されるかわからないため脆弱性や攻撃のリスクが存在しますが、
読み込むファイルにハッシュ値を付与することで、配信元が改ざんされてもファイルが実行されないよう検知することができます。

近年の脆弱性診断では、外部リソースを利用している場合にSRIの未対応を指摘されるケースが増えています。
本ページでは店舗様でできる本システムのSRI対応について、ご説明します。

SRI対応手順

1.対象となる外部リソースを確認する

店舗様のサイト上で、外部リソースとして読み込んでいるJSファイルやCSSファイルを洗い出してください。

2.ハッシュ値（integrity）を生成する

外部リソースに付与するハッシュ値を生成してください。
ハッシュ値は、外部リソースとして読み込んでいるJSファイルやCSSファイルすべてに対して、それぞれ一意となるハッシュ値が必要です。

ハッシュ値は、以下のいずれかの方法で生成できます。

a.SRIハッシュジェネレーター（SRI Hash Generatorなど）を使用する

SRIハッシュジェネレーターを使用して、CDNのURLに付与するハッシュ値を生成します。

※ハッシュ化アルゴリズムは「SHA512」を推奨しています。
※CORS（Cross-Origin Resource Sharing / オリジン間リソース共有）をCDN側で許可している必要があります。

b.OpenSSLをインストールし、コマンドプロンプトで生成する

※以下はwindowsでの操作手順です。

b-1.コマンドプロンプトを使用して、以下のコマンドを実行してください。

openssl version

b-2.ハッシュ化したいJSファイルが存在する階層まで移動させます。
例：

cd c:\Users\username\Documents\

b-3.以下のコマンドを実行します。

openssl dgst -sha512 -binary sample.js | openssl base64

b-4.コマンド画面に表示されたハッシュ値をコピーします。

3.外部リソースを読み込んでいるテンプレートファイルに、ハッシュ値を記述する

テンプレートファイル内の、ハッシュ化したJSファイルやCSSファイルの記述にある<script>タグや<link>タグなどへ、ハッシュ値を記述します。
例：

<script src="https://example.com/samle.js" integrity="sha512-出力されたハッシュ値" crossorigin="anonymous"></script>

4.記述したハッシュ値を確認する

SRIが正しく設定されている場合は、ブラウザ側で外部リソースの整合性を自動で検証します。
ブラウザの開発者ツールを使用し、以下2点をご確認ください。

1.生成したハッシュ値を記述した箇所にエラーが出ていないこと
2.生成したハッシュ値と違う値を記述した場合にエラーがでること