はい、承知いたしました！HTTP/1.1のRefererヘッダーとプライバシーリスクについて、インフラやネットワークの初心者の方にも分かりやすく、かつ実践的な情報をお届けできるよう、親しみやすいブログ記事を作成します。パケットの旅を郵便配達に例え、現場の知見を交えながら、丁寧に紐解いていきましょう！
—
Webサイトを渡り歩く「あの情報」の正体と、こっそり隠す方法 ～HTTP/1.1のRefererヘッダーとプライバシー～
皆さん、こんにちは！Webの広大な世界を日々駆け巡るネットワークの旅へようこそ。今日は、皆さんが普段何気なくクリックしているリンクの裏側で、実はひっそりとやり取りされている、ちょっと面白いけど、プライバシーに関わるお話をお届けします。
突然ですが、あなたは「どこから来たの？」と聞かれたら、どう答えますか？
Webサイトを見ている時、私たちは無意識のうちに色々なページを渡り歩いていますよね。例えば、あるブログ記事で紹介されていた商品が気になって、その商品ページへクリック。さらに、その商品のレビューサイトへ…というように、まるで迷路のようにWebの世界を探索していきます。
この時、あなたが「今いるページ」にたどり着くまでに、「どこから来たのか」という情報が、実はWebサイト側に伝えられているのをご存知でしたか？
郵便配達員さんもビックリ！？「Referer」ヘッダーの正体
この「どこから来たか」という情報を運んでくれるのが、今回のお話の主役、HTTPの「Referer」ヘッダーなんです。
「え、Referer？スペルが違うのでは？」と思ったあなた、鋭い！実は、HTTPの仕様上、この「Referer」は「Referrer」と、Rが一つ多いスペルで書かれるのが正しいんです。これは、歴史的な経緯でそうなってしまった、ちょっとした「お茶目なミス」なんですよ。でも、Webの世界ではこれが正式名称。面白いですよね！
さて、このRefererヘッダー、一体どんな仕組みで動いているのでしょうか？
皆さんが普段使っている「郵便配達」に例えてみましょう。
1. あなたが手紙（Webページ）を出す（クリックする）
あなたが、あるWebサイト（例えば、友達のブログ）を見ていて、「この紹介されている商品、気になる！」と思って、その商品のオンラインストアへのリンクをクリックしたとします。
2. 配達員さん（ブラウザ）が、宛先（商品ストア）へ荷物（リクエスト）を運ぶ
あなたの代わりに、あなたのパソコンやスマートフォンの中にある「ブラウザ」（ChromeやSafariなど）という配達員さんが、商品のオンラインストア（宛先）へ「この商品を見たい！」というリクエスト（荷物）を運びます。
3. 「おや？この荷物はどこから来たんだっけ？」と配達員さんがメモする
ここがRefererヘッダーの出番です！ブラウザは、あなたが「どのWebサイト（友達のブログ）から、この商品のストアのリンクをクリックしたのか」という情報（つまり、友達のブログのURL）を、リクエストの荷物の中にそっとメモしておきます。
4. 宛先（商品ストア）は、メモを見て「ああ、○○さん（友達のブログ）からのお客様だな」と分かる
商品のオンラインストアは、届いた荷物（リクエスト）に付いているメモ（Refererヘッダー）を見て、「あ、このお客様は、○○さんのブログ経由で来てくれたんだな」と、あなたがどこから来たのかを知ることができます。
このように、Refererヘッダーは、Webサイトが「どんな経由で訪問者が来るか」を知るための、とっても便利な情報源となっているんです。例えば、
- 「このブログ記事から、うちの商品ページへのアクセスが多いな。よし、この記事をもっと宣伝しよう！」
- 「SNSのリンクから、こんなにたくさんのお客さんが来てくれたんだ！」
といった分析に役立てることができます。
「どこから来たか」が、実はプライバシーの窓に？
さて、このRefererヘッダー、便利な反面、ちょっとしたプライバシーのリスクもはらんでいます。
もしあなたが、「ちょっと秘密にしたい情報」を見ているページ（例えば、健康に関する情報サイトの特定のページや、個人の日記のようなページ）から、別のサイトへリンクをクリックしたと想像してみてください。
その時、Refererヘッダーには、あなたが「秘密にしたい情報を見ているページ」のURLが、そのまま伝えられてしまうのです。
これは、あたかもあなたが「○○さん（友達のブログ）からの紹介で来ました」と、自宅の玄関で配達員さんに名乗るだけでなく、「実は、△△さんの秘密の日記を見ていたんですが、そこから来ました」と、「今見ていた秘密のページ」まで伝えてしまうようなものです。
これでは、訪問先のWebサイトは、あなたがどんなプライベートな情報を見ているページから来たのかまで知れてしまうことになります。これは、ちょっと心配ですよね。
プライバシーを守るための「Referrer-Policy」という盾
そこで、Webの世界では、このRefererヘッダーが伝える情報の範囲を、もっと細かくコントロールできるようにするための仕組みが導入されました。それが、「Referrer-Policy」というものです。
これは、Webサイトの管理者さんが「どこまでRefererヘッダーの情報を伝えるか」を設定できる、いわば「プライバシー設定の盾」のようなものです。
Referrer-Policyには、いくつか種類があるのですが、代表的なものをいくつか見てみましょう。
1. `no-referrer`：一切伝えない！究極のプライバシー保護
これは、「Refererヘッダーなんて、一切送りません！」という設定です。あなたがどこから来たのか、訪問先のサイトは一切知ることができません。
【どんな時に使う？】
機密性の高い情報（個人情報、医療情報など）を扱っているページや、ユーザーのプライバシーを最優先したい場合に設定します。
【設定例】
WebサイトのHTMLの`
2. `origin`：ドメイン名だけを伝える（安全で一般的）
これは、「どのWebサイトから来たか」という情報のうち、「ドメイン名」（例：`example.com`）だけを伝える設定です。具体的なページURLまでは伝えないので、プライバシーを守りつつ、どのサイトからの流入かを把握するのに役立ちます。
【どんな時に使う？】
ほとんどのWebサイトで、プライバシーと分析のバランスを取るために推奨される設定です。
【設定例】
HTMLの`
3. `strict-origin-when-cross-origin`：安全な通信時のみ、ドメイン名を伝える
これは、少し複雑ですが、安全な通信（HTTPSからHTTPSへの遷移）の時だけ、ドメイン名を伝えます。それ以外の通信（例えば、HTTPSからHTTPへの遷移など、安全ではない通信）の時には、Refererヘッダーを送信しません。
【どんな時に使う？】
HTTPS通信を基本とする現代では、この設定がデフォルトで採用されることも多く、安全性を重視しつつ、ある程度の流入元分析を可能にします。
【設定例】
HTMLの`
4. `unsafe-url`：全部伝えます！（注意！）
これは、Refererヘッダーの情報を「すべて」送ってしまう設定です。もしあなたが、機密性の高いページから、この設定がされているサイトへリンクをクリックすると、その機密性の高いページのURLまで、すべて送られてしまいます！
【どんな時に使う？】
基本的には、使用すべきではありません。どうしても必要な場合以外は、避けるべき設定です。
【設定例】
HTMLの`
実際のWebサイトではどうなっているの？
皆さんが普段見ているWebサイトのほとんどは、これらのReferrer-Policyの設定を、HTMLの`
`タグの中に記述しています。例えば、あなたがGoogleで何かを検索して、あるサイトにアクセスしたとします。この時、GoogleからそのサイトへのRefererヘッダーには、通常、「Googleで検索したキーワード」という情報が付いてくることがあります。
しかし、もしそのサイトが`no-referrer`や`origin`といったReferrer-Policyを設定していると、検索キーワードまでは伝わらず、「Googleから来た」ということだけが分かったり、あるいは全く情報が伝わらなかったりするのです。
まとめ：Refererヘッダーと、賢く付き合うために
今日は、Webサイトを渡り歩く際に、あなたの「どこから来たか」という情報を運ぶRefererヘッダーと、それにまつわるプライバシーリスク、そしてそれを守るためのReferrer-Policyについてお話ししました。
- Refererヘッダーは、Webサイトが訪問者の流入元を知るための便利な機能。
- しかし、プライベートなページからの遷移情報が意図せず伝わるリスクがある。
- Referrer-Policyを設定することで、どこまで情報を伝えるかをコントロールできる。
- `no-referrer`や`origin`といった設定で、プライバシーを守りつつ、Webサイトの運営に役立てることができる。
皆さんも、もしWebサイトを開発する機会があれば、ぜひReferrer-Policyの設定を検討してみてください。ユーザーのプライバシーを尊重することは、信頼されるWebサイト作りの第一歩です。
これからも、Webの奥深い世界を、一つずつ紐解いていきましょう！次回の記事もお楽しみに！
コメント