Document.referrer ブラウザのサポートと JavaScript の障害まとめ_基礎知識

トラフィックソース機能はトラフィック統計サービスで利用可能です。トラフィック ソースとは、訪問レベルの概念を指します。つまり、訪問が作成されると、ランディング ページのトラフィック ソースが訪問のトラフィック ソースになります。トラフィック ソースには多くの種類がありますが、残念ながら現在の JS によれば、トラフィック ソースを取得する方法は document.referrer と window.opener の 2 つしかありません。さらに残念なのは、window.opener が多くのシナリオに適用できないことです。リファラーは非常に弱いため、多くのシナリオでトラフィックのソースを正確に判断することは不可能です。

document.referrer のオーバーライド

使用法に関して、document.referrer はブラウザ側の動作を追跡することを望んでいます。ページ A が開かれた場合、ブラウザ側で発生する可能性のあるアクションには、ユーザーの操作と JS コードが含まれます。

まず、ページ A を開くときにユーザーが実行できる操作を見てみましょう:

1	直接在地址栏中输入A的地址
2	从B页面左击link A，跳转至A页面
3	从B页面右击link A，在新窗口中打开
4	从B页面右击link A，在新标签页中打开
5	拖动link A至地址栏
6	拖动link A至标签栏
7	使用浏览器的前进、后退按钮

ここでのリンクは タグを参照していることに注意してください。ただし、イベントやターゲットがある場合は別の問題になります。

JS でページを開く可能な方法:

テーブル>

1

1	修改window.location
2	使用window.open
3	点击flash

window.location を変更

2

window.open を使用します

3

フラッシュをクリック

序号	场景	IE8.0	FF3.6	FF4.0	chrome
1	直接在地址栏中输入A的地址	" "	" "	" "	" "
2	从B页面左击link A，A页面替换B页面(target='_self')	√	√	√	√
3	从B页面左击link A，A在新窗口中打开(target='_blank')	√	√	√	√
3	从B页面右击link A，在新窗口中打开	√	√	√	" "
4	从B页面右击link A，在新标签页中打开	√	√	√	" "
5	鼠标拖动link A至地址栏	／	" "	" "	" "
6	鼠标拖动link A至标签栏	" "	" "	" "	" "
7	使用浏览器的前进、后退按钮	保持	保持	保持	保持
8	修改window.location打开A页面(同域)	" "	√	√	√
9	使用window.open打开A页面	" "	√	√	√
10	点击flash打开A页面
11	服务器重定向至A页面	" "	" "	" "	" "

上記には、クライアントがページを開くためのいくつかの方法がリストされています。さらに、サーバー側のリダイレクト技術が使用されている場合、ページ A を訪問者に表示することもできます。 上記の状況の場合、特定のブラウザーで document.referrer がどのように動作するかをテストしてみましょう: テーブル>

このうち「 」は空文字列、√はソースページが正しく判定できること、keepはforwardとbackwardを使用してもページの参照元が変わらないことを意味します。この表から、document.referrer でケースの約半分をカバーできることがわかります。ただし、マウスを使用してリンクをタブ バーにドラッグしたり、前後に移動したりするなど、一部の一般的な操作は正しく処理できません。

document.referrer のソース

ブラウザがサーバーにページ A をリクエストすると、HTTP リクエストが送信されます。 Referer 属性は、このリクエストのヘッダーに含まれます。サーバーはリクエストを受信すると、ヘッダー内の Referer を抽出して、訪問者がどのページからリクエストを開始したかを判断できます。

一般に、ブラウザが A をリクエストしたときに送信されるヘッダーの Referer は何で、A ページを取得した後の document.referre の値は何ですか。上の図は、ページ A を要求するヘッダーです。A の document.referre は http://localhost/Test/b.html です。

Referre がヘッダーに含まれていない場合、document.referre を使用するときに空の文字列が割り当てられます。

HTTPS リクエストについて

通常の HTTP ページで HTTPS リンクをクリックすると、https リクエスト ヘッダーにリファラー情報を添付できます。その後も HTTPS ページで document.referre を使用して通常の http ページを取得できます。

同様に、https ページ上の別の HTTPS リンクをクリックすると、リクエスト ヘッダーにリファラー情報を添付できます。

ただし、https ページから http リンクをクリックした場合、残念ながら、送信される http リクエスト ヘッダーには https ページに関する情報を含めることができません。これは、https ページの保護措置が原因である可能性があります。

偽のリファラー情報

上記の説明によると、document.referre はヘッダーの Referer から生成されます。したがって、document.referre の値を変更する場合は、理論的にはリクエスト ヘッダーを変更するだけで済みます。ヘッダー内の既存のリファラーを必要な値に置き換えることも、元々存在しない場合はリファラーを追加することもできます。

クライアント側では、ヘッダーを改ざんするのは非常に簡単です。ページの http リクエストが送信される前に、パケット傍受ツールを使用してリクエストを傍受し、ヘッダー情報を分析して Referre を変更できます。

調べてみると、FireFox用のRefControlプラグインを使うと簡単に改造できることが分かりました。つまり、トラフィック ソースのなりすましは簡単です。

ページの強制更新

書き終えてから間もなく、そのページにジャンプする方法、つまり HTML のメタ タグで指定されたページを強制的に更新する方法を見逃していたことに気づきました。たとえば、b.html に
と書きます。

コードをコピー コードは次のとおりです。

5 秒後、ブラウザはサーバーへのページ要求を自動的に開始します。

テスト後、IE8 および FF3.6 ～ FF4.0 ではリファラー情報がありませんが、Chrome は誤って b.html をリファラーとしてヘッダーに追加する可能性があります。

シリアル番号	シーン	IE8.0	FF3.6	FF4.0	クロム
1	アドレスバーに A のアドレスを直接入力します	" "	" "	" "	" "
2	ページ B のリンク A を左クリックすると、ページ A がページ B に置き換わります (target='_self')	√	√	√	√
3	ページ B のリンク A を左クリックすると、A が新しいウィンドウ (target='_blank') で開きます	√	√	√	√
3	ページ B のリンク A を右クリックして、新しいウィンドウで開きます	√	√	√	" "
4	ページ B のリンク A を右クリックし、新しいタブで開きます	√	√	√	" "
5	リンク A をマウスでアドレス バーにドラッグします	／	" "	" "	" "
6	リンク A をマウスでタブ バーにドラッグします	" "	" "	" "	" "
7	ブラウザの「進む」ボタンと「戻る」ボタンを使用します	保持	保持	保持	保持
8	ページ A (同じドメイン) を開くように window.location を変更します	" "	√	√	√
9	window.open を使用してページ A を開きます	" "	√	√	√
10	フラッシュをクリックしてページ A を開きます
11	サーバーはページ A にリダイレクトします	" "	" "	" "	" "