勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

  HTML

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/

 - HTML

  関連記事

formでファイルを選択した際にファイル名やサイズ、形式を調べる方法

フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...

ajaxを使わずに非同期っぽくsubmitする

ajaxを使わずに見た目はページ遷移せず、 画像を含めたformをsubmitし ...

フォームの入力内容をjQueryで取得し、本文として設定した上でメーラーを起動させる方法

formで何らかを入力してもらいボタンをクリックするとメーラーが開き、先ほど入力 ...

FileReader APIを用いて画像をアップロードせずにサムネイル表示

以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...

baseタグ

<base>という見かけないタグがあったのでメモ。 相対パスの基準U ...