javascript的document.referrer浏览器支持、失效情况总结

 更新时间:2014年07月18日 11:51:57   投稿:junjie  
这篇文章主要介绍了javascript的document.referrer浏览器支持、失效情况总结,比较全面的对document.referrer在各个浏览器的支持情况、什么情况下会失效、Referer信息相关知识介绍等,需要的朋友可以参考下

在流量统计服务中都有Traffic source这个功能。Traffic source是针对访次级别的概念,换句话说,当访次建立的时候,landing page的流量来源即是该访次的Traffic source。虽然Traffic source有很多种,不过不幸的是依据现在JS,获得Traffic source的途径只有两种——document.referrer、window.opener.更不幸的是,window.opener适用的场景不多,而document.referrer非常的弱,以至于很多场景下无法准确判断出流量来源。

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 使用浏览器的前进、后退按钮

注意这里的link即指<A>标签,但是如果有事件或者target还要另当别论。

JS打开页面可能的方式:

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

上面列出了客户端打开页面的一些方法,此外,如果通过服务端的重定向技术,也能够使得页面A呈现给访客。

下面来针对具体的浏览器测试,如果是上述的这些情况,document.referrer表现如何:

序号 场景
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页面 " " " " " " " "

其中," "表示一个空的字符串,√表示能够正确判断来源页,保持则意味使用前进后退不会改变页面的referrer。从这张表里可以看出document.referrer能覆盖大约一半的case。但是对于一些比较常用的操作,例如利用鼠标拖动link至标签栏、前进后退等情况还不能做出正确的处理。

document.referrer的来源

浏览器在向server请求页面A的时候,会发送HTTP请求。这个请求的Header里会带上Referer属性,server接收到该请求后,可以提取出Header里的Referer,用于判断访客是从哪个页面发起的请求。

一般情况下浏览器请求A时发送的Header中Referer是什么,那么拿到A页面后document.referre的值就是什么。上图是一个请求A页面的Header,A的document.referre为http://localhost/Test/b.html。
 
如果在Header中不包含Referre,那么用document.referre去取的时候,就会被赋值为空字符串。

关于HTTPS请求

如果在一张普通的HTTP页面上点击了HTTPS的链接,那么在https请求头部可以附上Referer信息,之后在HTTPS页面中依然可以用document.referre来获得普通的http页面。
 
同样,如果是在一张https页面上点击了另一个HTTPS的链接,可以在请求的头部附上Referer信息。
 
但是如果是从一张https页面点击了http链接,那么很不幸,发送的http请求头里无法包含关于https页面的信息,这可能是出于一种对https页面的保护措施。

伪造Referer信息

根据上文的描述,document.referre源自于Header中的Referer。那么如果想修改document.referre的值,理论上讲,仅需要修改请求Header。可以将Header中现有的Referer替换成自己想要的值,如果原来没有也可以添加Referer。
 
在客户端,篡改Header是一件非常容易的事情。在一个页面的http请求发出去之前,可以利用截包工具将其拦截,然后分析出头部信息,并且修改Referre。
 
搜了一下,对于FireFox可以使用RefControl插件方便的进行修改。总之,欺骗Traffic source是轻而易举的事情。

页面强制Refresh

写完不久就发现遗漏了一种页面跳转的方式,即在html中的meta标签里强制指定页面进行refresh。例如在b.html中写入

复制代码 代码如下:
<meta http-equiv="Refresh" content="5;URL=a.html">

则过5秒后浏览器会自动向server发起a页面请求。
 
经过测试,在IE8,FF3.6-FF4.0中,均不会带有Referer信息,但是chrome却能够鬼使神差的把b.html作为Referer添加进头部。

相关文章

  • 前端js文件合并的三种方式推荐

    前端js文件合并的三种方式推荐

    下面小编就为大家带来一篇前端js文件合并的三种方式推荐。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 深入分析js的冒泡事件

    深入分析js的冒泡事件

    本文通过几段示例代码,给我们深入分析了下javascript的冒泡事件,非常的详细,这里推荐给大家,希望对大家有所帮助
    2014-12-12
  • JavaScript中的各种操作符使用总结

    JavaScript中的各种操作符使用总结

    这里我们说的操作符包括算数运算符和逻辑操作符等,包括布尔与赋值等,为大家进行了JavaScript中的各种操作符使用总结,需要的朋友可以参考下
    2016-05-05
  • JavaScript表达式:URL 协议介绍

    JavaScript表达式:URL 协议介绍

    javascript:后面可以是表达式或者使用分号分隔的表达式集合如javascript: 5 + 4,感兴趣的朋友可以参考下或许可以帮助到你
    2013-03-03
  • javascript冒泡排序小结

    javascript冒泡排序小结

    冒泡排序由于比较简单和容易理解,往往会成为人们首先想到的排序算法。最基本的想法就是在一次里面比较两个数字,并且确保他们在移动到其他项目之前有一个正确的顺序。在每一关结束,有价值的“排序”到正确的位置,最终只留下其他项目排序。
    2016-04-04
  • javascript内存管理详细解析

    javascript内存管理详细解析

    本文是对javascript中的内存管理进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • 如何在标题栏显示框架内页面的标题

    如何在标题栏显示框架内页面的标题

    如何在标题栏显示框架内页面的标题...
    2007-02-02
  • javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式

    javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式

    在javascript学习笔记(八)中,我们主要学习了在使用javascript面向对象编程时,如何创建对象及添加对象的属性和方法。
    2011-04-04
  • JS中switch的四种写法示例

    JS中switch的四种写法示例

    这篇文章主要为大家介绍了JS中switch的四种写法示例代码,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 简单介绍JavaScript中字符串创建的基本方法

    简单介绍JavaScript中字符串创建的基本方法

    这篇文章主要介绍了简单介绍JavaScript中字符串创建的基本方法,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-07-07

最新评论