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 相关文章推荐
JavaScript中null与undefined分析
Jul 25 Javascript
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
详解vue表单——小白速看
Apr 08 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 Javascript
JavaScript实现随机点名器
Mar 25 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中heredoc与nowdoc介绍
2014/12/25 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
php自动载入类用法实例分析
2016/06/24 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
javascript 年月日联动实现核心代码
2009/12/21 Javascript
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
Java程序员面试90题
2013/10/19 面试题
给同学的道歉信
2014/01/16 职场文书
年度考核自我鉴定
2014/03/19 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
初中政治教师教学反思
2016/02/23 职场文书
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL