【HTML Living Standard】referrer属性値の使い方
referrer属性値の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
referrer定数は、ウェブブラウザがユーザーをあるウェブページから別のウェブページへ誘導した際に、その参照元（リファラー）に関する情報やその取り扱い方針を指定するためのキーワードを表す定数です。具体的には、HTMLの<meta>要素のname属性にreferrerという値を設定することで、そのドキュメント全体のリファラーポリシーを定義するために用いられます。
この設定は、プライバシーやセキュリティの観点から非常に重要です。例えば、ウェブサイトが外部のリソース（画像、スタイルシート、スクリプトなど）を読み込んだり、リンク先のページにユーザーを遷移させたりする際に、自身のURLが参照元情報として送信されることがあります。referrer定数に関連するポリシーを設定することで、この参照元情報を完全に送信しない、あるいはドメイン名のみに限定するなど、情報の送信範囲を細かく制御することが可能になります。これにより、ユーザーのプライバシー保護を強化し、意図しない情報漏洩を防ぐことができます。特定の要素に対して個別にリファラーポリシーを設定する場合は、referrerpolicy属性が利用されますが、<meta name="referrer">はページ全体のデフォルトとして機能します。
構文(syntax)
1<a href="https://example.com/target-page" referrer="no-referrer">リンク</a>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML Referrer Policy によるリファラー送信制御
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Referrer Policy Sample</title> 7</head> 8<body> 9 <h1>リファラーポリシーのサンプル</h1> 10 11 <p> 12 以下のリンクをクリックすると、ブラウザがリンク先のウェブサイトに送る「どこから来たか」という情報（リファラー情報）がどのように制御されるかを示します。<br> 13 開発者ツールのネットワークタブで、リクエストヘッダーの 'Referer' の値を確認すると、その動作を理解できます。 14 </p> 15 16 <!-- no-referrer: リンク先のサイトにリファラー情報を一切送信しません。最もプライバシー保護の高い設定です。 --> 17 <p> 18 <a href="https://example.com/target1.html" referrerpolicy="no-referrer"> 19 リファラーなし (no-referrer) 20 </a> 21 </p> 22 23 <!-- same-origin: 同じオリジン（ドメイン、プロトコル、ポートが同じ）へのリクエストにのみリファラー情報を送信します。 --> 24 <p> 25 <a href="https://example.com/target2.html" referrerpolicy="same-origin"> 26 同一オリジンのみ (same-origin) 27 </a> 28 </p> 29 30 <!-- origin-when-cross-origin: クロスオリジン（異なるオリジン）へのリクエストにはオリジン情報のみ（例: https://example.com/）を送信し、同一オリジンへのリクエストには完全なURLを送信します。 --> 31 <p> 32 <a href="https://example.com/target3.html" referrerpolicy="origin-when-cross-origin"> 33 クロスオリジンでオリジンのみ (origin-when-cross-origin) 34 </a> 35 </p> 36 37 <!-- strict-origin-when-cross-origin: origin-when-cross-origin と似ていますが、HTTPSからHTTPへのダウングレード時にオリジン情報を送信しません。より厳格なセキュリティポリシーです。 --> 38 <p> 39 <a href="https://example.com/target4.html" referrerpolicy="strict-origin-when-cross-origin"> 40 厳格なオリジン制御 (strict-origin-when-cross-origin) 41 </a> 42 </p> 43 44 <!-- デフォルト: 一般的には no-referrer-when-downgrade が適用されます。HTTPSからHTTPへの遷移時以外は完全なURLを送信します。 --> 45 <p> 46 <a href="https://example.com/target5.html"> 47 デフォルトのリファラーポリシー 48 </a> 49 </p> 50</body> 51</html>
HTMLのreferrerpolicy属性は、ウェブページ上のリンク（<a>タグ）から他のページへ移動する際に、ブラウザがリンク先のウェブサイトに送信する「リファラー情報」の取り扱い方を制御するために使用されます。リファラー情報とは、ユーザーがどのページから来たのかを示す情報で、ウェブサイト側はこれを分析することでユーザーの行動を把握することができますが、ユーザーのプライバシーに関わるため適切な管理が求められます。
この属性は、引数や戻り値を持たず、指定する値によってリファラー情報の送信ルールを定義します。例えば、「no-referrer」を指定すると、リンク先へリファラー情報を一切送信せず、最もプライバシーを保護します。「same-origin」では、同じドメイン内のサイトへのアクセスにのみリファラー情報を送信します。「origin-when-cross-origin」は、異なるドメインのサイトへはドメイン情報のみを、同じドメインへは完全なURLを送信します。「strict-origin-when-cross-origin」は、origin-when-cross-originに加えて、HTTPSからHTTPへの安全性の低い遷移ではリファラー情報を送信しない、より厳格なポリシーです。
referrerpolicy属性を指定しない場合、ブラウザのデフォルト設定（一般的にはno-referrer-when-downgradeなど）が適用され、HTTPSからHTTPへの遷移時以外は完全なURLが送信されることが多いです。これらのリファラー情報の具体的な送信状況は、ブラウザの開発者ツールのネットワークタブで、リクエストヘッダーのRefererの値を確認することで検証できます。
HTMLのreferrerpolicy属性は、リンク先へ送信される「どこから来たか」を示すリファラー情報を制御し、ユーザーのプライバシー保護とウェブサイトのセキュリティを確保するために非常に重要です。サンプルコードに示されている各ポリシー、例えばno-referrerはリファラー情報を一切送らず最も安全ですが、origin-when-cross-originなどは特定の条件下で情報を送ります。URLに機密情報が含まれる場合や、異なるドメインへのリンクを配置する際は、意図しない情報漏洩を防ぐため、各ポリシーの動作を正確に理解し、目的に応じた適切な設定を明示的に行うことが不可欠です。設定後は、必ずブラウザの開発者ツールでネットワークリクエストヘッダーのRefererの値を確認し、期待通りの動作になっているかを検証してください。
HTML Referrer Policy を設定する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML Referrer Policy サンプル</title> 7 8 <!-- 9 <meta name="referrer" content="..."> タグを使用して、ドキュメント全体のReferrer Policyを設定します。 10 これは、ページ内のすべてのリクエスト（リンク、画像、スクリプトなど）にデフォルトで適用されます。 11 以下の例では「no-referrer」を設定しており、このページから行われる全てのリクエストでリファラー情報を一切送信しないことを意味します。 12 --> 13 <meta name="referrer" content="no-referrer"> 14 15</head> 16<body> 17 18 <h1>Referrer Policy の設定例</h1> 19 20 <p>このページでは、ブラウザがリンクを辿る際に送信する「リファラー情報」（どのページから来たかを示す情報）を制御する方法を示します。</p> 21 22 <!-- 23 <a> タグの referrerpolicy 属性を使用して、特定のリンクのリファラーポリシーを設定します。 24 この属性が指定された場合、<meta> タグによる全体設定よりも優先されます。 25 ここでは「origin」ポリシーを使用しており、スキーム（http/https）、ホスト名、ポート番号のみをリファラーとして送信します。 26 --> 27 <p> 28 <a href="https://www.example.com/target-page" referrerpolicy="origin"> 29 例1: origin ポリシーで example.com へ 30 </a> 31 <span> - スキーム、ホスト、ポートのみを送信</span> 32 </p> 33 34 <!-- 35 別の例として「no-referrer-when-downgrade」ポリシーを使用します。 36 これはデフォルトの挙動に近く、HTTPSからHTTPのようなセキュリティレベルが下がる場合を除き、完全なURLを送信します。 37 --> 38 <p> 39 <a href="http://www.anothersite.org/destination" referrerpolicy="no-referrer-when-downgrade"> 40 例2: no-referrer-when-downgrade ポリシーで anothersite.org へ 41 </a> 42 <span> - セキュリティレベルが下がらない限り完全なURLを送信</span> 43 </p> 44 45 <p>ブラウザの開発者ツール（ネットワークタブ）で、これらのリンクをクリックしたときのリクエストヘッダーを確認すると、リファラー情報がどのように変化するかを観察できます。</p> 46 47</body> 48</html>
このサンプルコードは、HTMLドキュメントでブラウザが送信する「リファラー情報」（ユーザーがどのページから来たかを示す情報）を制御するリファラーポリシーの設定方法を示しています。
まず、<meta name="referrer" content="no-referrer">タグは、ドキュメント全体に対するリファラーポリシーを設定します。この例ではno-referrerが指定されており、このHTMLページから行われる全てのHTTPリクエスト（リンクのクリック、画像の読み込みなど）において、リファラー情報が一切送信されないことを意味します。この<meta>タグ自体に引数や戻り値はありませんが、content属性にポリシー名を指定することで、ページ全体の挙動を制御します。
次に、<a>タグのreferrerpolicy属性は、特定のリンクに対して個別のリファラーポリシーを設定します。この属性が指定された場合、<meta>タグで設定されたドキュメント全体のポリシーよりも優先されます。
例1では、referrerpolicy="origin"が設定されています。このポリシーでは、リンク先のサイトに対して、リファラーとして現在のページのスキーム（http/https）、ホスト名、ポート番号のみが送信され、完全なURLパスは含まれません。
例2では、referrerpolicy="no-referrer-when-downgrade"が使用されています。これは、デフォルトの挙動に近いポリシーで、HTTPSからHTTPへの遷移のようにセキュリティレベルが下がる場合を除き、完全なURLをリファラーとして送信します。
これらの設定を適切に利用することで、ウェブサイトはユーザーのプライバシー保護やセキュリティ要件に応じて、リファラー情報の送信を細かく制御できます。ブラウザの開発者ツールでネットワークタブを確認すると、実際のリファラーヘッダーがどのように変化しているかを観察できます。
このサンプルコードは、ウェブページからのリクエスト時に送信される「リファラー情報」（どのページから来たかを示す情報）の制御方法を示しています。特に注意すべきは、<meta>タグで設定するページ全体のポリシーと、<a>タグのreferrerpolicy属性で設定する個別ポリシーの優先順位です。個別設定がある場合はそちらが優先されます。no-referrerはリファラー情報を一切送信せず、originはスキーム、ホスト、ポートのみを送信するなど、ポリシーによって送信される情報が大きく異なります。意図しない情報漏洩を防ぐため、各ポリシーがどのような情報を送信するのかを正確に理解し、ブラウザの開発者ツールで実際の挙動を確認することが非常に重要です。これにより、ユーザーのプライバシー保護と、必要な情報連携のバランスを適切に保てます。