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