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 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
javascript Base类 包含基本的方法
Jul 22 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
复制js对象方法(详解)
Jul 08 Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 Javascript
javascript操作ul中li的方法
May 14 Javascript
vue项目总结之文件夹结构配置详解
Dec 13 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
react 国际化的实现代码示例
Sep 14 Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
js仿360开机效果
Dec 26 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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
浅谈angular4生命周期钩子
2017/09/05 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
JS实现放大镜效果
2020/09/21 Javascript
go和python调用其它程序并得到程序输出
2014/02/10 Python
python网络编程学习笔记(一)
2014/06/09 Python
Python批量查询域名是否被注册过
2017/06/21 Python
Python 字符串换行的多种方式
2018/09/06 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
写自荐信有哪些不宜?
2013/10/17 职场文书
会计岗位职责范本
2014/03/07 职场文书
道路建设实施方案
2014/03/18 职场文书
支部鉴定材料
2014/06/02 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
交通事故被告答辩状
2015/05/22 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
护士工作心得体会
2016/01/25 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python