关于a标签target_blank使用rel=noopener

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于a标签target_blank使用rel=noopener相关的知识,希望对你有一定的参考价值。

参考技术A 先举个栗子

其中在a.html中有个超链接,点击后打开新的tab页,神奇的发现原tab页已经变成了谷歌页面。原因是使用 target=_blank 打开新的窗口时,赋予了新的窗口一些权限可以操作原tab页,其中 window.location 就是一个。不使用 rel=noopener 就是让用户暴露在钓鱼攻击上。

为了防止 window.opener 被滥用,在使用 targrt=_blank 时需要加上 rel=noopener
<a href="www.baidu.com" target="_blank" rel="noopener" >

rel=noopener 支持chrome49和opera36,不支持火狐,为了兼容需要加上 rel=noreferrer
<a href="www.baidu.com" target="_blank" rel="noopener norefferrer" >

eslint提示后根据文档实际尝试了一下,之前忽略的小问题居然还有这么大安全问题,网络安全不可小觑。

参考文章: eslint提示的官方文档

a标签属性 rel="noopener noreferrer"

当你浏览一个页面点击一个a标签连接 <a href="www.baidu.com" target="_blank"> 跳转到另一个页面时,

在新打开的页面(baidu)中可以通过 window.opener获取到源页面的部分控制权, 即使新打开的页面是跨域的也照样可以(例如 location 就不存在跨域问题)。  

rel=noopener 新特性

<a href="www.baidu.com" target="_blank" rel="noopener noreferrer"></a>

在chrome 49+,Opera 36+,打开添加了rel=noopener的链接, window.opener 会为null。在老的浏览器中,可以使用 rel=noreferrer 禁用HTTP头部的Referer属性,使用下面JavaScript代替target=‘_blank‘ 的解决此问题:

var otherWindow = window.open(‘http://keenwon.com‘);
otherWindow.opener = null;
otherWindow.location = url;

使用 window.open 打开页面,手动剑opener设置为null。

以上是关于关于a标签target_blank使用rel=noopener的主要内容,如果未能解决你的问题,请参考以下文章

<a>标签里rel写的是啥呀?

<a;标签rel属性详解

a rel=noopener

js如何实现a标签的rel属性????

关于网页的一些内容

a标签属性 rel="noopener noreferrer"