はじめに
リリースした際、Refererが原因でバグとなったので、Refererとは何かから備忘録として残したいと思います。
おかしな点はご指摘お願いします。
Refererとは
Refererは、HTTPヘッダの1つで、インターネット上の1つのウェブページまたはリソースから見て、それにリンクしているウェブページやリソースのアドレスを指す。
Refererを参照することで、どこからそのページに要求が来たのかを知ることができる。
要は今のURLの前どこにいたのかという情報のことです。
Refererを取得してみる
試しにRefererを取得してみます。
googleのトップ画面にてQiitaと検索し、Qiitaのwebページへアクセスします。
この流れではgoogleのページからQiitaのページへ遷移してきたのでReferer情報にはgoogleのURLが載ることになります。
確認してみましょう。
Refere情報は次のように確認することができます。
-
デベロッパーツールを開きます。
デベロッパーツールの開き方はWindowsであれば F12キー、MacOSであればCommand＋Option＋Iキー。
右クリックから「検証」をクリックしても開くことができます。 -
Networkを選択し、先頭のHTMLファイルを選択します。（何も表示がなければリロードしてください）
-
Request Headersを確認する
HTMLファイルをクリックすると、このページの関するさまざまな情報を確認することができます。
RefererはHTTPヘッダに存在するのでHeadersを選択します。
Headersには大枠で次の３種類があります。
- General
- リクエストしたURLやメソッド、HTTPステータス、IPアドレス、リファラのポリシーが記載されています。リクエストとレスポンス共通のものです。
- Responce Headers
- レスポンスに関する追加情報、例えば場所や提供しているサーバーに関する情報を保持します。
- Request Headers
- 読み込むリソースについての情報や、そのリソースをリクエストしているクライアントに関する詳細な情報を持ちます。
なお、RefererはRequest Headers内に記載されています。
今回はgoogleからアクセスしているのでRefererには遷移元であるgoogleのURLが載っていますね。
ただし、Referer情報が存在しない場合もあります。
ノーリファラ (no referer)
起動直後に最初に表示したページや、ブックマークやお気に入りから開いた場合など、そもそも参照元が存在しない状況で生じるほか、ブラウザに参照元を申告する機能がない場合、ブラウザの設定で参照元の申告を拒否するように指定した場合などに発生する。
ノーリファラの場合は、Refererが存在しません。
バグ発生の状況
今回はホームページ（他社制作会社が作った）のバナーをクリックすると自社製品のURLに遷移する設計となっていました。
自社製品はAWSの環境下で動いています。
セキュリティ対策として、WAFにてRefererがホームページのURLのみを許可する設定としていました。
つまりホームページからバナーをクリックしなければ自社製品にはアクセスできない設計でした。
WAFによるReferer制限については次の記事がわかりやすかったのでお読みください。
本番環境で発生した不具合
バナーをクリックするのにも関わらず、画面が白いまま固まってしまっていました。
原因
調査の結果、原因はRefererにあることがわかりました。
バナーをクリックした際、自社製品アプリケーションのRefererがホームページのURLではなく自社製品のURLになっていました。
そのため初回遷移はできるものの、WAFではじかれDOMツリーでjavascriptが呼び込まれなかったのでした。
解決策
WAFのRefereに自社製品のURLを追加し、解決しました。
おわりに
これまではフロント、バックエンド、インフラなどエンジニアの種類ごとに色々な知識を学習してました。
最近はその間のネットワークの部分を実務で触れる機会があり、とても楽しく、毎日が発見です。
これからも学習していきます！
参考