JS使用iframe隐藏页面来源referrer技巧

前言与背景

前言

本文主要介绍在JavaScript中如何利用document.referrer属性来隐藏页面来源，供感兴趣的技术人员参考。

在某些业务场景下，隐藏页面的来路（Referrer）具有重要价值，这一技术在海外网赚领域应用尤为普遍。例如，流量分发方若不希望联盟平台追踪其流量的具体出处，便需要采取措施隐藏来源网站的referer信息。

document.referrer机制

document.referrer

document.referrer属性用于获取当前页面跳转前的来源链接。官方定义指出，:referrer 属性返回载入当前文档的上一个文档的URL地址。

该机制在实际应用中多见于广告推广及相关业务场景。

以下是一个具体示例：

假设用户从百度搜索页面点击链接跳转至w3cschool，此时在w3cschool页面中即可通过相关接口获取到referrer信息，该信息即为百度搜索的URL。

代码如下:

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

同样地，在w3cschool页面的浏览器控制台中也能直接读取到该referrer值。


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

利用iframe隐藏来源

清除来源

目前最常用的隐藏referrer手段是使用iframe嵌入页面。

下面通过一个具体案例进行演示：


<!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>

效果如图所示：

前言与背景