1.はじめに
仕事で「Referer（リファラ）」という言葉を初めて目にしたので、気になって調べてみました。
もしかしたら、皆さんもWebの開発や学習の中で見たことがあるかもしれません。
実はこのRefererヘッダ、「どこから来たか（リンク元）」を教えてくれる便利な仕組みです。
しかし一方で、使い方を間違えると情報漏洩の原因にもなるので注意が必要です。
2.Refererヘッダとは？
Referer（リファラ）ヘッダは、「このページに来る直前にいたページのURL」を送るHTTPヘッダです。
例を交えて説明👇
GET /check HTTP/1.1
Referer: http://localhost:3000/
この例では、http://localhost:3000/ から遷移してきたことが分かります。
3 セキュリティに役立つ場合
Refererは、正しい画面遷移を確認するときに役立ちます。
例えば、フォーム送信などで「正しいページからのリクエストか」をチェックすることで、
CSRF攻撃（不正な画面遷移）を防ぐ一助になります。
ただし、Refererはユーザー側で改ざん可能なので、完全な防御策にはなりません。
4 セキュリティ上の問題になる場合
Refererヘッダには「リンク元のURL」がそのまま入ります。
もしそのURLに秘密情報（例：セッションID、トークンなど）が含まれていたら危険です。
例：
https://myapp.com/reset?token=abcd1234
このURLから外部サイトへリンクすると…
Referer: https://myapp.com/reset?token=abcd1234
→ 外部サイトに「トークン付きURL」が送られてしまい、
誰かに悪用される可能性があります。
5 実際にRefererを見ます！
実際にNode.js (Express) を使って、ブラウザが送るRefererを確認してみました。
server,js
const express = require('express');
const app = express();
const port = 3000;
// 静的ファイル
app.use(express.static('public'));
// 受け取ったリクエスト情報を確認するAPI
app.get('/check', (req, res) => {
console.log('Request Headers:', req.get("referer"));
res.send(`
<h1>Referer ヘッダの確認</h1>
<p>サーバーが受け取った Referer: <strong>${req.get("referer") || "(なし)"}</strong></p>
<a href="/">トップに戻る</a>
`);
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
public/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Referer実験</title>
</head>
<body>
<h1>Refererヘッダ実験ページ</h1>
<p>以下のリンクをクリックすると、Refererヘッダがサーバーに送られます。</p>
<a href="/check" rel="referrer">同一サイト内リンク(referrer)</a><br />
<a href="/check" rel="noreferrer">同一サイト内リンク(noreferrer)</a><br />
</body>
</html>
実行結果
”同一サイト内リンク(referrer)”をクリックすると
"同一サイト内リンク(noreferrer)"をクリックすると
rel="noreferrer" をつけるだけで、Referer情報が送られなくなることが分かります。
6.まとめ
- Refererヘッダは「どこから来たか」を知らせるヘッダ
- 正しく使えば便利（アクセス分析・CSRF対策など）
- ただし秘密情報をURLに入れると漏洩リスクがある
ここまで読んでいただき、ありがとうございました！🙌
この記事が「Refererってそういうものか！」と思ってもらえるきっかけになれば嬉しいです。
参考文献
- 徳丸浩『体系的に学ぶ 安全なWebアプリケーションの作り方 第2版』