網頁外鏈用了 target="_blank"，結果悲劇了

今天給你們分享一個 Web 知識點。若是你有過一段時間的 Web 開發經驗，可能已經知道了。不過對於剛接觸的新手來講，仍是有必要了解一下的。

咱們知道，網頁裏的a標籤默認在當前窗口跳轉連接地址，若是須要在新窗口打開，須要給 a 標籤添加一個target="_blank"屬性。

<a href="http://kaysonli.com/" target="_blank">1024譯站</a>
複製代碼

順便提下一個有意思的現象，很早以前我就發現，國外網站傾向於在當前頁跳轉，而國內網站喜歡打開新窗口。不信大家能夠去驗證下。我不知道這是交互設計上的文化差別，仍是技術上的開發習慣。

固然，這兩種方式各有優缺點。當前頁跳轉顯得操做比較有連貫性，不會貿然打斷用戶的注意力，也會減小瀏覽器的窗口（tab 頁）數量。可是對於須要反覆回到初始頁面的場景來講，就很麻煩了。好比搜索結果頁面，一般須要查看對比幾個目標地址，保留在多個窗口仍是比較方便。

今天要說的不僅是用戶體驗上的差異，而是涉及安全和性能。

安全隱患

若是隻是加上target="_blank"，打開新窗口後，新頁面能經過window.opener獲取到來源頁面的window對象，即便跨域也同樣。雖然跨域的頁面對於這個對象的屬性訪問有所限制，但仍是有漏網之魚。

這是某網頁打開新窗口的頁面控制檯輸出結果。能夠看到window.opener的一些屬性，某些屬性的訪問被攔截，是由於跨域安全策略的限制。

即使如此，仍是給一些操做留下可乘之機。好比修改window.opener.location的值，指向另一個地址。你想一想看，剛剛仍是在某個網站瀏覽，隨後打開了新窗口，結果這個新窗口神不知鬼不覺地把原來的網頁地址改了。這個能夠用來作什麼？釣魚啊！等你回到那個釣魚頁面，已經假裝成登陸頁，你可能就稀裏糊塗把帳號密碼輸進去了。

還有一種玩法，若是你處於登陸狀態，有些操做可能只是發送一個GET請求就完事了。經過修改地址，就執行了非你本意的操做，其實就是 CSRF 攻擊。

性能問題

除了安全隱患外，還有可能形成性能問題。經過target="_blank"打開的新窗口，跟原來的頁面窗口共用一個進程。若是這個新頁面執行了一大堆性能很差的 JavaScript 代碼，佔用了大量系統資源，那你原來的頁面也會受到池魚之殃。

解決方案

儘可能不使用target="_blank"，若是必定要用，須要加上rel="noopener"或者rel="noreferrer"。這樣新窗口的window.openner就是null了，並且會讓新窗口運行在獨立的進程裏，不會拖累原來頁面的進程。固然，有些瀏覽器對性能作了優化，即便不加這個屬性，新窗口也會在獨立進程打開。不過爲了安全考慮，仍是加上吧。

我特地用本身的博客網站 1024譯站 試了一下，點擊裏面的外鏈打開新頁面，window.openner都是null。查看頁面元素髮現，a標籤都加上了rel="noreferrer"。博客是用 Hexo 生成的，看來這種設置已經成了基本常識了。

另外，對於經過window.open的方式打開的新頁面，能夠這樣作：

var yourWindow = window.open();
yourWindow.opener = null;
yourWindow.location = "http://someurl.here";
yourWindow.target = "_blank";
複製代碼

更多前端技術乾貨盡在微信公衆號：1024譯站