這篇文章主要介紹了javascript的document.referrer瀏覽器支持、失效情況總結(jié),比較全面的對(duì)document.referrer在各個(gè)瀏覽器的支持情況、什么情況下會(huì)失效、Referer信息相關(guān)知識(shí)介紹等,需要的朋友可以參考下。

在流量統(tǒng)計(jì)服務(wù)中都有Traffic source這個(gè)功能。Traffic source是針對(duì)訪次級(jí)別的概念，換句話說(shuō)，當(dāng)訪次建立的時(shí)候，landing page的流量來(lái)源即是該訪次的Traffic source。雖然Traffic source有很多種，不過(guò)不幸的是依據(jù)現(xiàn)在JS，獲得Traffic source的途徑只有兩種——document.referrer、window.opener.更不幸的是，window.opener適用的場(chǎng)景不多，而document.referrer非常的弱，以至于很多場(chǎng)景下無(wú)法準(zhǔn)確判斷出流量來(lái)源。

document.referrer的覆蓋

從使用意義上來(lái)說(shuō)document.referrer希望能夠追蹤到的是瀏覽器端行為。如果一張頁(yè)面A被打開(kāi)，那么瀏覽器端可能會(huì)發(fā)生的動(dòng)作有用戶操作、JS代碼兩種。

先來(lái)看看用戶打開(kāi)頁(yè)面A可能會(huì)進(jìn)行的操作：

1 直接在地址欄中輸入A的地址

2 從B頁(yè)面左擊link A，跳轉(zhuǎn)至A頁(yè)面

3 從B頁(yè)面右擊link A，在新窗口中打開(kāi)

4 從B頁(yè)面右擊link A，在新標(biāo)簽頁(yè)中打開(kāi)

5 拖動(dòng)link A至地址欄

6 拖動(dòng)link A至標(biāo)簽欄

7 使用瀏覽器的前進(jìn)、后退按鈕

注意這里的link即指<A>標(biāo)簽，但是如果有事件或者target還要另當(dāng)別論。

JS打開(kāi)頁(yè)面可能的方式：

1

修改window.location

2

使用window.open

3

點(diǎn)擊flash

上面列出了客戶端打開(kāi)頁(yè)面的一些方法，此外，如果通過(guò)服務(wù)端的重定向技術(shù)，也能夠使得頁(yè)面A呈現(xiàn)給訪客。

下面來(lái)針對(duì)具體的瀏覽器測(cè)試，如果是上述的這些情況，document.referrer表現(xiàn)如何：

序號(hào) 場(chǎng)景

IE8.0 FF3.6 FF4.0 chrome

1 直接在地址欄中輸入A的地址 " "

" "

" " " "

2 從B頁(yè)面左擊link A，A頁(yè)面替換B頁(yè)面(target='_self') √ √ √ √

3 從B頁(yè)面左擊link A，A在新窗口中打開(kāi)(target='_blank') √ √ √ √

3 從B頁(yè)面右擊link A，在新窗口中打開(kāi) √ √ √ " "

4 從B頁(yè)面右擊link A，在新標(biāo)簽頁(yè)中打開(kāi) √ √ √ " "

5 鼠標(biāo)拖動(dòng)link A至地址欄 ／ " " " " " "

6 鼠標(biāo)拖動(dòng)link A至標(biāo)簽欄 " " " " " " " "

7 使用瀏覽器的前進(jìn)、后退按鈕 保持 保持 保持 保持

8 修改window.location打開(kāi)A頁(yè)面(同域) " " √ √ √

9 使用window.open打開(kāi)A頁(yè)面 " " √ √ √

10 點(diǎn)擊flash打開(kāi)A頁(yè)面

11 服務(wù)器重定向至A頁(yè)面 " " " " " " " "

其中，" "表示一個(gè)空的字符串，√表示能夠正確判斷來(lái)源頁(yè)，保持則意味使用前進(jìn)后退不會(huì)改變頁(yè)面的referrer。從這張表里可以看出document.referrer能覆蓋大約一半的case。但是對(duì)于一些比較常用的操作，例如利用鼠標(biāo)拖動(dòng)link至標(biāo)簽欄、前進(jìn)后退等情況還不能做出正確的處理。

document.referrer的來(lái)源

瀏覽器在向server請(qǐng)求頁(yè)面A的時(shí)候，會(huì)發(fā)送HTTP請(qǐng)求。這個(gè)請(qǐng)求的Header里會(huì)帶上Referer屬性，server接收到該請(qǐng)求后，可以提取出Header里的Referer，用于判斷訪客是從哪個(gè)頁(yè)面發(fā)起的請(qǐng)求。

一般情況下瀏覽器請(qǐng)求A時(shí)發(fā)送的Header中Referer是什么，那么拿到A頁(yè)面后document.referre的值就是什么。上圖是一個(gè)請(qǐng)求A頁(yè)面的Header，A的document.referre為http://localhost/Test/b.html。

如果在Header中不包含Referre，那么用document.referre去取的時(shí)候，就會(huì)被賦值為空字符串。

關(guān)于HTTPS請(qǐng)求

如果在一張普通的HTTP頁(yè)面上點(diǎn)擊了HTTPS的鏈接，那么在https請(qǐng)求頭部可以附上Referer信息，之后在HTTPS頁(yè)面中依然可以用document.referre來(lái)獲得普通的http頁(yè)面。

同樣，如果是在一張https頁(yè)面上點(diǎn)擊了另一個(gè)HTTPS的鏈接，可以在請(qǐng)求的頭部附上Referer信息。

但是如果是從一張https頁(yè)面點(diǎn)擊了http鏈接，那么很不幸，發(fā)送的http請(qǐng)求頭里無(wú)法包含關(guān)于https頁(yè)面的信息，這可能是出于一種對(duì)https頁(yè)面的保護(hù)措施。

偽造Referer信息

根據(jù)上文的描述，document.referre源自于Header中的Referer。那么如果想修改document.referre的值，理論上講，僅需要修改請(qǐng)求Header。可以將Header中現(xiàn)有的Referer替換成自己想要的值，如果原來(lái)沒(méi)有也可以添加Referer。

在客戶端，篡改Header是一件非常容易的事情。在一個(gè)頁(yè)面的http請(qǐng)求發(fā)出去之前，可以利用截包工具將其攔截，然后分析出頭部信息，并且修改Referre。

搜了一下，對(duì)于FireFox可以使用RefControl插件方便的進(jìn)行修改?？傊垓_Traffic source是輕而易舉的事情。

頁(yè)面強(qiáng)制Refresh

寫(xiě)完不久就發(fā)現(xiàn)遺漏了一種頁(yè)面跳轉(zhuǎn)的方式，即在html中的meta標(biāo)簽里強(qiáng)制指定頁(yè)面進(jìn)行refresh。例如在b.html中寫(xiě)入

代碼如下:

<meta http-equiv="Refresh" content="5;URL=a.html">

則過(guò)5秒后瀏覽器會(huì)自動(dòng)向server發(fā)起a頁(yè)面請(qǐng)求。

經(jīng)過(guò)測(cè)試，在IE8，F(xiàn)F3.6-FF4.0中，均不會(huì)帶有Referer信息，但是chrome卻能夠鬼使神差的把b.html作為Referer添加進(jìn)頭部。

更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