導入
Web開発において、外部リソースへのリクエスト時に送信される「Referer」ヘッダーの制御は、セキュリティとプライバシー保護の観点から極めて重要です。特に機密性の高いURL構造を持つアプリケーションでは、意図せずリファラー情報が流出することで、ユーザーの操作情報や内部パスが外部へ漏洩するリスクがあります。今回解説する「Request.prototype.referrerPolicy」を活用することで、Fetch APIを利用した通信ごとに柔軟なポリシー設定が可能となり、セキュアなアプリケーション設計を実現できます。
基礎知識
「Referrer Policy」とは、ブラウザがリクエストを送る際に「Referer」ヘッダーにどの程度の情報を付与するかを定義する仕組みです。
Request.prototype.referrerPolicyは、JavaScriptのFetch APIでRequestオブジェクトを生成する際に、このポリシーを個別に指定できるプロパティです。
主なポリシー値には以下のようなものがあります。
・no-referrer: リファラーを一切送信しません。
・same-origin: 同一生成元（ドメイン・ポート等が同じ）へのリクエストのみ送信します。
・strict-origin-when-cross-origin: 同一ドメイン間は完全なURLを送信し、外部へはオリジン情報のみ、HTTPSからHTTPへの移動時は送信しないという、現代のブラウザ標準に近い挙動をとります。
実装/解決策
Fetch APIでRequestオブジェクトを生成する際、第2引数のオプションオブジェクトにreferrerPolicyプロパティを渡すことで実装します。これにより、グローバルなメタタグによる設定を上書きし、特定のAPIリクエストに対して厳格な制限をかけることができます。
サンプルプログラム
/
- 特定の外部APIへ情報を送る際に、リファラーを送信しない設定例
/
async function secureFetchRequest() {
const url = ‘https://api.example.com/data’;
// Requestコンストラクタでポリシーを明示的に指定
const request = new Request(url, {
method: ‘GET’,
// リファラー情報を一切送信しない設定
referrerPolicy: ‘no-referrer’
});
try {
const response = await fetch(request);
const data = await response.json();
console.log(‘取得成功:’, data);
} catch (error) {
console.error(‘リクエスト失敗:’, error);
}
}
secureFetchRequest();
応用・注意点
現場で活用する際の重要な注意点が2つあります。
1. ブラウザの互換性:
ほとんどのモダンブラウザでサポートされていますが、極めて古いブラウザでは無視される可能性があります。基本的にはHTMLのMetaタグ（）で全体的なポリシーを定義し、個別のRequestで上書きする「多層防御」のアプローチを推奨します。
2. サードパーティ製ライブラリとの兼ね合い:
Axiosなどのライブラリを使用している場合、内部でどのようにRequestオブジェクトを生成しているか確認が必要です。Axiosもv0.21.0以降でreferrerPolicyオプションをサポートしていますが、ライブラリのバージョンによっては設定が反映されないケースがあるため、必ずブラウザの開発者ツールのネットワークタブで「Referer」ヘッダーが正しく制御されているかを確認してください。
ポリシーを厳しくしすぎると、アクセス解析ツール（Google Analyticsなど）で参照元が計測できなくなる場合があります。用途に合わせて適切なポリシーを選択することが、エンジニアとしての腕の見せ所です。