網頁外鏈用了 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了,而且會讓新窗口運行在獨立的進程裏,不會拖累原來頁面的進程。不過,有些瀏覽器對性能做了優化,即使不加這個屬性,新窗口也會在獨立進程打開。不過爲了安全考慮,還是加上吧。

我特意用自己的博客網站 http://www.kaysonli.com/ 試了一下,點擊裏面的外鏈打開新頁面,window.openner都null。查看頁面元素髮現,a標籤都加上了 rel="noreferrer"。博客是用 Hexo 生成的,看來這種設置已經成了基本常識了。

另外,對於通過window.open的方式打開的新頁面,可以這樣做:

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

希望這個小技巧對你有用。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章