JavaScript中利用iframe隐藏document.referrer来源的方法

作者:纸飞机时间:2026-10-21 20:24:45浏览:511

本文探讨如何在JavaScript中隐藏页面跳转时的来源地址。通过解析document.referrer属性,了解其获取跳转前URL的机制。重点介绍利用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>

效果如图所示:

前言与背景 

当用户点击包含referrer信息的普通a标签时,在目标百度页面中可观察到referrer存在。

前言与背景

当用户点击嵌入在iframe内部的a标签时,在目标百度页面中观察到referrer为空字符串。

前言与背景

总结

以上就是本文介绍的全部内容,希望这些内容能对各位的学习或工作有所帮助。如有疑问,欢迎留言交流。

作者最新文章