Referrer Policy のブラウザ対応状況

通常、リファラーを送信するかしないかはブラウザによって決定されますが、 Referrer Policy を設定することでウェブサイト側で制御することができます。

現在は8つのキーワードが定義されており、これによってリファラーを「送らない」から「常に送る（HTTPS→HTTPを含む）」まで、様々なケースに対応することができます。

• W3Cの仕様
• Referrer-Policy によるリファラ制御 | blog.jxck.io(blog.jxck.io)

2020年7月31日追記Chrome はバージョン 85 でデフォルト値が no-referrer-when-downgrade から strict-origin-when-cross-origin へ変更される予定です。詳細はA new default Referrer-Policy for Chrome: strict-origin-when-cross-origin(developers.google.com) を参照。

2021年2月11日追記Firefox もバージョン 87 でデフォルト値が strict-origin-when-cross-origin へ変更される予定です。1589074 - Set referrer policy default to strict-origin-when-cross-origin(bugzilla.mozilla.org) を参照。

Google は2012年4月から検索結果ページに <meta name="referrer" content="origin"> を採用することで、下記2点の挙動を実現しています。（当時の告知記事(webmasters.googleblog.com) ）

• HTTPS なGoogle検索結果ページから HTTP なサイトへ遷移したときもリファラーが飛ぶようにする。
• リファラーは検索結果ページのURLそのものではなく、 https://www.google.co.jp/ などの origin データのみとすることで、ユーザーが入力した検索キーワードなどの情報は送られないようにする。

サーバーサイドで Referrer-Policy ヘッダを指定する方法です。

• Referrer Policy デモ(labs.w0s.jp)

上記デモサイトの「HTTP header」の各リンク先にて、「referrerpolicy attribute」が (none) のリンク[1]を押下すると、遷移先のサイトでリファラーの値を確認できます。

• Chrome 69 , Firefox 62, iOS Safari 12 は対応済み。
• Edge 18, IE 11 は未対応で、常にHTMLページのURLが送出されます。

以下のように meta 要素に指定することもできます。

<meta name="referrer" content="no-referrer">

現在の仕様では8つの値が定義されていますが、旧ドラフト(wiki.whatwg.org) では never, always, origin, default の4つでした（このうち origin のみ新旧で値が変わっていない）。

2018年10月現在、複数のブラウザが最新の仕様に対応していない状況なので、必要に応じて旧ドラフトの値を採用するケースがあるかもしれません。

• Referrer Policy デモ(labs.w0s.jp)

上記デモサイトの「<meta> element」および「<meta> element (older draft)」の各リンク先にて、「referrerpolicy attribute」が (none) のリンクを押下すると、遷移先のサイトでリファラーの値を確認できます。

• Chrome 69 , Firefox 62, iOS Safari 12 は現在の仕様に対応済み。
• Edge 18 は旧ドラフトで定義された4つの値 never, always, origin, default のみ認識し、現在の仕様には値が同じ origin 以外対応していません（常にHTMLページのURLが送出されます）。
• IE 11 は旧ドラフトで定義された4つの値 never, always, origin, default、および no-referrer を認識します。それ以外の値は対応していません（常にHTMLページのURLが送出されます）。

a要素にreferrerpolicy属性 を記述することで、個々のリンクに固有の状態を設定することができます。

referrerpolicy="" のように空の値を指定することもでき、この場合はReferrer Policy 仕様の「3.9. The empty string」 に書かれているとおり、属性自体を記述しない場合と同じ状態になります。

例えばこんな感じです。

• https://example.com/no-referrer.html の HTML に Referrer-Policy: no-referrer が設定されていて、 <a href="https://example.net/" referrerpolicy="unsafe-url"> のリンクを選択したときは、リファラーは https://example.com/no-referrer.html になる。
• https://example.com/origin.html の HTML に Referrer-Policy: origin が設定されていて、 <a href="https://example.net/" referrerpolicy=""> のリンクを選択したときは、リファラーは https://example.com/ になる。

