Javascript中document.referrer隐藏来源的方法

前言

本文为大家讲解的是关于Javascript中document.referrer隐藏来源的方法探讨，感兴趣的同学参考下。

关于隐藏来路 Referrer 在某些情况下很有用，国外网赚界使用的非常广泛。比如流量提供方由于不想让联盟知道自己的流量来源，就需要隐藏自己来源网站的 referer。

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为空字符串。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

赞 (0)

相关推荐

  • javascript的document.referrer浏览器支持、失效情况总结

    javascript的document.referrer浏览器支持、失效情况总结

    在流量统计服务中都有Traffic source这个功能.Traffic source是针对访次级别的概念,换句话说,当访次建立的时候,landing page的流量来源即是该访次的Traffic source.虽然Traffic source有很多种,不过不幸的是依据现在JS,获得Traffic source的途径只有两种--document.referrer.window.opener.更不幸的是,window.opener适用的场景不多,而document.referrer非常的弱,以至于

  • JavaScript中的document.referrer在各种浏览器测试结果

    前段时间需要通过 JavaScript 获取页面的来源,这个操作很简单,使用 document.referrer 就可以获取到了.不过,实际应用中还是有很多意外情况,这儿简单整理一下. 首先遇到的问题,是从 HTTPS 页面转到 HTTP 页面后,document.referrer 的值为空.出于安全性考虑,很多网站的一些重要页面(比如淘宝的登录页面)都会使用 HTTPS 协议.如果某个未登录用户在页面 A(HTTP 页面)点击了页面 B(HTTP 页面)的链接,但页面 B 需要用户登录,于是先

  • javascript document.referrer 用法

    举例: 1. a.html文件内容如下: <a href="b.html">浏览b.html </a> 2. b.html文件中的内容如下: <body> <script type="text/javascript"> document.write(document.referrer); </script> </body> 3. 则在通过a.html中的超链接访问b.html的时候,显示的结果是

  • JavaScript中document.referrer的用法详解

    JavaScript中document.referrer的用法详解

    前言 在JavaScript中,document对象有很多属性,其中有3个与对网页的请求有关的属性,它们分别是URL.domain和referrer. URL属性包含页面完整的URL,domain属性中只包含页面的域名,而referrer属性中则保存着链接到当前页面的那个页面的URL. 前面两个很好理解,而referrer属性简单来说就是上一个页面的URL.那么这个属性具体有什么用处呢? 在H5页面中,我们经常要在头部加个返回上一个页面按钮,就像下面这样的: 页面头部 点击左侧的元素可以返回到上

  • js中document.referrer实现移动端返回上一页

    返回上一页,在PC端我们可以使用:history.go(-1)或者history.back(),可以正常返回第一层.这样,我们不需要上一页的 url 具体是什么,只要使用 history 一般都没啥问题. 但是在移动端,如果想要返回上一页.比如从A页面跳到B页面,如果B页面想返回A页面,为了防止不会跳错,必须要有一个 <  按钮,给它加 history.go(-1) ,返回上一层. <a href="javascript:history.go(-1)" rel="

  • Javascript document.referrer判断访客来源网址

    Javascript document.referrer判断访客来源网址

    今天遇到一个蛮有趣的问题,由于公司与一些厂商有合作关係,因此双方的网站中也都会交换连结,当今天合约也终止后,但对方始终一直没把连结的部分下掉时,这有时会产生一些不必要的误会,让一般的使用者认为双方还有合作关係,固然说这样子可赚到一些流量,但相对的也造成了一些误解,因此上头则希望能否去判断使用从它站连来时,就把它拒绝在门外,这让梅干退了三步,原本以为要从主机来作设定,上网找了一些文件后,才发现只要用简单几行的javascript,就可抓到使用的来源,以及作出一些防范的措施.效果图: 复制代码 代码

  • IE下document.referrer 拒绝访问的解决方法

    用document.referrer回到来源页(也可以称作上一页)时非常方面,我们不用知道来源页复杂的url,而且document.referrer回到来源页时会重新加载,而不是上一次的状态,所以说非常的方便. 但是在IE中用javascript做跳转,比如用window.location.href=""; 跳转到的页面无法取到浏览器请求的HTTP referrer,IE浏览器会报脚本错误"拒绝访问",因为IE清空了document.referrer. 而其他主流浏

  • Javascript中document.referrer隐藏来源的方法

    Javascript中document.referrer隐藏来源的方法

    前言 本文为大家讲解的是关于Javascript中document.referrer隐藏来源的方法探讨,感兴趣的同学参考下. 关于隐藏来路 Referrer 在某些情况下很有用,国外网赚界使用的非常广泛.比如流量提供方由于不想让联盟知道自己的流量来源,就需要隐藏自己来源网站的 referer. document.referrer document.referrer是用来获取跳转链接的来源,正规的解释是:referrer 属性可返回载入当前文档的文档的 URL. 实际中使用在广告相关业务中较多,包

  • javascript 中模板方法单例的实现方法

    javascript 中模板方法单例的实现方法 模板方法单例 模板方法的定义:父类中定义一组操作算法骨架,将一些实现步骤延伸到子类中,使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤. 代码块 html部分,例如: <div id="content"></div> js部分,例如: //格式化字符串方法 function fromateString(str, data) { return str.replace(/\{#(\w+)#\}/g,

  • js基础之DOM中document对象的常用属性方法详解

    -----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返回对文档中所有 Anchor 对象的引用.还有document.links/document.forms/document.images等 2  document.URL       返回当前文档的url 3  document.title       返回当前文档的标题 4  do

  • JavaScript中windows.open()、windows.close()方法详解

    windows.open()方法详解: window.open(URL,name,features,replace)用于载入指定的URL到新的或已存在的窗口中,并返回代表新窗口的Window对象.它有4个可选的 参数: URL:一个可选的字符串,声明了要在新窗口中显示的文档的 URL.如果省略了这个参数,或者它的值是空字符串,那么新窗口就不会显示任何文档. name:一个可选的字符串,该字符串是一个由逗号分隔的特征列表,其中包括数字.字母和下划线,该字符声明了新窗口的名称.这个名称可以用作标记

  • 关于Javascript中document.cookie的使用

    设置cookie 每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie: document.cookie="userId=828"; 如果要一次存储多个名/值对,可以使用分号加空格(; )隔开,例如: document.cookie="userId=828; userName=hulk"; 在cookie的名或值中不能使用分号(;).逗号(,).等号(=)以及空格. 在cookie的名中做到这点很容易,但要保存的值是不确定的

  • javascript中的后退和刷新实现方法

    <input type=button value=刷新 onclick="window.location.reload()"> <input type=button value=前进 onclick="window.history.Go(1)"> <input type=button value=后退 onclick="window.history.go(-1)"> <input type=button

  • JavaScript中document.activeELement焦点元素介绍

    JavaScript中document.activeELement焦点元素介绍

    目录 1.默认焦点在body 2.文本框手动获取焦点 3.通过focus获取焦点 4.tab切换焦点 5.document.hasFocus()判断是否获取焦点 前言: 有时需要获取页面焦点在哪个元素上,通过焦点可以判断用户是否在操作页面等信息.以前不太方便,要自己记录,html5增加了document.activeElement属性可以获取到当前激活的焦点. 1.默认焦点在body 页面加载后,document.activeElement是在body上: console.log(documen

随机推荐