javascript操作referer詳細解析

2019-11-20 20:58:06

字體：大中小

來源：轉載

供稿：網友

Referrer的重要性
HTTP請求中有一個referer的報文頭，用來指明當前流量的來源參考頁。例如在www.sina.com.cn/sports/上點擊一個鏈接到達cctv.com首頁，那么就referrer就是www.sina.com.cn/sports/了。在Javascript中，我們可以通過document.referrer來獲取同樣的信息。通過這個信息，我們就可以知道訪客是從什么渠道來到當前頁面的。這對于Web Analytics來說，是非常重要的，這可以告訴我們不同渠道帶來的流量的分布情況，還有用戶搜索的關鍵詞等，都是通過分析這個referrer信息來獲取的。

但是，出于各種各樣的原因，有時候Javascript中讀到的referrer卻是空字符串。下面總結一下哪些情況下會丟失referrer。

修改Location對象進行頁面導航
Location對象是一個用于頁面導航的非常實用的對象。因為他允許你只變更Url的其中一部分。例如從cn域名切換到com域名，其他部分不變：

復制代碼代碼如下:

window.location.hostname = "example.com";

但是，通過修改Location進行頁面導航的方法，會導致在IE下丟失Referrer。

IE5.5+ 下返回空字符串

Chrome3.0+，Firefox3.5，Opera9.6，Safari3.2.2均正常返回來源網頁

window.open方式打開新窗口
示例：

復制代碼代碼如下:

<a href="#" onclick="window.open('http://www.google.com')">訪問Google</a>

點擊此鏈接會在新窗口打開Google網站，我們在地址欄中輸入以下js代碼就可以看到發送的referrer了。

復制代碼代碼如下:

javascript:alert(document.referrer)

測試結果：

IE5.5+ 下返回空字符串

Chrome3.0+，Firefox3.5，Opera9.6，Safari3.2.2均正常返回來源網頁

如果是同個域名下通過此方式跳轉的，那么我們可以通過訪問windoww.opener對象去獲取丟失的referrer信息。代碼如下：

復制代碼代碼如下:

<script type="text/javascript"> 
    var referrer = document.referrer; 
    if (!referrer) { 
        try { 
            if (window.opener) { 
                // IE下如果跨域則拋出權限異常 
                // Safari和Chrome下window.opener.location沒有任何屬性 
                referrer = window.opener.location.href; 
            } 
        }  
        catch (e) {} 
    } 
</script>

跨域的話則沒轍了~

鼠標拖拽打開新窗口
鼠標拖拽是現在非常流行的用戶習慣，很多瀏覽器都內置或者可以通過插件的方式來支持鼠標拖拽式瀏覽。但是通過這種方式打開的頁面，基本全都丟失referrer。并且，這種情況下，也無法使用window.opener的方式去獲取丟失的referrer了。

已測試：

Maxthon2.5.2，Firefox的FireGesture插件，Chrome3.0+，Opera9.6，Safari3.2。

點擊Flash內部鏈接
點擊Flash上到達另外一個網站的時候，Referrer的情況就比較雜亂了。

IE下，通過客戶端Javascript的document.referrer讀取到的值是空的，但是如果你使用流量監控軟件看一下的話，你會發現，實際上HTTP請求中的Referer報文頭卻是有值的，這可能是IE實現的Bug。同時，這個值指向的是Flash文件的地址，而不是來源網頁的地址。

Chrome4.0下點擊Flash到達新窗口之后，Referrer也是指向的Flash文件的地址，而不是源網頁的地址。

Chrome3.0和Safari3.2是一樣的，都是會丟失Referrer信息。

Opera則和Firefox一樣，Referrer的值都是來源網頁的地址。

HTTPS跳轉到HTTP
從HTTPS的網站跳轉到HTTP的網站時，瀏覽器是不會發送referrer的。這個各大瀏覽器的行為是一樣的。

例如，我們在HTTPS下使用Google Reader或是Gmail的時候，點擊某個鏈接去到另外一個網站，那么從技術上來說，這樣的訪問和用戶直接鍵入網址訪問是沒有什么分別的。

Referrer丟失對于廣告流量監控的影響
Referrer如果丟失，Web Analytics就會丟掉很重要的一部分信息了，特別對于廣告流量來說，就無法知道實際來源了。目前國內好多用了Google Adsense廣告的網站，都使用了window.open的方式來打開廣告鏈接，因此IE下會丟失Referrer，而我們知道，IE是目前市場份額最大的瀏覽器，因此其影響是很大的。很多流量統計工具會因此將這部分流量歸入“直接流量”，和用戶直接鍵入網址等價了。

對于這樣的情況，需要讓廣告投放者在投放廣告的時候，給著陸頁面的Url加上特定的跟蹤參數。

例如，某個Flash廣告，點擊之后到達的網址是http://www.example.com/，為了監控此流量是從哪個渠道過來的，我們可以修改此投放的著陸Url，改成http://www.example.com/?src=sina，類似這種方式，然后在著陸頁面中使用Javascript代碼提取此src參數，這樣就可以得到廣告來源信息。

在投放Google Adwords的時候，后臺系統有一個“自動標記”的選項，當啟用此選項的時候，Google在生成所有廣告的著陸頁面Url的時候，就會自動加上一個gclid的參數，這個參數能夠將Google Analytics后臺和Adwords廣告后臺的數據進行整合。這樣就可以知道廣告流量對應于哪個廣告系列，哪個廣告來源和廣告關鍵詞等信息了。和上面提到的思路其實是類似的。只不過Google自動幫你做了Url的修改了而已。

IE下referer為空的解決辦法
在IE下采用 window.location.href方式跳轉的話，referer值為空。而在標簽里面的跳轉的話 referer就不會空。所以，通過以下代碼就可以解決這個IE問題

復制代碼代碼如下:

function gotoUrl(url){ 
     if(window.VBArray){ 
         var gotoLink = document.createElement('a'); 
         gotoLink .href = url; 
         document.body.appendChild(gotoLink); 
         gotoLink .click(); 
     }else{ 
       window.location.href = url; 
     } 
 } 

禁止瀏覽器在訪問鏈接時不要帶上referer
我們在從一個網站點擊鏈接進入另一個頁面時，瀏覽器會在header里加上Referer值，來標識這次訪問的來源頁面。但是這種標識有可能會泄漏用戶的隱私，有時候我不想讓其他人知道我是從哪里點擊進來的，能否有手段可以讓瀏覽器不要發送Referer呢？

•使用新增的html5的解決方案,使用rel="noreferrer",聲明連接的屬性為noreferrer,目前只有chrome4+支持.
•使用中間頁面,但實際上還是發送referrer的,比如使用Google的連接轉向,noreferrer.js.
•使用javascript協議鏈接中轉,參見下面的說明.

新開一個窗口,相當于target="_blank":

復制代碼代碼如下:

function open_window(link){  
    var arg = '/u003cscript/u003elocation.replace("'+link+'")/u003c/script/u003e'; 
    window.open('javascript:window.name;', arg); 
} 
</CODE> 

轉向到一個連接,相當于target="_self":

復制代碼代碼如下:

function redirect(link){  
    var arg ='/u003cscript/u003etop.location.replace("'+link+'")/u003c/script/u003e'; 
    var iframe = document.createElement('iframe'); 
    iframe.src='javascript:window.name;'; 
    iframe.name=arg; 
    document.body.appendChild(iframe); 
} 
</CODE> 

上一篇：php中給js數組賦值方法

下一篇：JS數組的賦值介紹