網(wǎng)頁(yè)鏈接用了target="_blank"，結(jié)果出乎意料

本文給大家分享一個(gè)關(guān)于 Web 的知識(shí)點(diǎn)。假如你做過(guò)一段時(shí)間Web開(kāi)發(fā)，那你可能已經(jīng)知道了。但是對(duì)于新手還是可以了解一下的。

我們知道，網(wǎng)頁(yè)里的a標(biāo)簽?zāi)J(rèn)在當(dāng)前窗口跳轉(zhuǎn)鏈接地址，如果需要在新窗口打開(kāi)，需要給 a 標(biāo)簽添加一個(gè)target="_blank"屬性。

<a href="http://m.hgci.cn/" target="_blank">W3Cschool編程獅</a>

順便提下一個(gè)有意思的現(xiàn)象，很早之前我就發(fā)現(xiàn)，國(guó)外網(wǎng)站傾向于在當(dāng)前頁(yè)跳轉(zhuǎn)，而國(guó)內(nèi)網(wǎng)站喜歡打開(kāi)新窗口。不信你們可以去驗(yàn)證下。我不知道這是交互設(shè)計(jì)上的文化差異，還是技術(shù)上的開(kāi)發(fā)習(xí)慣。

當(dāng)然，這兩種方式各有優(yōu)缺點(diǎn)。當(dāng)前頁(yè)跳轉(zhuǎn)顯得操作比較有連貫性，不會(huì)貿(mào)然打斷用戶的注意力，也會(huì)減少瀏覽器的窗口（tab 頁(yè)）數(shù)量。但是對(duì)于需要反復(fù)回到初始頁(yè)面的場(chǎng)景來(lái)說(shuō)，就很麻煩了。比如搜索結(jié)果頁(yè)面，通常需要查看對(duì)比幾個(gè)目標(biāo)地址，保留在多個(gè)窗口還是比較方便。

今天要說(shuō)的不只是用戶體驗(yàn)上的差別，而是涉及安全和性能。

安全隱患

如果只是加上target="_blank"，打開(kāi)新窗口后，新頁(yè)面能通過(guò)window.opener獲取到來(lái)源頁(yè)面的window對(duì)象，即使跨域也一樣。雖然跨域的頁(yè)面對(duì)于這個(gè)對(duì)象的屬性訪問(wèn)有所限制，但還是有漏網(wǎng)之魚(yú)。

這是某網(wǎng)頁(yè)打開(kāi)新窗口的頁(yè)面控制臺(tái)輸出結(jié)果。可以看到window.opener的一些屬性，某些屬性的訪問(wèn)被攔截，是因?yàn)榭缬虬踩呗缘南拗啤?/p>

即便如此，還是給一些操作留下可乘之機(jī)。比如修改window.opener.location的值，指向另外一個(gè)地址。你想想看，剛剛還是在某個(gè)網(wǎng)站瀏覽，隨后打開(kāi)了新窗口，結(jié)果這個(gè)新窗口神不知鬼不覺(jué)地把原來(lái)的網(wǎng)頁(yè)地址改了。這個(gè)可以用來(lái)做什么？釣魚(yú)?。〉饶慊氐侥莻€(gè)釣魚(yú)頁(yè)面，已經(jīng)偽裝成登錄頁(yè)，你可能就稀里糊涂把賬號(hào)密碼輸進(jìn)去了。

還有一種玩法，如果你處于登錄狀態(tài)，有些操作可能只是發(fā)送一個(gè)GET請(qǐng)求就完事了。通過(guò)修改地址，就執(zhí)行了非你本意的操作，其實(shí)就是 CSRF 攻擊。

性能問(wèn)題

除了安全隱患外，還有可能造成性能問(wèn)題。通過(guò)target="_blank"打開(kāi)的新窗口，跟原來(lái)的頁(yè)面窗口共用一個(gè)進(jìn)程。如果這個(gè)新頁(yè)面執(zhí)行了一大堆性能不好的 JavaScript 代碼，占用了大量系統(tǒng)資源，那你原來(lái)的頁(yè)面也會(huì)受到池魚(yú)之殃。

解決方案

盡量不使用target="_blank"，如果一定要用，需要加上rel="noopener"或者rel="noreferrer"。這樣新窗口的window.openner就是null了，而且會(huì)讓新窗口運(yùn)行在獨(dú)立的進(jìn)程里，不會(huì)拖累原來(lái)頁(yè)面的進(jìn)程。不過(guò)，有些瀏覽器對(duì)性能做了優(yōu)化，即使不加這個(gè)屬性，新窗口也會(huì)在獨(dú)立進(jìn)程打開(kāi)。不過(guò)為了安全考慮，還是加上吧。

我找了個(gè)博客網(wǎng)站試了一下，點(diǎn)擊里面的外鏈打開(kāi)新頁(yè)面，window.openner都是null。查看頁(yè)面元素發(fā)現(xiàn)，a標(biāo)簽都加上了 rel="noreferrer"。博客是用 Hexo 生成的，看來(lái)這種設(shè)置已經(jīng)成了基本常識(shí)了。

另外，對(duì)于通過(guò)window.open的方式打開(kāi)的新頁(yè)面，可以這樣做：

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

希望這個(gè)小技巧對(duì)你有用。

以上就是W3Cschool編程獅關(guān)于 網(wǎng)頁(yè)鏈接用了target="_blank"，結(jié)果出乎意料 的相關(guān)介紹了，希望對(duì)大家有所幫助。