前端获取referrer可行性

referrer 定义

HTTP来源地址(referer,或HTTP referer)是HTTP表头的一个字段,用来表示从哪儿链接到目前的网页,采用的格式是URL。换句话说,借着HTTP来源地址,目前的网页可以检查访客从哪里而来,这也常被用来对付伪造的跨网站请求。via Wiki

各个场景下referrer获取测试

测试代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var referrer = document.referrer;
        console.log(typeof referrer)
        document.write(referrer)
    </script>
</head>
<body>
</body>
</html>
场景 Edge IE11 Firefox Chrome Safari
链接内打开
直接在地址栏中输入A的地址 × × × × ?
从B页面用链接跳转到A页面 ?
从B页面用链接跳转到A页面(target="blank")` ?
form表单提交 ?
iframe ^[1]
iframe中B页面链接跳转到A页面(target="_self") ?
iframe中B页面链接跳转到A页面(target="_top") ?
iframe中B页面链接跳转到A页面(target="_parent") ?
鼠标操作
从B页面鼠标中键打开A链接 ?
在B页面鼠标拖动链接A至地址栏 × × × × ?
使用浏览器的前进、后退按钮 ?
JavaScript操作
使用window.location.href打开A页面 ?
使用window.open打开页面 ?
使用window.replace打开页面 ?
meta配置
使用http-equiv跳转A页面 × × × ?
服务器端
301跳转 ?
302跳转 ?
HTTP/HTTPS
HTTP跳转HTTPS ?
HTTPS跳转HTTP × × × ?

小结

不会产生 referrer

  1. 从收藏夹点击链接、浏览器自定义主页打开、在浏览器上手动输入地址、鼠标拖拽链接到地址栏打开
  2. http-equiv跳转 ^[2]
  3. ‘HTTPS’向’HTTP’跳转

产生 referrer

  1. a链接跳转
  2. 使用Javascript重定向:
    • location.href
    • location.replace()
    • window.open()
  3. 服务器端跳转
  4. ‘HTTP’向’HTTPS’跳转

老版本IE 问题

IE 下面window.location.href不发送Referer
解决思路:

var url = 'http://www.phptpl.com/';
if(/MSIE (\d+\.\d+);/.test(navigator.userAgent) || /MSIE(\d+\.\d+);/.test(navigator.userAgent)){
    var referLink = document.createElement('a');
    referLink.href = url;
    document.body.appendChild(referLink);
    referLink.click();
}else{
    location.href = url;
}
  1. 解决IE中javascript的location跳转获取不倒来源referer的方法
  2. IE 下面window.location.href不发送Referer
  3. 详解js中的document.referrer
  4. Difference between _self, _top, and _parent in the anchor tag target attribute
  5. 从获取 Referrer 的方法说起
  6. 多次重定向中http-referer的变化

[1]:
[2]: Chrome 下可以获取

发表评论

电子邮件地址不会被公开。 必填项已用*标注