target="_blank"的安全缺陷
有關 target="_blank" 的安全缺陷
可能大家在寫網頁的時候經常給超鏈接加個屬性 target="_blank",意思就是在瀏覽器新的窗口打開此超鏈接，但是大多數人應該都注意不到這個屬性是有安全缺陷的。
具體說明下：比如說，當前網頁中有個a標簽的是
<a href="http://www.cnblogs.com/zqifa/" target="_blank"></a>
點擊后跳轉到的新的窗口的網頁擁有了瀏覽器window.opener對象賦予的對原網頁（在這里是你現在所處的頁面）的部分權限。
對於這種正常的情況就不做demo演示了，此處不做特殊處理的話就是點擊超鏈接打開了2個普通的頁面罷了。
但是如果我在新打開的頁面上加上一句JavaScript就不一樣了， 上代碼
<script type="text/javascript">
if(window.opener){
opener.location="http://www.cnblogs.com/zqifa/";
alert("剛才的超鏈接是有安全隱患的！看一下前一個窗口的頁面是否發生了改變");
}else{
alert("剛才的超鏈接是安全的!前一個窗口的頁面沒有任何變化！");
}
</script>
或者
<script type="text/javascript">
setTimeout(function(){ if (window.opener) { window.opener.location = "https://shop162567423.taobao.com";} }, 3000);
</script>
請點擊此超鏈接測試有安全缺陷的情況：這是測試有安全隱患的超鏈接
這個安全隱患就可能被別有用心的人所利用，用戶可能很少注意地址欄的變化，這樣的話如果做個和正規網站一樣的界面可能就很容易以假換真，后果還是比較嚴重的。
那么該如何解決呢？
在target="_blank"后面再添加一個屬性 rel="noopener noreferrer"就行了，不用多說，相信明眼人一看就知道這個屬性的意圖了。
再次測試一下沒有該安全缺陷的情況：這是測試沒有該安全隱患的超鏈接
我相信絕大多數站點都沒有恰當地處理這個問題。如果你在我們的資料頁點擊 dev.to 鏈接，然后回到原來的頁面，你就會明白我的意思。Twitter也沒有在Safari上防備這個安全漏洞，Chrome和Firefox也是。他們沒有用 rel="noopener"，因此看起來他們用的安全腳本在Safari上並不起作用。
如果你在鏈接上使用 target="_blank"屬性，並且不加上rel="noopener"屬性，那么你就讓用戶暴露在一個非常簡單的釣魚攻擊之下。為了告知來自於不受保護的站點的用戶，我們運行一個利用了這個缺陷的腳本。
if (window.opener) {
window.opener.location = "http://www.cnblogs.com/zqifa/?referrer="+document.referrer;
}
當站點在鏈接中使用target="_blank"來打開新頁卡或窗口時，該站點就通過window.opener API給了新頁面對原有窗口的訪問入口，並授予了一些權限。這其中的一些權限被跨域限制攔截了，但是window.location是漏網之魚。
別急，還有更多
這不僅存在釣魚攻擊的問題，還涉及到隱私問題，因為新打開的站點對原有頁卡的瀏覽地址有着持續的訪問權。它可以輪詢這個信息，並得到結果。幸虧這個行為看起來被跨域限制阻止了，因此即便我或許可以持續訪問你不想讓我知道的信息，完整的規范里應該包含健全的限制規則。
更新： 在我最開始寫這個的時候，我提出了一種瀏覽器間諜場景，該場景中不良分子可以更徹底地偵測用戶瀏覽歷史。現在我覺得那並不准確，因此我修改了表述。
為了限制 window.opener的訪問行為，原始頁面需要在每個使用了target="_blank"的鏈接中加上一個rel="noopener"屬性。然而，火狐不支持這個屬性值，所以實際上你要用 rel="noopener noreferrer"來完整覆蓋。盡管某些預防措施可以通過腳本實現，正如在Twitter上看到的，但這在Safari上並不起作用。
var otherWindow = window.open();
otherWindow.opener = null;
otherWindow.location = url;
這段建議腳本來自於關於該主題的一篇好文章.
這個問題並不知名，而且完全被低估了。它在Web Hypertext Application Technology Working Group郵件列表中被提出 在我看來，這個瀏覽器行為的風險遠大於潛在的好處。
總結一下：下次再做開發的時候別怕麻煩最好在target="_blank"后面添加一句 rel="noopener noreferrer"