成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用<a>標(biāo)簽時(shí)，你可能會(huì)忽略的一個(gè)安全問題

rozbo / 2101人閱讀

摘要：當(dāng)一個(gè)外部鏈接使用了的方式，這個(gè)外部鏈接會(huì)打開一個(gè)新的瀏覽器。此時(shí)，新頁(yè)面會(huì)打開，并且和原始頁(yè)面占用同一個(gè)進(jìn)程。筆者的總結(jié)這是一篇很短的文章，主要介紹了在使用標(biāo)簽打開一個(gè)新窗口過(guò)程中的安全問題。

本文首發(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è)新窗口中打開鏈接是前端開發(fā)中一個(gè)很常見的邏輯，它可以將用戶引導(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ì)打開一個(gè)新的瀏覽器tab。此時(shí)，新頁(yè)面會(huì)打開，并且和原始頁(yè)面占用同一個(gè)進(jìn)程。這也意味著，如果這個(gè)新頁(yè)面有任何性能上的問題，比如有一個(gè)很高的加載時(shí)間，這也將會(huì)影響到原始頁(yè)面的表現(xiàn)。如果你打開的是一個(gè)同域的頁(yè)面，那么你將可以在新頁(yè)面訪問到原始頁(yè)面的所有內(nèi)容，包括document對(duì)象(window.opener.document)。如果你打開的是一個(gè)跨域的頁(yè)面，你雖然無(wú)法訪問到document，但是你依然可以訪問到location對(duì)象。

這意味著，如果你在你的站點(diǎn)或者文章中，嵌入了通過(guò)新窗口打開一個(gè)新頁(yè)面的鏈接，這個(gè)新頁(yè)面可以使用window.opener，在一定程度上來(lái)修改原始頁(yè)面。

可以參考這個(gè)例子：https://s.codepen.io/adamlaki/debug/dd4475e9a73052ad37d3e5f19f4bcb92

(筆者這里做了一個(gè)小gif，方便大家看上面那個(gè)例子的效果)

我們來(lái)看看上面例子發(fā)生了什么？當(dāng)你點(diǎn)擊了鏈接(在打開的document中)，瀏覽器會(huì)打開這個(gè)頁(yè)面。而這個(gè)頁(yè)面中運(yùn)行了一段JavaScript代碼：通過(guò)window.opener來(lái)修改原始頁(yè)面(你來(lái)自的那個(gè)頁(yè)面)。有點(diǎn)乏味但是這可能是有害的。

那么問題來(lái)了：我們?nèi)绾巫柚惯@種情況的發(fā)生呢？在所有使用target=_blank打開新頁(yè)面的鏈接上，加上rel="noopener"。

使用了rel=noopener以后，當(dāng)一個(gè)新頁(yè)面通過(guò)一個(gè)鏈接打開后，新頁(yè)面中的惡意JavaScript代碼將無(wú)法通過(guò)window.opener?來(lái)訪問到原始頁(yè)面。這將保證新頁(yè)面運(yùn)行在一個(gè)多帶帶的進(jìn)程里。

在老瀏覽器中，你可以使用rel=noreferrer屬性，具有同樣的效果。但是，這樣也會(huì)阻止Refererheader被發(fā)送到新頁(yè)面。

在上面的例子中，使用了rel="noreferrer"?，當(dāng)一個(gè)用戶點(diǎn)擊了這個(gè)超鏈接進(jìn)入到新頁(yè)面后，新頁(yè)面拿不到referrer信息。這將意味著，新頁(yè)面不知道用戶是從哪里來(lái)的。

如果你通過(guò)JavaScript中的window.open打開一個(gè)頁(yè)面的話，上文所說(shuō)的都適用，因?yàn)槟阋彩谴蜷_了一個(gè)新的窗口。在這種情況下，你不得不清楚掉opener對(duì)象：

var newWindow = window.open();
newWindow.opener = null;

在我看來(lái)，使用第一種解決方案(在每一個(gè)target="_blank"的鏈接中加上rel="noopener")是沒有什么明顯的壞處的。這個(gè)問題表明，在你的網(wǎng)頁(yè)安全性中找到漏洞是多么的容易。

筆者的總結(jié)

