关于a标签属性rel=”noopener noreferrer”
admin时间2024-06-28 19:35:54分类自学浏览80
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” >