レスポンスヘッダーのETagとリファラ差異の考察

レスポンスヘッダーのETagとリファラ差異の考察

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

ETagとは

ETag(エンティティタグ)は、HTTPにおけるレスポンスヘッダの1つである。 これは、HTTPにおけるキャッシュの有効性確認の手段の1つであり、ETagを利用してクライアントから条件付きのリクエストを行うことができる。

Wikipediaより

簡単に言うと、WEBブラウザ上のコンポーネント(画像やスクリプト、スタイルシートなど)と、WEBサーバー上のオリジナルコンポーネントが同一かどうかを決定するための仕組みです。

実際に見てみましょう。

image14

これは弊社のWEBページをchromeのdeveloperツールを使って見ている様子です。
弊社ロゴのレスポンスヘッダーにETagという項目があります。

はじめてアクセスしたページの各コンポーネントに対しWEBサーバーはユニークなETagを発行します。

2回目以降にアクセスした場合、WEBブラウザはWEBサーバーに対して、If-None-Matchヘッダーと一緒に、以前送られてきたETagを送ります。

image13

WEBサーバー側では、以前発行したETagと一致していた場合、ステータス304だけを返し、WEBブラウザはWEBブラウザ側で保持しているキャッシュを使用します。

このように、キャッシュの有無をチェックして、キャッシュがあるならキャッシュを使おうよ。という、通信に優しい仕組みなわけです。

ETagをPHPで書き換える

ETagとはWEBサーバー側で発行されるユニークなIDですが、PHP等から任意の文字列を与えることもできます。

image17

任意の文字列を与える事ができるということは、これを利用してトラッk・・・げふんっげふんっ!!

不思議な現象

さて前置きが長くなりましたが、色々まさぐっていたらちょっと不思議な現象がおきたので共有します。

etag1.html

etag2.html

etag1.htmlとetag2.htmlを用意します。中身は全く一緒で、scriptタグでetag_.phpを読み込んでいます。(ファイル名に意味はまったくありません。)

etag_.php

etag_.phpの中身はこんな感じ。
If-None-Matchヘッダーがなければ”bitwave”というEtagとキャッシュコントロールヘッダーを発行します。

この状態でetag1.htmlにアクセスしてみます。

Google chrome etag1.html

image19

ちゃんと”bitwave”というETagが発行されています。
なぜRefererに赤枠をつけたのかは後述します。
続いて同じブラウザでetag2.htmlにアクセスしてみます。

Google chrome etag2.html

image12

etag1.htmlにアクセスした際、すでにetag.php?mode=hogeはキャッシュされましたので、今度はETagではなくIf-None-Matchがヘッダーにがリクエストヘッダーとしてあります。

では続いてsafariで見てみます。

safari etag1.html

image11

chromeのときと同じで、”bitwave”というETagが発行されています。
続いてetag2.htmlにアクセスします。

safari etag2.html

image10

これもchromeの場合と同じで、ETagではなくIf-None-Matchヘッダーがあります。

しかし、chromeの場合と異なる点があります。それがRefererの値です。

chrome

image12

safari

image10

chromeでは、そのときアクセスしたetag2.htmlがリファラになっているのに対して、safariでは、キャッシュした際のURLであるetag1.htmlがリファラとなっています。

例えばPHPでリファラを取得した場合も同様に、chromeとsafariでは結果が異なります。

ETagを発行しないようにすると、この現象は起こらず、どちらのリファラもetag2.htmlとなります。

リファラの定義を考えれば、chromeの動作が正しいように思いますが、もしリファラの値が想定と異なる場合は、ETagを疑ってみるのも良いかと思います。

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ

仮想環境で『Ansible』を使ってサーバ構築... 最近、サーバ構築を実施する必要がありました。 まずは仮想環境を作り、サーバ構築を……と思ったのですが、私はインフラ周りの経験が浅く、色々困ったことが頻出してしまいました。 今回の記事では、私と同じような “サーバ構築ビギナー” ...
「Puppeteer」+「LINE Notify」でサイトの更新時のみ通知を受け取ってみる... 前回の記事では閲覧数向上が期待できそうなキーワードの「Puppeteer」と「LINE Notify」のそれぞれの解説、およびサイトのサムネイルを通知してみるといった試みを実施してみました。 <bitWave関連記事『「Puppeteer...
Vue.jsで社用登録データフォームを作ってみた... 今回は社内用データ登録フォームを作ろうと思い、初めて「Vue.js」を試してみることにしました。 「Vue.js」は使い方、書き方も簡単で、初心者もすぐ活用できるjsだと思いましたので、この場を借りて共有させていただきます。 なお、...
「Puppeteer」+「LINE Notify」でサイトのサムネイルを通知してみる... 今回は記事閲覧数が期待できそうなキーワードを用いて、ブログを書いてみようかと思います。 そのキーワードとは…… 「Puppeteer」と「LINE Notify」。 「Puppeteer」って何? 「LINE Notify」って...