关于a标签属性rel=”noopener noreferrer”

关于a标签属性rel=”noopener noreferrer”,为了防止window.opener被滥用,在使用targrt=_blank时需要加上rel=noopener,rel=noopener支持chrome49和opera36,不支持火狐,为了兼容需要加上rel=noreferrer.

1、网站为什么要使用a标签rel=’noopener’这个属性

大兵先给大家举个例子说明一下,请看以下代码:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
</head>
<body>
<a href=”a.html” target=”_blank”>da</a>
</body>
</html>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
</head>
<body>
<SCRIPT>window.opener.location.href =”http://google.com”</SCRIPT>
</body>
</html>

大家看以上代码中a标签有个超级链接,点开后弹出新的tab页面,但发现点开后不是自己想的的页面,而变百民google页面,主要原因是代码赋予了tab页面新的权限,如果网站a标签超级链接中使用了rel=’noopener’这个属性,就不会有这种情况发生了,就不会让用户在钓鱼攻击上,这样说大家就该就明白了,大兵为大家讲解的都是通俗易懂的,很少使用专业的术语。

2、使用a标签rel=’noopener’属性

使用a标签rel=’noopener’属性就是为了防止止window.opener功能被滥用了,因此在A标签超级链接中加上了targrt=_blank就需要加上rel=’noopener’这个属性,代码如下所示:

<a href=”www.***.com” target=”_blank” rel=”noopener” >

3、配合使用a标签rel=’norefferrer’属性

a标签rel=’noopener’属性支持chrome49和opera36浏览器,但是不支持火狐浏览器,但为了能够兼容火狐浏览器,所以要加上a标签rel=’norefferrer’ 这个属性。

<a href=”www.baidu.com” target=”_blank” rel=”noopener norefferrer” >

原创文章,作者:大兵,如若转载,请注明出处:https://www.zhuzhouren.com.cn/seojishu/1205.html

发表评论

登录后才能评论
联系我

平时工作忙:合作还是咨询SEO服务,请简明扼表明来意!谢谢!

在线咨询:点击这里给我发消息

邮件:dabingseo@zhuzhouren.com.cn

工作时间:周一至周六,10:30-24:30,节假日休息

个人微信
个人微信
分享本页
返回顶部