SEO优化
我们更专业

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

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

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

<!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’这个属性,就不会有这种情况发生了,就不会让用户在钓鱼攻击上,这样说大家就该就明白了,SEO笔记为大家讲解的都是通俗易懂的,很少使用专业的术语。

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” >

赞(0)
版权声明:本站文章及图片来自互联网及其他公众平台,版权归原作者,如有侵权请联系我们删除!
本文链接:https://www.seoccc.com/seojiaocheng/604.html