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. js获取编辑框游标的位置

    代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  2. 分析Java因为语言慢

    Java在早期的(例JDK1.2一旦)这是很慢.也许是因为有很多的优化,以提高装置的版本号,Java这是越来越快,所以这是现在非常的Java和C/C++什么什么慢速争议. 我想我自己的理解.谈论的影响 ...

  3. 【Android开发日记】妙用 RelativeLayout 实现3 段布局

    在设计过程中,我们经常会遇到这样的需求: 把一条线3控制,左对齐左控制,右侧控制右对齐,中间控制,以填补剩余空间. 或者一列内放3个控件,上面的与顶部对齐,以下的沉在最底部,中间控件是弹性的.充满剩余 ...

  4. C#将XML转换成JSON转换XML

    原文:C#将XML转换成JSON转换XML using System; using System.Collections.Generic; using System.Linq; using Syste ...

  5. CSS知识点：font小细节

    font是用来设置网页字体属性的关键字,使用频率非常高,大家也比较熟悉.它有两种写法,一种是简写,一种分开写. 简写--font:italic bold 12px/20px arial,sans-se ...

  6. 老调重弹--面向对象设计原则--S.O.L.I.D设计原则

    SRP - 单一职责原则 全称:Single Responsibility Principle 定义:每一个上下文对象(类.函数.变量等等)的定义应该仅仅包含单一的职责 描述:对象提供单一职责的高度封 ...

  7. 对student进行增删改

    drop package TechEd_pkg_Student; CREATE OR REPLACE PACKAGE TechEd_pkg_Student AS FUNCTION F_CREATE(p ...

  8. iOS基础 - iOS程序启动原理

    一.UIApplicationMain 在main.m的main函数中执行了UIApplicationMain这个方法,这是ios程序的入口点 int UIApplicationMain(int ar ...

  9. 【学习笔记】锋利的jQuery（四）AJAX

    一.load()方法 /* *如果没有参数传递,采用GET方式传递 *如果有参数,则自动转换成POST方式传递 *无论Ajax是否请求成功,请求完成后回调函数触发 */ load("test ...

  10. api的安全问题

      在给第三方系统提供api时,我们需要注意下安全问题. 比较常见的接口有http接口.以http接口为例.我们需要注意的几点: 1.只有被允许的系统才可以调用api 2.如果http请求被截获.也不 ...