有關 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"

引用原文連結：https://www.cnblogs.com/zqifa/p/html-target-1.html

寫部落格是為了記住自己容易忘記的東西，另外也是對自己工作的總結，文章可以轉載，無需版權。希望儘自己的努力，做到更好，大家一起努力進步！

如果有什麼問題，歡迎大家一起探討，程式碼如有問題，歡迎各位大神指正！