JavaScript中Referrer丢失场景分析与解决方案

Referrer的基本概念与重要性

HTTP请求中包含一个名为Referer的报文头，用于标识当前流量的来源页面。例如，从www.sina.com.cn/sports/点击链接跳转至cctv.com首页时，Referer即为www.sina.com.cn/sports/。在JavaScript中，可通过document.referrer属性获取该信息。这对于Web Analytics至关重要，可分析不同渠道的流量分布及用户搜索关键词。

然而，受多种因素影响，JavaScript读取到的Referrer有时为空字符串。下文将总结导致Referrer丢失的具体场景。

Referrer丢失的常见场景分析

修改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网站。在地址栏中输入以下JavaScript代码可查看发送的Referrer：

javascript:alert(document.referrer)

测试结果如下：

在IE5.5及以上版本中，返回值为空字符串。

在Chrome3.0+、Firefox3.5、Opera9.6及Safari3.2.2中，均能正常返回来源网页信息。

若通过此方式在同域名下跳转，可通过访问window.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方式获取。

已测试环境包括：

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

点击Flash内部链接到达其他网站时，Referrer情况较为复杂。

在IE中，通过客户端JavaScript的document.referrer读取到的值为空，但使用流量监控软件查看HTTP请求时，发现Referer报文头实际有值，且指向Flash文件地址而非来源网页，这可能是IE实现的Bug。

在Chrome4.0中，点击Flash到达新窗口后，Referrer同样指向Flash文件地址，而非源网页。

在Chrome3.0和Safari3.2中，会直接丢失Referrer信息。

在Opera和Firefox中，Referrer值为来源网页地址。

从HTTPS网站跳转至HTTP网站时，浏览器不会发送Referrer。各大浏览器行为一致。

例如，在HTTPS环境下使用Google Reader或Gmail时点击链接跳转至其他网站，从技术角度看，此类访问与用户直接键入网址访问无异。

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>