a标签rel=”noopener noreferrer”属性的作用详解

<a href="https://www.xinshouzhanzhang.com/" target="_blank">跳转到一个新页面</a>

没有rel=“noopener noreferrer”的情况下使用target=“_blank”是有安全风险，超链接a标签的rel="noopener noreferrer"属性是一种新特性，它能让网站更安全，超链接添加rel="noopener noreferrer"来防止钓鱼网站，因为它获取的window.opener的值为null。

"Google官方解释"

 大致解释如下:

当您的页面链接至使用 target="_blank" 的另一个页面时，新页面将与您的页面在同一个进程上运行。 如果新页面正在执行开销极大的 JavaScript，您的页面性能可能会受影响。

target="_blank"也是一个安全漏洞。新的页面可以通过window.opener 访问您的窗口对象，并且它可以使用 window.opener.location = newURL将您的页面导航至不同的网址。

其实就是当你使用target="_blank"打开一个新的标签页时，新页面的window对象上有一个属性 opener ,它指向的是前一个页面的window对象，因此，后一个新打开的页面就可以控制前一个页面了，事情就是这么的可怕。而且不管它是否跨域了，都是可以的。

在新打开的页面中，通过window.opener可以获取到源页面的部分控制权，即使新打开的页面是跨域也可以获取部分控制权。当a标签中加入了rel="noopener noreferrer"属性，就会window.opener会为null。

标签：rel,window,opener,noreferrer,noopener,页面
来源： https://blog.csdn.net/CamilleZJ/article/details/120306971