サーバーサイドでRefererを取得する
refererとは
referer（リファラー）は、Webページへのアクセス元を示す情報のことで、リクエストヘッダーに含まれています。
例えば、Google検索結果ページからクリックしてアクセスした場合は、refererには「https://www.google.com」というURLが含まれます。
refererは、Webサイトのトラフィック解析やSEOの分野で用いられます。
referer情報を解析することで、どのページからアクセスがあったのかを把握できます。
参考: https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Referer
refererが設定される条件
refererが設定される条件は以下のようになります。
- HTTPSからHTTPSへの遷移
- HTTPSからHTTPへの遷移
- HTTPからHTTPへの遷移
以下のような場合はrefererが設定されないため注意が必要です。
- HTTPからHTTPSへの遷移
- 別ドメインからの遷移
refererの情報を取得する方法
refererの情報を取得するには、クライアント側で取得する方法とフレームワークを用いてサーバーサイドで取得する方法があります。
JavaScriptを使用する方法
JavaScriptを使用する方法では、document.referrer を使ってクライアント側でreferrer情報を取得できます。
console.log(document.referrer);
サーバーサイドで取得する方法
refererはブラウザ側よしなにリクエストに設定されますが、サーバーサイドで取得したい場合はフレームワークに組み込まれた機能を用いて取得できます。
Nuxtで取得する方法
NuxtではasyncDataメソッド内で context の req.headers.referer を使用してreferrer情報を取得できます。
export default {
async asyncData({req}) {
const referer = req.headers.referer
return {}
}
}
Nextで取得する方法
NextでもAPIルートやページコンポーネントのgetServerSidePropsメソッド内で context の req.headers.referer を使用してreferrer情報を取得できます。
export async function getServerSideProps({req}) {
const referer = req.headers.referer
return { props: {} }
}
所感
APIのリクエストヘッダーに含める必要があったのでサーバーサイドでrefererを取得する必要がありました。フレームワークの機能を使えば取得自体はできそうですが、セキュリティの観点からそもそもrefererを取得しても良いのか、どこまでリファラーポリシーを設定するか検討が必要そうです。
リファラーポリシーについても調べた上で、適切な設定を行いたいですね。
以下の記事がとても参考になりました。
Discussion