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。

猜你喜欢

转载自blog.csdn.net/CamilleZJ/article/details/120306971