這是一篇很短的文章，主要介紹了在使用標(biāo)簽打開一個(gè)新窗口過(guò)程中的安全問題。新頁(yè)面中可以使用window.opener來(lái)控制原始頁(yè)面。如果新老頁(yè)面同域，那么在新頁(yè)面中可以任意操作原始頁(yè)面。如果是不同域，新頁(yè)面中依然可以通過(guò)window.opener.location，訪問到原始頁(yè)面的location對(duì)象。

試想一下，你在自己的a頁(yè)面中，通過(guò)打開新窗口，跳轉(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)得一樣的釣魚網(wǎng)站，那么用戶可能就中招了。

解決方法就是：在帶有target="_blank"的標(biāo)簽中，加上rel="noopener"屬性。如果使用window.open的方式打開頁(yè)面，將opener對(duì)象置為空。這樣的副作用是：在某些低版本瀏覽器中，新頁(yè)面中拿不到referer信息。

寫在后面

本文介紹了一種前端開發(fā)中容易引發(fā)安全問題的情況，問題不大，但是比較容易被忽略。筆者自己也是第一次接觸到這個(gè)問題 - -。

符合預(yù)期。

歡迎關(guān)注我的公眾號(hào): 符合預(yù)期的CoyPan
這里只有干貨，符合你的預(yù)期

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/53566.html

相關(guān)文章

  • 使用&lt;a&gt;標(biāo)簽時(shí)，你可能會(huì)忽略的一個(gè)安全問題

    摘要：當(dāng)一個(gè)外部鏈接使用了的方式，這個(gè)外部鏈接會(huì)打開一個(gè)新的瀏覽器。此時(shí)，新頁(yè)面會(huì)打開，并且和原始頁(yè)面占用同一個(gè)進(jìn)程。筆者的總結(jié)這是一篇很短的文章，主要介紹了在使用標(biāo)簽打開一個(gè)新窗口過(guò)程中的安全問題。 本文首發(fā)于公眾號(hào): 符合預(yù)期的CoyPan本文章翻譯于：https://medium.com/front-end-weekly/prevent-sending-http-referer-hea...

    zero 評(píng)論0 收藏0

  • 使用&lt;a&gt;標(biāo)簽時(shí)，你可能會(huì)忽略的一個(gè)安全問題

    摘要：當(dāng)一個(gè)外部鏈接使用了的方式，這個(gè)外部鏈接會(huì)打開一個(gè)新的瀏覽器。此時(shí)，新頁(yè)面會(huì)打開，并且和原始頁(yè)面占用同一個(gè)進(jìn)程。筆者的總結(jié)這是一篇很短的文章，主要介紹了在使用標(biāo)簽打開一個(gè)新窗口過(guò)程中的安全問題。 本文首發(fā)于公眾號(hào): 符合預(yù)期的CoyPan本文章翻譯于：https://medium.com/front-end-weekly/prevent-sending-http-referer-hea...

    stackvoid 評(píng)論0 收藏0

  • 標(biāo)簽&lt;a&gt;的最佳實(shí)踐

    摘要：也就是說(shuō)，在大多數(shù)情況下，他們只關(guān)注標(biāo)簽中的，而忽略標(biāo)簽周圍的上下文。就算對(duì)于大多數(shù)正常使用瀏覽器的用戶來(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,...

    jsyzchen 評(píng)論0 收藏0

  • Vue編程三部曲之將template編譯成AST示例詳解

    　　知道嗎？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ù)?！　〖偃缭谀阈枰诳蛻舳司幾g模板 (比如傳入一個(gè)字符串...

    3403771864 評(píng)論0 收藏0

  • 演示當(dāng)定時(shí)器在頁(yè)面最小化時(shí)無(wú)法執(zhí)行

    　　我們講述的是關(guān)于 ahooks 源碼系列文章的第七篇，總結(jié)主要講述下面幾點(diǎn)：　　鞏固 React hooks 的理解?！　W(xué)習(xí)如何抽象自定義 hooks。構(gòu)建屬于自己的 React hooks 工具庫(kù)?！　∨囵B(yǎng)閱讀學(xué)習(xí)源碼的習(xí)慣，工具庫(kù)是一個(gè)對(duì)源碼閱讀不錯(cuò)的選擇?！　∽ⅲ罕鞠盗袑?duì) ahooks 的源碼解析是基于v3.3.13。自己 folk 了一份源碼，主要是對(duì)源碼做了一些解讀，可見詳情?！　?..

    3403771864 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<