referrerpolicy属性 - リンク先にアクセスする時のリファラーポリシー

2017/09/15

a要素のreferrerpolicy属性はリンク先にアクセスする時のリファラーポリシーを指定するための属性です。例えば、SSLから非SSLのページに移動する時だけはリファラーを送らない、などの調整ができます。

概要

要素: a要素
DOM Interface: HTMLAnchorElement.referrerPolicy
仕様書: https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-referrerpolicy

値

リソースにアクセスする際のリファラーポリシーをキーワードで指定する。Referrer Policiesを参考。

no-referrer: いずれの場合もリファラーを送信しない。
no-referrer-when-downgrade: httpsからhttpに移動する時はリファラーを送信しない。ブラウザのデフォルトの挙動。
same-origin: 同一オリジン間の移動時にだけ、リファラーを送信する。
origin: スキーム、ホスト、ポートのみをリファラーに含める。パスは含めない。
strict-origin: httpsからhttpに移動する時はリファラーを送信しない。それ以外では、originと同じ。
origin-when-cross-origin: 同一オリジン間の移動時には、完全なリファラーを送信する。それ以外では、originと同じ。httpからhttpsへのアクセスはドメインが同じでもクロスオリジンとみなされる。
strict-origin-when-cross-origin: httpsからhttpに移動する時はリファラーを送信しない。同一オリジン間の移動時には、完全なリファラーを送信する。それ以外では、originと同じ。httpからhttpsへのアクセスはドメインが同じでもクロスオリジンとみなされる。
unsafe-url: いずれの場合も完全なリファラーを送信する。

	same origin	cross origin	downgrade
no-referrer	送信しない	送信しない	送信しない
no-referrer-when-downgrade	送信する (完全)	送信する (完全)	送信しない
same-origin	送信する (完全)	送信しない	送信しない
origin	送信する (不完全)	送信する (不完全)	送信する (不完全)
strict-origin	送信する (不完全)	送信する (不完全)	送信しない
origin-when-cross-origin	送信する (完全)	送信する (不完全)	送信する (不完全)
strict-origin-when-cross-origin	送信する (完全)	送信する (不完全)	送信しない
unsafe-url	送信する (完全)	送信する (完全)	送信する (完全)

<a href="https://syncer.jp/" referrerpolicy="no-referrer">リンク</a>

説明

referrerpolicy属性の各キーワードをデモと共に紹介していきます。現在のアドレスからリンク先にアクセスして、挙動がどのように変わるか確認して下さい。ブラウザによってはサポートしてないキーワードもあるのでご注意下さい。

no-referrer

no-referrerを指定した場合、単純に、必ずリファラーを送信しません。

<a href="https://syncer.jp/" referrerpolicy="no-referrer">リンク</a>

<!-- このコードは編集できます。 -->

<p>
	<a href="/referrer" referrerpolicy="no-referrer" target="_blank">リンク1</a>
	(https → http / same origin)
</p>

<p>
	<a href="https://syncer.ch/referrer" referrerpolicy="no-referrer" target="_blank">リンク2</a>
	(https → http / cross origin)
</p>

<p>
	<a href="http://syncer.ch/referrer" referrerpolicy="no-referrer" target="_blank">リンク3</a>
	(https → http / downgrade)
</p>

no-referrer-when-downgrade

no-referrer-when-downgradeを指定した場合、httpsからhttpへの移動時にだけ完全なリファラーを送信します。下記では、3のリンクだけリファラーが送信されないでしょう。属性を指定しない場合、ブラウザはこのキーワードを指定したのと同じ働きをします。

<a href="https://syncer.jp/" referrerpolicy="no-referrer-when-downgrade">リンク</a>

<!-- このコードは編集できます。 -->

<p>
	<a href="/referrer" referrerpolicy="no-referrer-when-downgrade" target="_blank">リンク1</a>
	(https → http / same origin)
</p>

<p>
	<a href="https://syncer.ch/referrer" referrerpolicy="no-referrer-when-downgrade" target="_blank">リンク2</a>
	(https → http / cross origin)
</p>

<p>
	<a href="http://syncer.ch/referrer" referrerpolicy="no-referrer-when-downgrade" target="_blank">リンク3</a>
	(https → http / downgrade)
</p>

same-origin

same-originを指定した場合、同じオリジン間の移動時以外はリファラーを送信しません。下記の場合は2と3のリンクだけ、リファラーが送信されないでしょう。このキーワードは2017年10月の時点で新しいため、まだ実装してないブラウザが多いと思います。

<a href="https://syncer.jp/" referrerpolicy="same-origin">リンク</a>

<!-- このコードは編集できます。 -->

<p>
	<a href="/referrer" referrerpolicy="same-origin" target="_blank">リンク1</a>
	(https → http / same origin)
</p>

<p>
	<a href="https://syncer.ch/referrer" referrerpolicy="same-origin" target="_blank">リンク2</a>
	(https → http / cross origin)
</p>

<p>
	<a href="http://syncer.ch/referrer" referrerpolicy="same-origin" target="_blank">リンク3</a>
	(https → http / downgrade)
</p>

origin

