详谈javascript中document.referrer的兼容性

最新推荐文章于 2022-01-18 22:02:06 发布

原创最新推荐文章于 2022-01-18 22:02:06 发布 · 1.9w 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #浏览器 #网络

javascript 同时被 3 个专栏收录

49 篇文章

订阅专栏

js与SEO

5 篇文章

订阅专栏

浏览器兼容性

3 篇文章

订阅专栏

本文详细解析了referrer的概念及其在网络传输中的作用，并探讨了不同浏览器环境下referrer的获取情况，以及其对广告流量监控的影响。

遇见了，却来不及相识；相识了，却来不及熟悉；熟悉了，却还是要说再见。既然每天都见面，为何不提前熟悉一下呢？

读书是为了明理，我们还是带着问题来了解referrer的重要性和用途吧！

一：什么是referrer？

1. referrer中文意思是：来源，推荐人。网络意义是指网站的来路，又称“来源”，HTTPReferrer是header的一部分，当浏览器向web服务器发送请求的时候，一般会带上referrer，告诉服务器用户从哪个页面链接过来的，服务器可以获得referrer的信息用于加工处理。比如：我从我的页面连接到朋友的页面，我朋友的服务器就能够从 HTTP Referer中统计出每天有多少个用户点击我主页上的链接访问他的网站。(注意：Referer其实应该是英文单词Referrer，编写http标准的人也就将错就错了。所以嘛，要敢于向权威质疑)。
2. 因为referrer可能是私有的信息，或者可能泄露其他私有的信息来源，所以，建议用户选择是否发送reffer域。例如：浏览器客户端可能有切换选项来公开、匿名浏览，发送refererfrom信息。如果通过安全协议传输，客户端不应该在http请求中包括referer域。
3. referrer有时候也被用作防盗链（即下载网页资源的时候判断源地址是不是在网站域名之内，否则就不能下载或者显示），比如CSDN都是通过Referer页面来判断用户是否能够下载代码或者资源。
4. 当然，对于某些黑客可能伪造Referer来获得某些权限,在设计网站时一定需要考虑到这个问题。但是对于浏览器来说，以下情况是不会发送Referer，因为可能有潜在的安全问题：
* 用户手动输入网址或是从收藏夹中访问
* 对https等加密协议是不带Referrer的。
5. 处于以上等各种原因，有时候我们通过javascript中document.referrer获取不到来源，下面总结一下我们开发过程中碰到的丢失Referrer的情况。

二：模拟丢失Referrer的现象？

首先我们写个公用的test代码，test.html页面的代码是：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title> 
    </head>
    <body>
        欢迎来到test页面
    </body>
    <script>
        alert('来源是：'+ document.referrer);
    </script>
</html>

1. window.open方式打开新窗口

//方法一：直接用window.open()跳转在ie6,7,8 11丢失Referrer ,在edge，opera、chrome、Firefox都能拿到Referrer，看来用window.open()直接，去来源对于新一代浏览器都不适用。
    window.open('test.html');//

下面是用windows.open()里面的内容进行间接跳转，都是精心测试的结果：

        var url = 'http://localhost/04interesting/11js/05js-Internet/01referer/all/test.html';

        //方法二：window.location.href在每个浏览器都可以获取referrer
       window.location.href = 'test.html';

        //方法三：opera，chrome，edge，ie11，qq，uc，丢失referrer，但是Firefox不丢失，ie6无法跳转
        window.open('javascript:window.name;','<script>location.replace("'+url+'")<\/script>');

        // 方法四：opera，chrome,qq,uc丢失referrer，但是Firefox不丢失，  ie6，ie11，edge无法跳转
        window.open('data:text/html,<html><body><script>location.replace("'+url+'")<\/script></body></html>');

        // 方法五：opera,chrome,ie6,ie11,edge,qq,uc丢失referrer ,但是Firefox不丢失，
        window.open('javascript:location.replace("' + url + '")');

        //方法六：opera,chrome Firefox,uc,qq丢失来源 ,      ie6，ie11，ie9,edge不跳转
        window.open('data:text/html,<html><head><meta http-equiv="Refresh" content="0;' + url + '"/></head><body></body></html>');

2. 用refresh方法刷新跳转到新窗口

<!--<!DOCTYPE html>-->
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Refresh" content="0;URL=test.html">
        <title></title>
    </head>  
    <body>                             
        <a href="test.html">点我到test.html</a>    
    </body>                    
</html>

对<meta http-equiv="Refresh" content="0;URL=test.html">：总结ie6,ie11,edge,火狐不能，google,opera上可以获取到Referrer,另外在qq，360和uc浏览器上都可以获取来源
3. 创建iframe的方法

        var ifm = document.createElement('iframe');
        ifm.src ='test.html'; 'javascript:"<script>top.location.replace(\'./test.html\')<\/script>"';
        document.body.appendChild(ifm);

用iframe在opera，chrome,uc,360,上获取不到Referrer，在ie6,ie11,edge,firefox上能获取到。
4.location.search.replace(‘?url=’,”),即：跳转代理页面的方法
我们先创建一个代理页面 middle.html

        var url = location.search.replace('?url=','');
        // location.replace(decodeURL(url));
        alert(location);
        location.replace(decodeURI(url));

然后我们通过另一个页面来跳转到middle.html页面上：

    //此方法在ie6中不能跳转
        var url = 'test.html';
        window.open('bridge.html?url='+ encodeURI(url));

*5.用封装好的跳转js代码，通过a标签直接跳转

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../../../../../lib/jq1.8.3.jquery.mini.js" charset="utf-8"></script>
        <script src="./noreferrer.js"></script>
    </head>
    <body>
        <a href="./test.html" rel="noreferrer">点击我到test.html,而且不带来源</a>
    </body>
</html>

6，用h5的方法大部分浏览器都获取不到来源，代码如下：
方法一：<meta name="referrer" content="never"> 和widnow.open();

<!--<!DOCTYPE html>-->
<html>
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="never">
    <title></title>
</head>
<body>
    <a href="test.html">点我到test.html</a>
</body>
<script>
    //在ie6,ie11,360,uc,chrome,opera都不能拿到Referrer
        window.open('test.html');
</script>
</html>

方法二：a标签中的rel=”noreferrer”

<a href="test.html" target="_blank" rel="noreferrer">点我到test.html</a>

5.鼠标拖拽文档打开窗口
全部都丢失referrer;
6.从https地网站跳转到http的网站
浏览器是不会发送referrer地.这个各大浏览器地行为是一样地.
例如，我们在https下使用google reader或是gmail地时候，点击某个链接去到另外一个网站，那么从技术上来说，这样地访问和用户直接键入网址访问是没有什么分别地.

三：referrer对于广告流量监控地影响？
对于广告监控流量来说，referrer非常重要，目前国内好多用了google adsense广告的网站，都使用了window.open的方式来打开广告链接，因此，ie下会丢失referrer，由于ie在市场占得比重很大，很多流量统计工具会因此把这一部分流浪归入“直接流量”，和用户直接键入网址等价了。因此我们必须深入了解referrer在每个浏览器的落脚点。
以上均为原创，当然也有参考部分，以下是参考汇总的网址，我希望把东西分享开，如有错误请大家及时反馈，愿意分享才能让世界更美好！
http://www.cnblogs.com/zhangzt/archive/2009/12/24/1631253.html
http://www.tuicool.com/articles/YJjeq2U
http://jishu.admin5.com/biancheng/140311/840.html
http://www.gbtags.com/gb/share/4907.htm