ESLint的確是個好東西，在使用airbnb的JavaScript語法校驗工具時，如下的<a>鏈接標籤報出了安全錯誤：
<a className="link" href="http://www.honeywell.com/terms-conditions" target="_blank" >Terms & Conditions</a>
錯誤提示爲Prevent usage of unsafe target='_blank' (react/jsx-no-target-blank)，當我們希望使用target=_blank來打開一個新標籤頁時，一定要加上rel='noreferrer noopener'，否則你的網頁就會存在很嚴重的安全問題！！！
危險的target='_blank'
假設在瀏覽A頁面時，通過<a target="_blank" href="http://baidu.com/">Click</a>標籤鏈接到了B頁面，那麼在B頁面中通過window.reopner即可獲取A頁面的window對象，這樣的話即可拿到部分的A頁面的控制權，即使B頁面是跨域的也可以拿到該控制權！
我們編寫兩個頁面進行簡單的測試，A頁面（index.html）中有一個<a>標籤，以及一個’待宰割‘的<div id='test'></div>：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
</head>
<body>
<div id="test"></div>
<a href="./test.html" target="_blank">Click</a>
</body>
</html>
B頁面(test.html)中添加如下的js代碼來試圖篡改A頁面：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
</head>
<body>
Test page
<script type="application/javascript">
if (window.opener) {
// opener.location = 'http://baidu.com'
opener.document.getElementById('test').innerHTML = 'Now A page is revised!';
}
</script>
</body>
</html>
測試結果顯示A頁面<div>標籤被篡改了。該例子還只是簡單的頁面內容改動，但如果有人惡意的使用opener.location將A頁面跳轉到一個釣魚網站，而此時用戶的關注點還在B頁面上，等用戶返回'A頁面'輸入了隱私信息，那麼後果不堪設想。
使用rel=noopener noreferrer
給<a>標籤添加rel=noopener可以使window.opener在Chrome 49 and Opera 36以上版本中爲null。如果點擊A頁面上的鏈接跳轉到了B頁面，則稱A頁面爲B頁面的referrer（來源頁面），通過referrer我們可以知道網站的流量從何而來。
注：可以通過document.referrer拿到頁面的來源
參考
https://mathiasbynens.github.io/rel-noopener/
https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-target-blank.md
作者：明澤Calligr
鏈接：https://www.jianshu.com/p/b89dc1af1f07
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯繫作者獲得授權並註明出處。