摘要:當(dāng)一個(gè)外部鏈接使用了的方式,這個(gè)外部鏈接會(huì)打開(kāi)一個(gè)新的瀏覽器。此時(shí),新頁(yè)面會(huì)打開(kāi),并且和原始頁(yè)面占用同一個(gè)進(jìn)程。筆者的總結(jié)這是一篇很短的文章,主要介紹了在使用標(biāo)簽打開(kāi)一個(gè)新窗口過(guò)程中的安全問(wèn)題。
</>復(fù)制代碼
本文首發(fā)于公眾號(hào): 符合預(yù)期的CoyPan本文章翻譯于:https://medium.com/front-end-weekly/prevent-sending-http-referer-headers-from-your-website-e30eecfe813a
原標(biāo)題為:Prevent Sending HTTP Referer Headers from Your Website
在一個(gè)新窗口中打開(kāi)鏈接是前端開(kāi)發(fā)中一個(gè)很常見(jiàn)的邏輯,它可以將用戶(hù)引導(dǎo)到一個(gè)新的域名。我們可以用target="_blank"來(lái)實(shí)現(xiàn)這個(gè)功能。我敢肯定,每個(gè)人都會(huì)在他的某個(gè)項(xiàng)目中使用過(guò)target="_blank,但是我不確定是否每個(gè)人都知道這種用法的缺陷。
當(dāng)一個(gè)外部鏈接使用了target=_blank的方式,這個(gè)外部鏈接會(huì)打開(kāi)一個(gè)新的瀏覽器tab。此時(shí),新頁(yè)面會(huì)打開(kāi),并且和原始頁(yè)面占用同一個(gè)進(jìn)程。這也意味著,如果這個(gè)新頁(yè)面有任何性能上的問(wèn)題,比如有一個(gè)很高的加載時(shí)間,這也將會(huì)影響到原始頁(yè)面的表現(xiàn)。如果你打開(kāi)的是一個(gè)同域的頁(yè)面,那么你將可以在新頁(yè)面訪問(wèn)到原始頁(yè)面的所有內(nèi)容,包括document對(duì)象(window.opener.document)。如果你打開(kāi)的是一個(gè)跨域的頁(yè)面,你雖然無(wú)法訪問(wèn)到document,但是你依然可以訪問(wèn)到location對(duì)象。
這意味著,如果你在你的站點(diǎn)或者文章中,嵌入了通過(guò)新窗口打開(kāi)一個(gè)新頁(yè)面的鏈接,這個(gè)新頁(yè)面可以使用window.opener,在一定程度上來(lái)修改原始頁(yè)面。
</>復(fù)制代碼
可以參考這個(gè)例子:https://s.codepen.io/adamlaki/debug/dd4475e9a73052ad37d3e5f19f4bcb92
(筆者這里做了一個(gè)小gif,方便大家看上面那個(gè)例子的效果)
我們來(lái)看看上面例子發(fā)生了什么?當(dāng)你點(diǎn)擊了鏈接(在打開(kāi)的document中),瀏覽器會(huì)打開(kāi)這個(gè)頁(yè)面。而這個(gè)頁(yè)面中運(yùn)行了一段JavaScript代碼:通過(guò)window.opener來(lái)修改原始頁(yè)面(你來(lái)自的那個(gè)頁(yè)面)。有點(diǎn)乏味但是這可能是有害的。
那么問(wèn)題來(lái)了:我們?nèi)绾巫柚惯@種情況的發(fā)生呢?在所有使用target=_blank打開(kāi)新頁(yè)面的鏈接上,加上rel="noopener"。
</>復(fù)制代碼
使用了rel=noopener以后,當(dāng)一個(gè)新頁(yè)面通過(guò)一個(gè)鏈接打開(kāi)后,新頁(yè)面中的惡意JavaScript代碼將無(wú)法通過(guò)window.opener?來(lái)訪問(wèn)到原始頁(yè)面。這將保證新頁(yè)面運(yùn)行在一個(gè)多帶帶的進(jìn)程里。
在老瀏覽器中,你可以使用rel=noreferrer屬性,具有同樣的效果。但是,這樣也會(huì)阻止Refererheader被發(fā)送到新頁(yè)面。
</>復(fù)制代碼
在上面的例子中,使用了rel="noreferrer"?,當(dāng)一個(gè)用戶(hù)點(diǎn)擊了這個(gè)超鏈接進(jìn)入到新頁(yè)面后,新頁(yè)面拿不到referrer信息。這將意味著,新頁(yè)面不知道用戶(hù)是從哪里來(lái)的。
如果你通過(guò)JavaScript中的window.open打開(kāi)一個(gè)頁(yè)面的話,上文所說(shuō)的都適用,因?yàn)槟阋彩谴蜷_(kāi)了一個(gè)新的窗口。在這種情況下,你不得不清楚掉opener對(duì)象:
</>復(fù)制代碼
var newWindow = window.open();
newWindow.opener = null;
在我看來(lái),使用第一種解決方案(在每一個(gè)target="_blank"的鏈接中加上rel="noopener")是沒(méi)有什么明顯的壞處的。這個(gè)問(wèn)題表明,在你的網(wǎng)頁(yè)安全性中找到漏洞是多么的容易。
筆者的總結(jié)這是一篇很短的文章,主要介紹了在使用標(biāo)簽打開(kāi)一個(gè)新窗口過(guò)程中的安全問(wèn)題。新頁(yè)面中可以使用window.opener來(lái)控制原始頁(yè)面。如果新老頁(yè)面同域,那么在新頁(yè)面中可以任意操作原始頁(yè)面。如果是不同域,新頁(yè)面中依然可以通過(guò)window.opener.location,訪問(wèn)到原始頁(yè)面的location對(duì)象。
試想一下,你在自己的a頁(yè)面中,通過(guò)打開(kāi)新窗口,跳轉(zhuǎn)到了b頁(yè)面,此刻b頁(yè)面中有一段代碼window.opener.location = "http://c.com"。這是,a頁(yè)面就會(huì)自動(dòng)跳轉(zhuǎn)到c頁(yè)面。如果這個(gè)c頁(yè)面是一個(gè)和a頁(yè)面長(zhǎng)得一樣的釣魚(yú)網(wǎng)站,那么用戶(hù)可能就中招了。
解決方法就是:在帶有target="_blank"的標(biāo)簽中,加上rel="noopener"屬性。如果使用window.open的方式打開(kāi)頁(yè)面,將opener對(duì)象置為空。這樣的副作用是:在某些低版本瀏覽器中,新頁(yè)面中拿不到referer信息。
寫(xiě)在后面本文介紹了一種前端開(kāi)發(fā)中容易引發(fā)安全問(wèn)題的情況,問(wèn)題不大,但是比較容易被忽略。筆者自己也是第一次接觸到這個(gè)問(wèn)題 - -。
符合預(yù)期。
歡迎關(guān)注我的公眾號(hào): 符合預(yù)期的CoyPan
這里只有干貨,符合你的預(yù)期
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/100893.html
摘要:當(dāng)一個(gè)外部鏈接使用了的方式,這個(gè)外部鏈接會(huì)打開(kāi)一個(gè)新的瀏覽器。此時(shí),新頁(yè)面會(huì)打開(kāi),并且和原始頁(yè)面占用同一個(gè)進(jìn)程。筆者的總結(jié)這是一篇很短的文章,主要介紹了在使用標(biāo)簽打開(kāi)一個(gè)新窗口過(guò)程中的安全問(wèn)題。 本文首發(fā)于公眾號(hào): 符合預(yù)期的CoyPan本文章翻譯于:https://medium.com/front-end-weekly/prevent-sending-http-referer-hea...
摘要:當(dāng)一個(gè)外部鏈接使用了的方式,這個(gè)外部鏈接會(huì)打開(kāi)一個(gè)新的瀏覽器。此時(shí),新頁(yè)面會(huì)打開(kāi),并且和原始頁(yè)面占用同一個(gè)進(jìn)程。筆者的總結(jié)這是一篇很短的文章,主要介紹了在使用標(biāo)簽打開(kāi)一個(gè)新窗口過(guò)程中的安全問(wèn)題。 本文首發(fā)于公眾號(hào): 符合預(yù)期的CoyPan本文章翻譯于:https://medium.com/front-end-weekly/prevent-sending-http-referer-hea...
摘要:也就是說(shuō),在大多數(shù)情況下,他們只關(guān)注標(biāo)簽中的,而忽略標(biāo)簽周?chē)纳舷挛摹>退銓?duì)于大多數(shù)正常使用瀏覽器的用戶(hù)來(lái)說(shuō),人們也容易只被標(biāo)簽中的內(nèi)容吸引,而忽略上下文。總之,保持標(biāo)簽中的關(guān)鍵字簡(jiǎn)潔是非常重要的。 什么是標(biāo)簽 官方定義是這樣的: The HTML element (or anchor element) creates a hyperlink to other web pages,...
知道嗎?Vue.js 有 2 個(gè)版本,一個(gè)是Runtime + Compiler版本,另一個(gè)是Runtime only版本。Runtime + Compiler版本是包含編譯代碼的,簡(jiǎn)單來(lái)說(shuō)就是Runtime only版本不包含編譯代碼的,在運(yùn)行時(shí)候,需要借助 webpack 的 vue-loader 事先把模板編譯成 render 函數(shù)。 假如在你需要在客戶(hù)端編譯模板 (比如傳入一個(gè)字符串...
我們講述的是關(guān)于 ahooks 源碼系列文章的第七篇,總結(jié)主要講述下面幾點(diǎn): 鞏固 React hooks 的理解。 學(xué)習(xí)如何抽象自定義 hooks。構(gòu)建屬于自己的 React hooks 工具庫(kù)。 培養(yǎng)閱讀學(xué)習(xí)源碼的習(xí)慣,工具庫(kù)是一個(gè)對(duì)源碼閱讀不錯(cuò)的選擇。 注:本系列對(duì) ahooks 的源碼解析是基于v3.3.13。自己 folk 了一份源碼,主要是對(duì)源碼做了一些解讀,可見(jiàn)詳情。 ...
閱讀 858·2021-11-24 10:44
閱讀 2795·2021-11-11 16:54
閱讀 3204·2021-10-08 10:21
閱讀 2108·2021-08-25 09:39
閱讀 2916·2019-08-30 15:56
閱讀 3467·2019-08-30 13:46
閱讀 3504·2019-08-23 18:09
閱讀 2097·2019-08-23 17:05