referrerpolicy属性

referrerpolicy属性とは

あるWebページを参照した後、リンクをクリックして別のページに移動する時、パソコンからサーバにリファラーという情報を送信します。このリファラーは、移動前のWebページの情報を含んでいます。

リファラーは、https://example.com/test/test.html?a=1という形式で送信されます。

https://example.com/

オリジンです。

test/test.html

パス(ディレクトリとファイル名)です。

?a=1

クエリ文字列(名前と値をページに渡す)です。

リファラーは、多くの場合は有用な情報ですが、状況によっては公開したくない情報を含むことがあります。referrerpolicy属性を使うと、リファラーに含める上記の情報を調整することができます。referrerpolicy属性は、a、area、iframe、img、link、script要素で使えます。

referrerpolicy属性で使える値

referrerpolicy属性は、以下の値が使えます。

no-referrer

リファラーを送信しません。

no-referrer-when-downgrade

HTTPS(暗号化された通信)からHTTP(暗号化されていない通信)のページに移動する時は、リファラーを送信しません。それ以外では、すべて送信します。デフォルトの動作です。

origin

オリジンのみ送信します。

origin-when-cross-origin

同じオリジンであれば、すべて送信します。オリジンが違えば、オリジンだけ送信します。

same-origin

同じオリジンの時だけ、すべて送信します。オリジンが違えば、送信しません。

strict-origin

HTTPSからHTTPのページに移動する時は、リファラーを送信しません。それ以外では、オリジンのみ送信します。

strict-origin-when-cross-origin

同じオリジンの時は、すべて送信します。異なるオリジンでHTTPSからHTTPSへの移動であれば、オリジンだけを送信します。HTTPSからHTTPであれば、リファラーは送信しません。

unsafe-url

オリジンに関係なく、すべて送信します。

利用例

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

<a href="https://example.com/text.html" referrerpolicy="no-referrer">テスト</a>

上記により、リファラーが送信されなくなります。

リファラーの違い

以下に、同一オリジン、クロスオリジン、HTTPSからHTTPへ移動した時のリファラーの違いをまとめます。

全部とあるのは、オリジン + パス + クエリ文字列を送信するということです。