Referrer Policy のブラウザ対応状況

公開日:

Referrer Policy に対応したブラウザが増えてきましたが、ブラウザによって機能ごとの対応状況が異なるので調べてみました。確認した環境は以下の5つです。

  • Windows 10 + Chrome 69
  • Windows 10 + Firefox 62
  • Windows 10 + Edge 18
  • Windows 10 + Internet Explorer 11
  • iOS Safari 12

Referrer Policy とは

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

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

キーワード挙動
no-referrer送らない
no-referrer-when-downgrade(デフォルト)HTTPS→HTTPの時を除き、完全なURLを送る
same-originsame-origin request 時のみ完全なURLを送る
origin常に origin データのみを送る(HTTPS→HTTPを含む)
strict-originHTTPS→HTTPの時を除き、 origin データのみを送る
origin-when-cross-originsame-origin request 時は完全なURLを、 cross-origin request 時は origin データのみを送る
strict-origin-when-cross-originHTTPS→HTTPの時を除き、 same-origin request 時は完全なURLを、 cross-origin request 時は origin データのみを送る
unsafe-url常に送る(HTTPS→HTTPを含む)

実用例

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 ヘッダを指定する方法です。

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

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

<meta name="referrer">

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

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

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

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

上記デモサイトの「<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>

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

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

例えばこんな感じです。

  • 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/ になる。

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

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

CSSファイルからのリソース読み込み

上記デモページにアクセスし、ブラウザのデベロッパーツールを開くか、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 の Referrer-Policy ヘッダ画像ファイルのリファラー
no-referrerリファラーなし
no-referrer-when-downgradeCSSファイルのURL
same-originCSSファイルのURL
originhttps://labs.w0s.jp/
strict-originhttps://labs.w0s.jp/
origin-when-cross-originCSSファイルのURL
strict-origin-when-cross-originCSSファイルのURL
unsafe-urlCSSファイルのURL

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

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

Fetch API

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

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);
});

(以下省略)

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

referrerPolicy 指定テキストファイルのリファラー
未指定HTMLページのURL
referrerPolicy: ''HTMLページのURL
referrerPolicy: 'no-referrer'リファラーなし
referrerPolicy: 'no-referrer-when-downgrade'HTMLページのURL
referrerPolicy: 'same-origin'HTMLページのURL
referrerPolicy: 'origin'https://labs.w0s.jp/
referrerPolicy: 'strict-origin'https://labs.w0s.jp/
referrerPolicy: 'origin-when-cross-origin'HTMLページのURL
referrerPolicy: 'strict-origin-when-cross-origin'HTMLページのURL
referrerPolicy: 'unsafe-url'HTMLページのURL
  • 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"> で旧ドラフトの値を指定するしかない。
  • [1]referrerpolicy属性が指定されていない、単純な <a href=""> のみのリンク