originを指定した場合、必ず、不完全なリファラーを送信します。リファラーの内容にはパスが含まれていません。そのため、リンク先ではどのサイトからアクセスしてきたかは分かりますが、どのページからアクセスしてきたかは判定できません。

<a href="https://syncer.jp/" referrerpolicy="origin">リンク</a>

<!-- このコードは編集できます。 -->

<p>
	<a href="/referrer" referrerpolicy="origin" target="_blank">リンク1</a>
	(https → http / same origin)
</p>

<p>
	<a href="https://syncer.ch/referrer" referrerpolicy="origin" target="_blank">リンク2</a>
	(https → http / cross origin)
</p>

<p>
	<a href="http://syncer.ch/referrer" referrerpolicy="origin" target="_blank">リンク3</a>
	(https → http / downgrade)
</p>

strict-origin

strict-originを指定した場合、httpsからhttpの移動時にはリファラーが送信されず、それ以外では不完全なリファラーが送信されます。下記の場合は3のリンクはリファラーが送信されないでしょう。このキーワードは2017年10月の時点で新しいため、まだ実装してないブラウザが多いと思います。

<a href="https://syncer.jp/" referrerpolicy="strict-origin">リンク</a>

<!-- このコードは編集できます。 -->

<p>
	<a href="/referrer" referrerpolicy="strict-origin" target="_blank">リンク1</a>
	(https → http / same origin)
</p>

<p>
	<a href="https://syncer.ch/referrer" referrerpolicy="strict-origin" target="_blank">リンク2</a>
	(https → http / cross origin)
</p>

<p>
	<a href="http://syncer.ch/referrer" referrerpolicy="strict-origin" target="_blank">リンク3</a>
	(https → http / downgrade)
</p>

origin-when-cross-origin

origin-when-cross-originを指定した場合、同一オリジン間の移動時にだけ完全なリファラーが送信されます。それ以外では、不完全なリファラーが送信されます。下記の場合、1と、2、3でリファラーの内容が違うでしょう。

<a href="https://syncer.jp/" referrerpolicy="origin-when-cross-origin">リンク</a>

<!-- このコードは編集できます。 -->

<p>
	<a href="/referrer" referrerpolicy="origin-when-cross-origin" target="_blank">リンク1</a>
	(https → http / same origin)
</p>

<p>
	<a href="https://syncer.ch/referrer" referrerpolicy="origin-when-cross-origin" target="_blank">リンク2</a>
	(https → http / cross origin)
</p>

<p>
	<a href="http://syncer.ch/referrer" referrerpolicy="origin-when-cross-origin" target="_blank">リンク3</a>
	(https → http / downgrade)
</p>

strict-origin-when-cross-origin

strict-origin-when-cross-originを指定した場合、同一オリジン間の移動では完全なリファラーが送信されます。httpsからhttpの移動ではリファラーが送信されません。それ以外では不完全なリファラーが送信されます。下記の場合、1、2、3でそれぞれリファラーの内容が違うでしょう。このキーワードは2017年10月の時点で新しいため、まだ実装してないブラウザが多いと思います。

<a href="https://syncer.jp/" referrerpolicy="strict-origin-when-cross-origin">リンク</a>

<!-- このコードは編集できます。 -->

<p>
	<a href="/referrer" referrerpolicy="strict-origin-when-cross-origin" target="_blank">リンク1</a>
	(https → http / same origin)
</p>

<p>
	<a href="https://syncer.ch/referrer" referrerpolicy="strict-origin-when-cross-origin" target="_blank">リンク2</a>
	(https → http / cross origin)
</p>

<p>
	<a href="http://syncer.ch/referrer" referrerpolicy="strict-origin-when-cross-origin" target="_blank">リンク3</a>
	(https → http / downgrade)
</p>

unsafe-url

unsafe-urlを指定した場合、単純に、必ず完全なリファラーを送信します。

<a href="https://syncer.jp/" referrerpolicy="unsafe-url">リンク</a>

<!-- このコードは編集できます。 -->

<p>
	<a href="/referrer" referrerpolicy="unsafe-url" target="_blank">リンク1</a>
	(https → http / same origin)
</p>

<p>
	<a href="https://syncer.ch/referrer" referrerpolicy="unsafe-url" target="_blank">リンク2</a>
	(https → http / cross origin)
</p>

<p>
	<a href="http://syncer.ch/referrer" referrerpolicy="unsafe-url" target="_blank">リンク3</a>
	(https → http / downgrade)
</p>

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

Features	Chrome	Firefox	Safari	Edge	IE	Opera	iOS Safari	Android
referrerpolicy属性	● 53+	● 50+	×	×	×	● 40+	×	×
no-referrer	● 53+	● 50+	×	×	×	● 40+	×	×
no-referrer-when-downgrade	● 53+	● 50+	×	×	×	● 40+	×	×
same-origin	×	● 52+	×	×	×	×	×	×
origin	● 53+	● 50+	×	×	×	● 40+	×	×
strict-origin	×	● 52+	×	×	×	×	×	×
origin-when-cross-origin	● 53+	● 50+	×	×	×	● 40+	×	×
strict-origin-when-cross-origin	×	● 52+	×	×	×	×	×	×
unsafe-url	● 53+	● 50+	×	×	×	● 40+	×	×