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