サーバーサイドで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を取得しても良いのか、どこまでリファラーポリシーを設定するか検討が必要そうです。
リファラーポリシーについても調べた上で、適切な設定をしたいですね。
以下の記事がとても参考になりました。

https://web.dev/referrer-best-practices/