关于a标签target_blank使用rel=noopener

一、为什么要使用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="b.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.html中有个超链接，点击后打开新的tab页，神奇的发现原tab页已经变成了谷歌页面。原因是使用target=_blank打开新的窗口时，赋予了新的窗口一些权限可以操作原tab页，其中window.location就是一个。不使用 rel=noopener就是让用户暴露在钓鱼攻击上。

window.opener

二、使用rel=noopener

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

三、rel=norefferrer

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

四、eslint提示

eslint提示

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

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

关于a标签target_blank使用rel=noopener

一、为什么要使用rel='noopener'？

二、使用rel=noopener

三、rel=norefferrer

四、eslint提示

推荐阅读更多精彩内容