深蓝的天空

一只切图🐱的碎碎念

前端获取referrer可行性

深蓝 2016-10-01
Dev / 前端

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

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

产生 `referrer`

a链接跳转
使用Javascript重定向：
- location.href
- location.replace()
- window.open()
服务器端跳转
‘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;   
}

301的含义是“永久重定向” ↩
302的含义是“临时重定向” ↩
Chrome 下可以获取 ↩

发表回复取消回复

☞ 站点内容发生了更新
请点击获取最新内容！