javascript操作referer详细解析


Posted in Javascript onMarch 10, 2014

Referrer的重要性
HTTP请求中有一个referer的报文头,用来指明当前流量的来源参考页。例如在www.sina.com.cn/sports/上点击一个链接到达cctv.com首页,那么就referrer就是www.sina.com.cn/sports/了。在Javascript中,我们可以通过document.referrer来获取同样的信息。通过这个信息,我们就可以知道访客是从什么渠道来到当前页面的。这对于Web Analytics来说,是非常重要的,这可以告诉我们不同渠道带来的流量的分布情况,还有用户搜索的关键词等,都是通过分析这个referrer信息来获取的。

但是,出于各种各样的原因,有时候Javascript中读到的referrer却是空字符串。下面总结一下哪些情况下会丢失referrer。

修改Location对象进行页面导航
Location对象是一个用于页面导航的非常实用的对象。因为他允许你只变更Url的其中一部分。例如从cn域名切换到com域名,其他部分不变:

window.location.hostname = "example.com";

但是,通过修改Location进行页面导航的方法,会导致在IE下丢失Referrer。

IE5.5+ 下返回空字符串

Chrome3.0+,Firefox3.5,Opera9.6,Safari3.2.2均正常返回来源网页

window.open方式打开新窗口
示例:

<a href="#" onclick="window.open('http://www.google.com')">访问Google</a>

点击此链接会在新窗口打开Google网站,我们在地址栏中输入以下js代码就可以看到发送的referrer了。
javascript:alert(document.referrer)

测试结果:

IE5.5+ 下返回空字符串

Chrome3.0+,Firefox3.5,Opera9.6,Safari3.2.2均正常返回来源网页

如果是同个域名下通过此方式跳转的,那么我们可以通过访问windoww.opener对象去获取丢失的referrer信息。代码如下:

<script type="text/javascript"> 
    var referrer = document.referrer; 
    if (!referrer) { 
        try { 
            if (window.opener) { 
                // IE下如果跨域则抛出权限异常 
                // Safari和Chrome下window.opener.location没有任何属性 
                referrer = window.opener.location.href; 
            } 
        }  
        catch (e) {} 
    } 
</script>

跨域的话则没辙了~

鼠标拖拽打开新窗口
鼠标拖拽是现在非常流行的用户习惯,很多浏览器都内置或者可以通过插件的方式来支持鼠标拖拽式浏览。但是通过这种方式打开的页面,基本全都丢失referrer。并且,这种情况下,也无法使用window.opener的方式去获取丢失的referrer了。

已测试:

Maxthon2.5.2,Firefox的FireGesture插件,Chrome3.0+,Opera9.6,Safari3.2。

点击Flash内部链接
点击Flash上到达另外一个网站的时候,Referrer的情况就比较杂乱了。

IE下,通过客户端Javascript的document.referrer读取到的值是空的,但是如果你使用流量监控软件看一下的话,你会发现,实际上HTTP请求中的Referer报文头却是有值的,这可能是IE实现的Bug。同时,这个值指向的是Flash文件的地址,而不是来源网页的地址。

Chrome4.0下点击Flash到达新窗口之后,Referrer也是指向的Flash文件的地址,而不是源网页的地址。

Chrome3.0和Safari3.2是一样的,都是会丢失Referrer信息。

Opera则和Firefox一样,Referrer的值都是来源网页的地址。

HTTPS跳转到HTTP
从HTTPS的网站跳转到HTTP的网站时,浏览器是不会发送referrer的。这个各大浏览器的行为是一样的。

例如,我们在HTTPS下使用Google Reader或是Gmail的时候,点击某个链接去到另外一个网站,那么从技术上来说,这样的访问和用户直接键入网址访问是没有什么分别的。

