target='_blank' 安全漏洞示例
更新： Instagram已經解決了這個問題， 極可能是由於這篇文章。Facebook和Twitter仍未解決。我用Instagram做爲基本的例子，但主要結論是target="_blank"安全漏洞極爲廣泛。每一個Web開發者應該警戒它，瀏覽器也應該考慮修改這個行爲。git
若是你在連接上使用 target="_blank"屬性，而且不加上rel="noopener"屬性，那麼你就讓用戶暴露在一個很是簡單的釣魚攻擊之下。爲了告知來自於不受保護的站點的用戶，咱們運行一個利用了這個缺陷的腳本。程序員
if (window.opener) {
window.opener.location = "https://dev.to/phishing?referrer="+document.referrer;
}
我相信絕大多數站點都沒有恰當地處理這個問題，但令我意外的是Instagram.com 也是其中一個。咱們最近恰好建立了 @ThePracticalDev Instagram帳號，而後就發現了這個問題。若是你在咱們的資料頁點擊 dev.to 連接，而後回到原來的頁面，你就會明白個人意思。Twitter也沒有在Safari上防備這個安全漏洞，Chrome和Firefox也是。他們沒有用 rel="noopener"，所以看起來他們用的安全腳本在Safari上並不起做用。github
更新： 因爲Instagram在這篇文章發表以後修復了這個問題，我把下面的例子改爲了Facebook的頁面。跨域
弄清原委
- 訪問The Practical Dev Facebook page.
- 在資料頁點擊
dev.to連接。這會打開一個新的頁卡或窗口。 - 注意，原來的頁面已經跳轉到這個頁面.
當站點在連接中使用target="_blank"來打開新頁卡或窗口時，該站點就經過window.opener API給了新頁面對原有窗口的訪問入口，並授予了一些權限。這其中的一些權限被跨域限制攔截了，可是window.location是漏網之魚。瀏覽器
別急，還有更多
這不只存在釣魚攻擊的問題，還涉及到隱私問題，由於新打開的站點對原有頁卡的瀏覽地址有着持續的訪問權。它能夠輪詢這個信息，並獲得結果。幸好這個行爲看起來被跨域限制阻止了，所以即使我或許能夠持續訪問你不想讓我知道的信息，完整的規範裏應該包含健全的限制規則。安全
更新： 在我最開始寫這個的時候，我提出了一種瀏覽器間諜場景，該場景中不良分子能夠更完全地偵測用戶瀏覽歷史。如今我以爲那並不許確，所以我修改了表述。markdown
爲了限制 window.opener的訪問行爲，原始頁面須要在每一個使用了target="_blank"的連接中加上一個rel="noopener"屬性。然而，火狐不支持這個屬性值，因此實際上你要用 rel="noopener noreferrer"來完整覆蓋。儘管某些預防措施能夠經過腳本實現，正如在Twitter上看到的，但這在Safari上並不起做用。ide
var otherWindow = window.open();
otherWindow.opener = null;
otherWindow.location = url;
這段建議腳原本自於關於該主題的一篇好文章.
這個問題並不知名，並且徹底被低估了。它在Web Hypertext Application Technology Working Group郵件列表中被提出 在我看來，這個瀏覽器行爲的風險遠大於潛在的好處。無論怎樣，Facebook和Instagram也沒有理由忽視這個問題。
將來我還會談論更多此類事情。 有興趣能夠關注個人Twitter(@bendhalpern) 或 @ThePracticalDev。