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加强的经典分页实例
Mar 15 Javascript
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
jQuery背景插件backstretch使用指南
Apr 21 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
微信小程序实现工作时间段选择
Feb 15 Javascript
createObjectURL方法实现本地图片预览
Sep 30 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
js实现模拟购物商城案例
May 18 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模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
详解Python的Django框架中的templates设置
2015/05/11 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
Django 路由层URLconf的实现
2019/12/30 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
英国网上购买门:Direct Doors
2018/06/07 全球购物
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
工商企业管理实习自我鉴定
2013/12/04 职场文书
三个儿子教学反思
2014/02/03 职场文书
融资租赁计划书
2014/04/29 职场文书
媒体宣传策划方案
2014/05/25 职场文书
明星员工获奖感言
2014/08/14 职场文书
2014年检验员工作总结
2014/11/19 职场文书
电视新闻稿
2015/07/17 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL