document.referrer

document.referrer是用来获取跳转链接的来源，正规的解释是:referrer 属性可返回载入当前文档的文档的 URL。

实际中使用在广告相关业务中较多，包括推广等。

举个例子：

比如我们从百度中跳转到w3c，那我们从w3c中可以获取到referrer，这个referrer就是https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=document.referrer&oq=%E6%B8%85%E9%99%A4referrer&rsv_pq=bfd3dd180001b68f&rsv_t=876eCMwvcF%2Flc4tY42Va03DF7M83coNzQeRp4L2xYhUVk840K1J53CNfslM&rqlang=cn&rsv_enter=1&inputT=10344&rsv_sug3=111&rsv_sug1=109&rsv_sug7=000&rsv_n=2&bs=%E6%B8%85%E9%99%A4referrer

从http请求头部我们也可以找到这个referrer

Referer:https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=document.referrer&rsv_pq=ad59c4820001a9ba&rsv_t=d9cb%2Bi5AE7Ns3JHq3qbNca2i5LbazZfjc364gvq%2BclD%2Bs%2Fi44XuGYnb3giY&rqlang=cn&rsv_enter=1&rsv_sug3=12&rsv_sug1=11&rsv_sug7=100&sug=document.referrer&rsv_n=1

同样我们在w3c页面中控制台中也获取到这个referrer。

document.referrer

"https://www.baidu.com/link?url=zLE2dhkSRJRlNuL1zLsfITcCHKA3FsrHk5uED2tu0xy1…dNBzUaqr3MjKzyz-xPewdyNCPKmMvQrq&wd=&eqid=a28369d50001b64700000005586b49c2"

清除来源

最常用的还是使用iframe来隐藏referrer。

下面来看一个例子：

<!DOCTYPE html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>document.referrer</title>

</head>

<body>

    <h1>隐藏referrer</h1> 跳转至百度(有referrer):

    <a target="_blank" href="https://www.baidu.com/">test</a>

    <script type="text/javascript">

    var iframe = document.createElement('iframe'),

        html = '<!doctype html><head><meta charset="utf-8"></head><body>跳转至百度(无referrer):<a target="_blank" href="https://www.baidu.com/">referrer test</a></body>',

        src = 'javascript:document.write(window.frameElement.getAttribute(\'data-src\'))';

    iframe.setAttribute('data-src', html);

    iframe.setAttribute('src', src);

    iframe.width = '500';

    iframe.height = '300';

    document.body.appendChild(iframe);

    </script>

</body>

效果如图：

当我们点击有referrer的a标签的时候，在百度页面我们可以看到referrer。

当我们点击ifame中嵌套的a标签的时候，在百度页面我们可以看到referrer为空字符串。

document.referrer之隐藏来源的更多相关文章

  1. 深入理解document.referrer的用法

    前言 在JavaScript中,document对象有很多属性,其中有3个与对网页的请求有关的属性,它们分别是URL.domain和referrer. URL属性包含页面完整的URL,domain属性 ...

  2. 移动端返回上一页，刚需！document.referrer 详解

    返回上一页,在PC端我们可以使用:history.go(-1)或者history.back(),可以正常返回第一层.这样,我们不需要上一页的 url 具体是什么,只要使用 history 一般都没啥问 ...

  3. document.referrer和history.go(-1)退回上一页区别

    javascript:location=document.referrer;和javascript:history.go(-1);区别: 返回上一页,在PC端我们可以使用:history.go(-1) ...

  4. document.referrer的使用和window.opener 跟 window.parent 的区别

    偶尔看到了document.referrer,之前一直有点疑惑与window.opener 和 window.parent之间的区别 首先查了一下w3cSCHOOL, 上面的解释:referrer 属 ...

  5. document.referrer 特性

    最近需要用到document.referrer,但是在测试的时候,总是获取为空,百思不得其解. 于是发动百度,看了大量的文章没有一个说到点子上是为什么,后来偶然看到document.referrer ...

  6. 关于document.referrer的使用需要注意

    项目使用到一个场景,ajax请求返回无权限,跳回登录页面,登录后自动返回之前的浏览页,跳转由前端处理,于是想到document.referrer,但是对可靠性不确定,特意搜索了一下相关资料,大致整理如 ...

  7. ashx+jsonp+document.referrer

    -- 一年前学的JSONP 跨域,一年后的今天相关知识点基本忘光.花了一天时间重新学习,再次感谢各位前辈的帖子,特此记录如下. --html <!DOCTYPE html PUBLIC &quo ...

  8. js获取浏览器上一访问页面URL地址，document.referrer方法

    如题,可用document.referrer方法获取上一页面的url 但是也有不可使用的情况 直接在浏览器地址栏中输入地址: 使用location.reload()刷新(location.href或者 ...

  9. javascript document.referrer 用法

    document对象的referrer属性,返回导航到当前网页的超链接所在网页的URL. 举例: 1. a.html文件内容如下: <a href="b.html">浏 ...

随机推荐

  1. SQL点滴11—重置win7登录密码影响SQL登录

    原文:SQL点滴11-重置win7登录密码影响SQL登录 2011-04-20  修改机器登录密码后不能登录SQL Server 今天发现一个很有趣的现象.公司的电脑每两个月就会提示重置登录密码,今天 ...

  2. SQLServer中处理每天四亿三千万记录

    我是如何在SQLServer中处理每天四亿三千万记录的   首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文中有不对的地 ...

  3. OCP-1Z0-051-题目解析-第10题

    10. View the Exhibit and examine the structure of the PROMOTIONS table. Each promotion has a duratio ...

  4. Objective-C和Swift

    在项目中同时使用Objective-C和Swift 苹果发布的Swift语言可以和之前的Objective-C语言同时存在于一个项目中. 可能有人会认为是同一个类文件中既可以有Objective-C也 ...

  5. jquery-制作选项卡

    强大的jquery-制作选项卡   最近在学习jquery,特地把今天写的一个选项卡源码贴出来.只是做只是梳理,大神们请不要吐槽,如果有更好的方法,欢迎指点.谢谢. css <style> ...

  6. DBMS_LOB包的使用

    DBMS_LOB包的使用 1.  dbms_lob.append( dest_lob  IN  OUT  NOCOPY  BLOB, src_lob  IN  BLOB) dbms_lob.appen ...

  7. 10 Super Useful Tools for Web Designers

    36个扁平化设计的iphone和ipad应用界面设计案例 http://designwoop.com/2014/04/36-examples-of-flat-iphone-and-ipad-appli ...

  8. Memcached在.Net中的基本操作

    Memcached在.Net中的基本操作 一.Memcached ClientLib For .Net 首先,不得不说,许多语言都实现了连接Memcached的客户端,其中以Perl.PHP为主. 仅 ...

  9. OpenGL绘制棱锥,剔除

    /** * 缓冲区工具类 */public class BufferUtil { /**  * 将浮点数组转换成字节缓冲区  */ public static ByteBuffer arr2ByteB ...

  10. 使用UpdatePanel控件

    使用UpdatePanel控件(二) UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编 ...