• Referrer Policy デモ(labs.w0s.jp)

上記デモサイトの各リンク先にて、referrerpolicy属性を設定したリンクを押下すると、遷移先のサイトhttps://www.whatismyreferer.com/でリファラーの値を確認できます。

• Chrome 69 , Firefox 62 は対応済み。
• iOS Safari 12 は未対応で、いずれも属性を記述しないときと同様の結果になります。
• Edge 18, IE 11 は未対応で、常にHTMLページのURLが送出されます。

2019年3月3日追記Safari は Bug 179053 - Consider supporting the `referrerpolicy` attribute.(bugs.webkit.org) で対応が進んでいるっぽい。

• Referrer Policy デモ(labs.w0s.jp)

上記デモページにアクセスし、ブラウザのデベロッパーツールを開くか、Fiddler(www.telerik.com) やOWASP ZAP(www.owasp.org) などのネットワークキャプチャーツールでリクエストヘッダーをチェックします。

このデモページは index.html から8つのCSSファイルを読み込んでいます。それぞれのCSSファイルは Referrer-Policy ヘッダを設定しており、例えば no-referrer.css はサーバーサイドにて Referrer-Policy: no-referrer を付与するようにしています。

CSSファイルの中身は、下記のようにひとつの画像ファイルを読み込んでいるのみです。

.no-referrer {
  background: url(bg_no-referrer.png);
}

CSS ファイルから読み込まれる PNG 画像ファイルのリファラーは、対応ブラウザでは以下の結果になります。

ブラウザごとの対応状況は下記のとおり。

• Chrome 69 は対応済み。
• Firefox 62 は未対応で、いずれもリファラーはCSSファイルのURLになります。2018年12月11日にリリース予定のバージョン64で対応される(blog.mozilla.org) とのことで、現在 Nightly Build では Chrome と同じ結果になることが確認できます。
• iOS Safari 12, Edge 18, IE 11 は未対応で、いずれもリファラーはHTMLページのURLhttps://labs.w0s.jp/http/referrer-policy/ になります。

Fetch API の referrerPolicy プロパティ(fetch.spec.whatwg.org) を使用する例。

• Referrer Policy デモ(labs.w0s.jp)

CSS の例と同じく、上記デモページでリクエストヘッダーをチェックします。デモページから読み込まれる fetch.js ではこんな処理をしています。

fetch('fetch.txt', {
  method: 'HEAD'
}).catch((error) => {
  console.error(error.message);
});

fetch('fetch_.txt', {
  method: 'HEAD',
  referrerPolicy: ''
}).catch((error) => {
  console.error(error.message);
});

fetch('fetch_no-referrer.txt', {
  method: 'HEAD',
  referrerPolicy: 'no-referrer'
}).catch((error) => {
  console.error(error.message);
});

（以下省略）

結果は以下のようになります。

• Firefox 62, Chrome 69, iOS Safari 12 は対応済み。
• Edge 18 は same-origin, origin, strict-origin, strict-origin-when-cross-origin の4つが未対応で、ファイルの読み込みが行われません。上記コードではそれぞれの catch 句へ入ります。
• IE 11 は Fetch API 自体に対応していません。

Referrer-Policy ヘッダ、<meta name="referrer">、<a referrerpolicy>、CSSファイルからのリソース読み込み、Fetch API の5種類を試してみた結果をまとめます。

• Chrome 69 はすべてに対応している。
• Firefox 62 はCSSファイルからのリソース読み込み時、CSSファイルに設定された Referrer-Policy ヘッダを認識しないが、2018年12月11日にリリース予定のバージョン64で対応予定。
• iOS Safari 12 は <a referrerpolicy> やCSSファイルに設定された Referrer-Policy ヘッダを認識しない。Referrer-Policy ヘッダや <meta name="referrer"> でページ全体に適用されたリファラーポリシーは認識される。
• Edge 18, IE 11 は一部機能しか対応しておらず、これらのブラウザでも動作させるなら <meta name="referrer"> で旧ドラフトの値を指定するしかない。