document.referrer プロパティとは？

はじめに
document.referrerプロパティとは何だ？
参照できない理由は？
解決方法は?
まとめ

はじめに

業務の中で目にする機会があったdocument.referrerプロパティについて、少し調べてみたことをまとめてみます。

document.referrerプロパティは、訪問者が前にいたページのURLを取得することができます。

document.referrerプロパティを使用すれば、「ユーザーが辿ったパスによって違う導線をひきたい」という実装が実現できます。

例えばxxx/〇〇から遷移したユーザーには'/top'へ遷移させ、xxx/△△から遷移したユーザーには'/login'へ遷移させる、というような実装を実現したい時に使えます。

またWebサイトの運営者にとっても、訪問者の行動を追跡し、分析することは非常に重要です。

そのためには、訪問者がどのようにしてサイトにたどり着いたのかを把握する必要があります。

この情報は、マーケティング戦略や広告の効果を測る上で欠かせません。

しかし、document.referrerプロパティを使う際には注意すべきことがあります。

それはプライバシーとセキュリティの観点から、ブラウザはユーザーの移動履歴に関する情報を制限しています。

訪問者が前にいたページのURLを取得することができますが、場合によってはその値が空白になったり、部分的にしか取得できなかったりします。

本記事では、この document.referrer プロパティについて詳しく説明し、参照できない理由と対処方法を解説します。

document.referrerプロパティとは何だ？

document.referrer は、JavaScriptのプロパティの一つで、現在の文書(ページ)にアクセスする直前のページのURLを返します。

このプロパティは、主にWebサイトの分析やトラッキングに使用されています。

例えば、ユーザーがAというページから、Bというページに移動した場合、Bページの document.referrer の値は、AページのURLになります。

// Bページのコード
console.log(document.referrer); // AページのURLが出力される

しかし、プライバシーとセキュリティの観点から、ブラウザはこの値の取得を制限しています。次の項目で、その理由について説明します。

参照できない理由は？

document.referrer の値が空白になったり、部分的にしか取得できない理由は主に以下の3つです。

1. セキュリティ上の理由

HTTPSページからHTTPページに移動した場合、document.referrer の値は空白になります。

これは、HTTPSページからHTTPページへの移動を防ぐセキュリティ対策のためです。

HTTPSは、通信の暗号化により、第三者からの盗聴やデータの改ざんを防ぎます。

一方、HTTPはデータを平文で送受信するため、安全性が低くなります。

そのため、HTTPSからHTTPへの移動は、セキュリティ上の懸念があり、ブラウザはそれを防止するためにreferrerの値を空白にしています。

// HTTPSページ
const httpsPage = 'https://example.com'

// HTTPページ
const httpPage = 'http://example.org'

// HTTPSページからHTTPページへ移動すると、referrerは空白になる
window.location.href = httpPage
console.log(document.referrer); // 出力: ''

2. プライバシーの保護

一部のブラウザは、特定のケースでプライバシー保護のため、document.referrer の値を空白または部分的にしか取得できないよう設定しています。

例えば、Firefoxブラウザでは、HTTPからHTTPSへの移動時、document.referrer の値はページのオリジンのみが取得でき、パスやクエリ文字列は含まれません。

// HTTPページ
const httpPage = 'http://example.com/path?query=value';  

// HTTPSページ
const httpsPage = 'https://example.org';

// HTTPページからHTTPSページへ移動すると、referrerはオリジンのみ
window.location.href = httpsPage;
console.log(document.referrer); // 出力: 'http://example.com' (パスやクエリは含まれない)

3. アプリケーション側の設定

Webアプリケーション側で、Referrer-Policy HTTPヘッダを設定することにより、参照元の情報の開示を制御できます。

この設定によっては、document.referrer の値が空白になったり、部分的にしか取得できなくなる可能性があります。

具体的な動作は、Referrer Policyの仕様で確認できます。

<!-- no-referrer-whendowngradeポリシーの場合 -->
<meta name="referrer" content="no-referrer-when-downgrade">

このように、セキュリティやプライバシーの観点から、ブラウザやWebアプリケーションがdocument.referrerの値を制限していることが分かります。

解決方法は?

document.referrer の値が空白や部分的な場合、以下のような対処方法があります。

1. アナリティクスツールの利用

商用利用が目的の場合は、Googleアナリティクスなどのアナリティクスツールを利用すれば、訪問者の移動履歴を詳細に追跡できるので、そもそもdocument.referrer を使用しなくてもいいかもしれません。

アナリティクスツールは、ブラウザの制限を受けずに、より正確なデータを収集できます。

Googleアナリティクス

2. Referer HTTPヘッダの利用

document.referrer の代わりに、リクエストヘッダの Referer を利用することができます。

このヘッダにはユーザーエージェントからの完全な参照元URLが含まれています。

ただし、サーバー側でのみ取得できる情報です。

// Node.jsの例
const http = require('http');

const server = http.createServer((req, res) => {
  const referer = req.headers.referer || '参照元なし';
  console.log(`参照元: ${referer}`);
  res.end('Hello, World!');
});

server.listen(3000, () => {
  console.log('サーバーが起動しました。http://localhost:3000/ にアクセスしてください');
});

3. 代替的なユーザー追跡方法の利用

cookieやローカルストレージなどを利用し、ユーザー側で移動履歴を保持する方法があります。

ただし、プライバシー上の懸念もあり、適切な実装が求められます。

// ユーザーの移動履歴をローカルストレージに保存する例
window.addEventListener('beforeunload', () => {
  const currentUrl = window.location.href;
  const history = JSON.parse(localStorage.getItem('history')) || [];
  history.push(currentUrl);
  localStorage.setItem('history', JSON.stringify(history));
});