logo

rel=noopener/noreferrer简介

a标签的rel属性通常用于表示当前文档与目标跳转文档之间的关系。其中有两个属性noopenernoreferrer,能够增强网站的安全性,与其他网站隔离。
对设置了target='_blank'属性的 a 标签而且跳转到外部网站的链接添加rel='noopener noreferrer'被认为是Best Practice

noopener

window.opener指向打开当前文档的文档,如果没有则为null。如果在当前文档打开一个新的文档,因为前一个文档被销毁所以window.opener也为null
使用window.open(url,'_blank')或者设置了target='_blank'属性的 a 标签在 A 文档打开一个新的标签页 B 文档时,此时 B 文档可以对
A 文档进行有限的访问(如不能访问 DOM)且不受跨域的影响。
但是即使是有限的访问权也造成了安全隐患,因为其可以访问location对象,这样在 B 文档就可以修改 A 文档 URL(例如高仿钓鱼网站,获取用户隐私信息)。
当我们对a标签元素设置rel=noopener后,浏览器则不会将当前文档对象传给其他源的文档,是我们的网站与其他 网站隔离,不受目标文档的控制。

1
<a href="http://other.site" target="_blank" rel="noopener">LINK</a>

兼容性

noreferrer

我们知道当我们发起一个HTTP请求时,它会附带Referrer请求头来标识请求来源。当在 A 文档点击链接 B 文档时,请求 B 文档的请求头Referrer中会附带 A 文档的 URL 信息。
如果 B 文档属于外部文档,那么则存在外部安全隐患,例如原网站被黑,根据请求来源返回对应高仿钓鱼网页,从而窃取用户信息。
因此我们可以设置rel=noreferrer来避免Referrer信息的泄露。

1
<a href="http://other.site" target="_blank" rel="noreferrer">LINK</a>

兼容性

参考链接