JSやCSSをCDN呼び出しする際のintegrity / crossorigin / referrerpolicy属性について

JavaScriptやCSSをCDN呼び出しする際、<script>や<link>タグにintegrity / crossorigin / referrerpolicyという属性が指定されていることがある。これらの意味が分かっていなかったのでそれぞれ調べた内容をメモ。

integrity属性

リファレンス

https://developer.mozilla.org/ja/docs/Web/Security/Subresource_Integrity

意味

JSやCSSなどを読み込む際にCDN側のソースコードが改ざんされていないかチェックをするというもの。

具体的には呼び出し側のファイルをSHA-512等でハッシュ化させた値をintegrity属性に指定しておき、CDN呼び出し時に当該の値と一致しているかチェックするという流れになる。

その他

integrity属性を適当に書き換えるとどうなるか

integrity属性を適当に書き換えてCDN呼び出しすると以下メッセージがコンソールに出力され、正常に呼び出せない点が確認できる。

integrity 属性内の “sha512” ハッシュが subresource のコンテンツと一致しません。計算されたハッシュ値は “xxxxxxxxxxxxxxxxxxxxxxxxxxx” です。

ファイルをハッシュ化させたい場合

あまり無いとは思うが自作のファイルをハッシュ化させたい場合はこちらのサイトが便利。

crossorigin属性

リファレンス

https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/crossorigin

意味

CORS(Cross Origin Resource Sharing)に関する設定となる。CDNだと大抵「anonymous」が指定されており、この場合は同一オリジンでない限りCookie、クライアントサイドTLS 証明書、HTTP認証によるユーザー資格情報の交換は行われないとのこと。

referrerpolicy属性

リファレンス

https://developer.mozilla.org/ja/docs/Web/API/HTMLAnchorElement/referrerPolicy

意味

リソースの取得時に送信されるリファラの設定となる。CDNだと大抵「no-referrer」が指定されており、この場合はファイル呼び出し時にリファラが送信されないという意味になる。

所感

今までintegrity / crossorigin / referrerpolicy属性に関して見た目的に好きじゃなかったので省略していたが、integrity属性についてはセキュリティ面を考慮すると設定しておいた方が良さそう。

参考サイト

https://blog.kazu69.net/2015/10/01/check-for-subresource-integrity/