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


Posted in Javascript onJuly 18, 2014

在流量统计服务中都有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,用于判断访客是从哪个页面发起的请求。

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

一般情况下浏览器请求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添加进头部。
Javascript 相关文章推荐
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
jquery focus(fn),blur(fn)方法实例代码
Dec 16 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
javascript拖拽效果延伸学习
Apr 04 Javascript
Javascript基础_标记文字的实现方法
Jun 14 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 #Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 #Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 #Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 #Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 #Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 #Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 #Javascript
You might like
php&amp;java(三)
2006/10/09 PHP
浅析PHP水印技术
2007/02/14 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
PHP SOCKET编程详解
2015/05/22 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
无阻塞加载脚本分析[全]
2011/01/20 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
python爬虫基本知识
2018/03/05 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
python pandas 时间日期的处理实现
2019/07/30 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
python打开音乐文件的实例方法
2020/07/21 Python
个人银行贷款担保书
2014/04/01 职场文书
个人先进材料范文
2014/12/30 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers