一笛丙、為什么要使用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.</SCRIPT>
</body>
</html>
其中在a.html中有個超鏈接笨鸡，點擊后打開新的tab頁坦冠，神奇的發(fā)現(xiàn)原tab頁已經(jīng)變成了谷歌頁面哥桥。原因是使用target=_blank打開新的窗口時，賦予了新的窗口一些權(quán)限可以操作原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提示后根據(jù)文檔實際嘗試了一下，之前忽略的小問題居然還有這么大安全問題旅东，網(wǎng)絡安全不可小覷十艾。
參考文章：eslint提示的官方文檔