Referrer丢失对于广告流量监控的影响
Referrer如果丢失,Web Analytics就会丢掉很重要的一部分信息了,特别对于广告流量来说,就无法知道实际来源了。目前国内好多用了Google Adsense广告的网站,都使用了window.open的方式来打开广告链接,因此IE下会丢失Referrer,而我们知道,IE是目前市场份额最大的浏览器,因此其影响是很大的。很多流量统计工具会因此将这部分流量归入“直接流量”,和用户直接键入网址等价了。

对于这样的情况,需要让广告投放者在投放广告的时候,给着陆页面的Url加上特定的跟踪参数。

例如,某个Flash广告,点击之后到达的网址是http://www.example.com/,为了监控此流量是从哪个渠道过来的,我们可以修改此投放的着陆Url,改成http://www.example.com/?src=sina,类似这种方式,然后在着陆页面中使用Javascript代码提取此src参数,这样就可以得到广告来源信息。

在投放Google Adwords的时候,后台系统有一个“自动标记”的选项,当启用此选项的时候,Google在生成所有广告的着陆页面Url的时候,就会自动加上一个gclid的参数,这个参数能够将Google Analytics后台和Adwords广告后台的数据进行整合。这样就可以知道广告流量对应于哪个广告系列,哪个广告来源和广告关键词等信息了。和上面提到的思路其实是类似的。只不过Google自动帮你做了Url的修改了而已。

IE下referer为空的解决办法
在IE下采用 window.location.href方式跳转的话,referer值为空。而在标签里面的跳转的话 referer就不会空。所以,通过以下代码就可以解决这个IE问题

function gotoUrl(url){ 
     if(window.VBArray){ 
         var gotoLink = document.createElement('a'); 
         gotoLink .href = url; 
         document.body.appendChild(gotoLink); 
         gotoLink .click(); 
     }else{ 
       window.location.href = url; 
     } 
 }

禁止浏览器在访问链接时不要带上referer
我们在从一个网站点击链接进入另一个页面时,浏览器会在header里加上Referer值,来标识这次访问的来源页面。但是这种标识有可能会泄漏用户的隐私,有时候我不想让其他人知道我是从哪里点击进来的,能否有手段可以让浏览器不要发送Referer呢?

•使用新增的html5的解决方案,使用rel="noreferrer",声明连接的属性为noreferrer,目前只有chrome4+支持.
•使用中间页面,但实际上还是发送referrer的,比如使用Google的连接转向,noreferrer.js.
•使用javascript协议链接中转,参见下面的说明.

新开一个窗口,相当于target="_blank":

function open_window(link){  
    var arg = '\u003cscript\u003elocation.replace("'+link+'")\u003c/script\u003e'; 
    window.open('javascript:window.name;', arg); 
} 
</CODE>

转向到一个连接,相当于target="_self":
function redirect(link){  
    var arg ='\u003cscript\u003etop.location.replace("'+link+'")\u003c/script\u003e'; 
    var iframe = document.createElement('iframe'); 
    iframe.src='javascript:window.name;'; 
    iframe.name=arg; 
    document.body.appendChild(iframe); 
} 
</CODE>
Javascript 相关文章推荐
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
Nov 24 Javascript
javascript实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
JavaScript 大数据相加的问题
Aug 03 Javascript
jQuery学习笔记之控制页面实现代码
Feb 27 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
关于AOP在JS中的实现与应用详解
May 06 Javascript
vue-cli3 热更新配置操作
Sep 18 Javascript
JS数组的赋值介绍
Mar 10 #Javascript
JS删除字符串中重复字符方法
Mar 09 #Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 #Javascript
jquery下div 的resize事件示例代码
Mar 09 #Javascript
现如今最流行的JavaScript代码规范
Mar 08 #Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 #Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 #Javascript
You might like
php简单计算页面加载时间的方法
2015/06/19 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
浅谈js中的闭包
2015/03/16 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
python3 求约数的实例
2019/12/05 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
python文件路径操作方法总结
2020/12/21 Python
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
什么是serialVersionUID
2016/03/04 面试题
你所在的项目是如何确定版本号的
2015/12/28 面试题
生产厂厂长岗位职责
2013/12/25 职场文书
科学育儿宣传标语
2014/10/08 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书