写在前面
无意中发现从百度搜索打开的页面可以通过document.referrer
拿到上一个页面的完整URL(地址格式一般类似https://www.baidu.com/link?url=xxxxxxxx
),而通过谷歌搜索打开的新页面只能拿到上一个页面的域名、不包括path部分(形如https://www.google.com/
),猜测一定是百度做了什么特殊处理,测试了一下:
测试代码:
fetch('https://www.baidu.com/link?url=q6OfHMOYzezMkqPOWkjzgWWN4uVksfU7vRV8vtAVaWyij5q8btXbGtCT19Ok3Zq1ob48gBhUy_7zD9nW_lJb5mwD4XMFGAZdnHz6biD0_ma&wd=&eqid=edb0ea790001521b000000045fbf319a')
.then(resp => resp.text())
.then(resp => console.log(resp))
返回的代码里面没有看到什么特别的,然后又看了下HTTP header,果不其然:
什么是Referrer-Policy
直接搬运MDN内容:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Referrer-Policy
补充几点信息
referer 实际上是 “referrer” 错误拼写
需要注意的是,HTTP的referer
头部实际上是referrer
误拼写,由于历史原因只能将错就错下去,详见:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Referer 。
但是,有些地方没有将错就错,比如document.referrer
和Referrer-Policy
头部。
a标签并不支持referrer属性
其实,a标签并没有这个属性,实际测试发现确实不生效,网上有很多误导人的文章,比如下面这个,其实是错误的:
正确拼写是referrerpolicy
(这个属性比较新,可能存在一定兼容性问题)。
rel
在给a
标签使用target时,考虑添加rel="noopener noreferrer"
以防止针对 window.opener
API 的恶意攻击。