本文給大家分享一個(gè)關(guān)于 Web 的知識(shí)點(diǎn)。假如你做過一段時(shí)間Web
開發(fā),那你可能已經(jīng)知道了。但是對(duì)于新手還是可以了解一下的。
我們知道,網(wǎng)頁里的a
標(biāo)簽?zāi)J(rèn)在當(dāng)前窗口跳轉(zhuǎn)鏈接地址,如果需要在新窗口打開,需要給 a
標(biāo)簽添加一個(gè)target="_blank"
屬性。
<a href="http://m.hgci.cn/" target="_blank">W3Cschool編程獅</a>
順便提下一個(gè)有意思的現(xiàn)象,很早之前我就發(fā)現(xiàn),國外網(wǎng)站傾向于在當(dāng)前頁跳轉(zhuǎn),而國內(nèi)網(wǎng)站喜歡打開新窗口。不信你們可以去驗(yàn)證下。我不知道這是交互設(shè)計(jì)上的文化差異,還是技術(shù)上的開發(fā)習(xí)慣。
當(dāng)然,這兩種方式各有優(yōu)缺點(diǎn)。當(dāng)前頁跳轉(zhuǎn)顯得操作比較有連貫性,不會(huì)貿(mào)然打斷用戶的注意力,也會(huì)減少瀏覽器的窗口(tab 頁)數(shù)量。但是對(duì)于需要反復(fù)回到初始頁面的場景來說,就很麻煩了。比如搜索結(jié)果頁面,通常需要查看對(duì)比幾個(gè)目標(biāo)地址,保留在多個(gè)窗口還是比較方便。
今天要說的不只是用戶體驗(yàn)上的差別,而是涉及安全和性能。
安全隱患
如果只是加上target="_blank"
,打開新窗口后,新頁面能通過window.opener
獲取到來源頁面的window
對(duì)象,即使跨域也一樣。雖然跨域的頁面對(duì)于這個(gè)對(duì)象的屬性訪問有所限制,但還是有漏網(wǎng)之魚。
這是某網(wǎng)頁打開新窗口的頁面控制臺(tái)輸出結(jié)果??梢钥吹?code>window.opener的一些屬性,某些屬性的訪問被攔截,是因?yàn)榭缬虬踩呗缘南拗啤?/p>
即便如此,還是給一些操作留下可乘之機(jī)。比如修改window.opener.location
的值,指向另外一個(gè)地址。你想想看,剛剛還是在某個(gè)網(wǎng)站瀏覽,隨后打開了新窗口,結(jié)果這個(gè)新窗口神不知鬼不覺地把原來的網(wǎng)頁地址改了。這個(gè)可以用來做什么?釣魚啊!等你回到那個(gè)釣魚頁面,已經(jīng)偽裝成登錄頁,你可能就稀里糊涂把賬號(hào)密碼輸進(jìn)去了。
還有一種玩法,如果你處于登錄狀態(tài),有些操作可能只是發(fā)送一個(gè)GET
請(qǐng)求就完事了。通過修改地址,就執(zhí)行了非你本意的操作,其實(shí)就是 CSRF 攻擊。
性能問題
除了安全隱患外,還有可能造成性能問題。通過target="_blank"
打開的新窗口,跟原來的頁面窗口共用一個(gè)進(jìn)程。如果這個(gè)新頁面執(zhí)行了一大堆性能不好的 JavaScript 代碼,占用了大量系統(tǒng)資源,那你原來的頁面也會(huì)受到池魚之殃。
解決方案
盡量不使用target="_blank"
,如果一定要用,需要加上rel="noopener"
或者rel="noreferrer"
。這樣新窗口的window.openner
就是null
了,而且會(huì)讓新窗口運(yùn)行在獨(dú)立的進(jìn)程里,不會(huì)拖累原來頁面的進(jìn)程。不過,有些瀏覽器對(duì)性能做了優(yōu)化,即使不加這個(gè)屬性,新窗口也會(huì)在獨(dú)立進(jìn)程打開。不過為了安全考慮,還是加上吧。
我找了個(gè)博客網(wǎng)站試了一下,點(diǎn)擊里面的外鏈打開新頁面,window.openner都
是null
。查看頁面元素發(fā)現(xiàn),a
標(biāo)簽都加上了 rel="noreferrer"。博客是用 Hexo 生成的,看來這種設(shè)置已經(jīng)成了基本常識(shí)了。
另外,對(duì)于通過window.open
的方式打開的新頁面,可以這樣做:
var yourWindow = window.open();
yourWindow.opener = null;
yourWindow.location = "http://someurl.here";
yourWindow.target = "_blank";
希望這個(gè)小技巧對(duì)你有用。
以上就是W3Cschool編程獅
關(guān)于 網(wǎng)頁鏈接用了target="_blank",結(jié)果出乎意料 的相關(guān)介紹了,希望對(duì)大家有所幫助。