如何修改页面的refer、opener

发表于

背景

默认的浏览器请求都会附带referer信息为上一页面的url，可以通过 document.referrer 来查看，而 _blank 打开一个新页面时 window.opener 能获取到来源页面的window对象。

比如在密码找回页面，点击链接可能会跳转到对应的三方邮件服务网站，这种场景就不希望携带当前的refer信息，以避免暴露敏感数据。

并且 window 对象暴露这个危险性也不用说了。

下面来聊聊我们如何在一些特定的场景避免页面内的请求附带refer信息。

另外：

  • Safari ITP协议 已经不会发送referer的详细Path了 。
  • Http 请求头里的 referer 是referrer的错误拼写

a标签 noreferrer

  • 兼容性：Windows10 IE11 +

格式如下：

1
2
3
4
5
6
7
8
禁止 refer
<a href="https://www.taobao.com" rel="noreferrer">noreferrer</a>

禁止 opener
<a href="https://www.taobao.com" rel="noopener">noopener</a>

可以同时使用
<a href="https://www.taobao.com" rel="noreferrer noopener">noopener</a>

前端跳转

  • 兼容性：Ok

可以使用如下形式跳转，隐藏 refer 和 opener

当前页打开
1
2
3
function open_without_referrer(link){
    document.body.appendChild(document.createElement('iframe')).src='javascript:"<script>top.location.replace(\''+link+'\')<\/script>"';
}
新窗口打开
1
2
3
function open_new_window(full_link){ 
    window.open('javascript:window.name;', '<script>location.replace("'+full_link+'")<\/script>');
}

参考：https://segmentfault.com/q/1010000000123441

Referrer-Policy

  • 兼容性：IE 不兼容，safari 不兼容

Referrer-Policy 首部用来监管哪些访问来源信息——会在 Referer 中发送——应该被包含在生成的请求当中。

包含如下：

  • Referrer-Policy: no-referrer # 不随请求发送
  • Referrer-Policy: no-referrer-when-downgrade
  • Referrer-Policy: origin
  • Referrer-Policy: origin-when-cross-origin
  • Referrer-Policy: same-origin
  • Referrer-Policy: strict-origin
  • Referrer-Policy: strict-origin-when-cross-origin
  • Referrer-Policy: unsafe-url

也可以通过 meta 配置：

1
<meta name="referrer" content="no-referrer">

查看详细：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Referrer-Policy