国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用<a>標簽時,你可能會忽略的一個安全問題

rozbo / 2093人閱讀

摘要:當一個外部鏈接使用了的方式,這個外部鏈接會打開一個新的瀏覽器。此時,新頁面會打開,并且和原始頁面占用同一個進程。筆者的總結這是一篇很短的文章,主要介紹了在使用標簽打開一個新窗口過程中的安全問題。

本文首發于公眾號: 符合預期的CoyPan

本文章翻譯于:https://medium.com/front-end-weekly/prevent-sending-http-referer-headers-from-your-website-e30eecfe813a
原標題為:Prevent Sending HTTP Referer Headers from Your Website

在一個新窗口中打開鏈接是前端開發中一個很常見的邏輯,它可以將用戶引導到一個新的域名。我們可以用target="_blank"來實現這個功能。我敢肯定,每個人都會在他的某個項目中使用過target="_blank,但是我不確定是否每個人都知道這種用法的缺陷。

當一個外部鏈接使用了target=_blank的方式,這個外部鏈接會打開一個新的瀏覽器tab。此時,新頁面會打開,并且和原始頁面占用同一個進程。這也意味著,如果這個新頁面有任何性能上的問題,比如有一個很高的加載時間,這也將會影響到原始頁面的表現。如果你打開的是一個同域的頁面,那么你將可以在新頁面訪問到原始頁面的所有內容,包括document對象(window.opener.document)。如果你打開的是一個跨域的頁面,你雖然無法訪問到document,但是你依然可以訪問到location對象。

這意味著,如果你在你的站點或者文章中,嵌入了通過新窗口打開一個新頁面的鏈接,這個新頁面可以使用window.opener,在一定程度上來修改原始頁面

可以參考這個例子:https://s.codepen.io/adamlaki/debug/dd4475e9a73052ad37d3e5f19f4bcb92

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

我們來看看上面例子發生了什么?當你點擊了鏈接(在打開的document中),瀏覽器會打開這個頁面。而這個頁面中運行了一段JavaScript代碼:通過window.opener來修改原始頁面(你來自的那個頁面)。有點乏味但是這可能是有害的。

那么問題來了:我們如何阻止這種情況的發生呢?在所有使用target=_blank打開新頁面的鏈接上,加上rel="noopener"

使用了rel=noopener以后,當一個新頁面通過一個鏈接打開后,新頁面中的惡意JavaScript代碼將無法通過window.opener?來訪問到原始頁面。這將保證新頁面運行在一個多帶帶的進程里。

在老瀏覽器中,你可以使用rel=noreferrer屬性,具有同樣的效果。但是,這樣也會阻止Refererheader被發送到新頁面。

在上面的例子中,使用了rel="noreferrer"?,當一個用戶點擊了這個超鏈接進入到新頁面后,新頁面拿不到referrer信息。這將意味著,新頁面不知道用戶是從哪里來的。

如果你通過JavaScript中的window.open打開一個頁面的話,上文所說的都適用,因為你也是打開了一個新的窗口。在這種情況下,你不得不清楚掉opener對象:

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

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

筆者的總結

這是一篇很短的文章,主要介紹了在使用標簽打開一個新窗口過程中的安全問題。新頁面中可以使用window.opener來控制原始頁面。如果新老頁面同域,那么在新頁面中可以任意操作原始頁面。如果是不同域,新頁面中依然可以通過window.opener.location,訪問到原始頁面的location對象。

試想一下,你在自己的a頁面中,通過打開新窗口,跳轉到了b頁面,此刻b頁面中有一段代碼window.opener.location = "http://c.com"。這是,a頁面就會自動跳轉到c頁面。如果這個c頁面是一個和a頁面長得一樣的釣魚網站,那么用戶可能就中招了。

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

寫在后面

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

符合預期。


歡迎關注我的公眾號: 符合預期的CoyPan
這里只有干貨,符合你的預期

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/53566.html

相關文章

  • 使用&lt;a&gt;標簽,可能忽略一個安全問題

    摘要:當一個外部鏈接使用了的方式,這個外部鏈接會打開一個新的瀏覽器。此時,新頁面會打開,并且和原始頁面占用同一個進程。筆者的總結這是一篇很短的文章,主要介紹了在使用標簽打開一個新窗口過程中的安全問題。 本文首發于公眾號: 符合預期的CoyPan本文章翻譯于:https://medium.com/front-end-weekly/prevent-sending-http-referer-hea...

    zero 評論0 收藏0
  • 使用&lt;a&gt;標簽,可能忽略一個安全問題

    摘要:當一個外部鏈接使用了的方式,這個外部鏈接會打開一個新的瀏覽器。此時,新頁面會打開,并且和原始頁面占用同一個進程。筆者的總結這是一篇很短的文章,主要介紹了在使用標簽打開一個新窗口過程中的安全問題。 本文首發于公眾號: 符合預期的CoyPan本文章翻譯于:https://medium.com/front-end-weekly/prevent-sending-http-referer-hea...

    stackvoid 評論0 收藏0
  • 標簽&lt;a&gt;最佳實踐

    摘要:也就是說,在大多數情況下,他們只關注標簽中的,而忽略標簽周圍的上下文。就算對于大多數正常使用瀏覽器的用戶來說,人們也容易只被標簽中的內容吸引,而忽略上下文??傊?,保持標簽中的關鍵字簡潔是非常重要的。 什么是標簽 官方定義是這樣的: The HTML element (or anchor element) creates a hyperlink to other web pages,...

    jsyzchen 評論0 收藏0
  • Vue編程三部曲之將template編譯成AST示例詳解

      知道嗎?Vue.js 有 2 個版本,一個是Runtime + Compiler版本,另一個是Runtime only版本。Runtime + Compiler版本是包含編譯代碼的,簡單來說就是Runtime only版本不包含編譯代碼的,在運行時候,需要借助 webpack 的 vue-loader 事先把模板編譯成 render 函數?! 〖偃缭谀阈枰诳蛻舳司幾g模板 (比如傳入一個字符串...

    3403771864 評論0 收藏0
  • 演示當定器在頁面最小化無法執行

      我們講述的是關于 ahooks 源碼系列文章的第七篇,總結主要講述下面幾點:  鞏固 React hooks 的理解。  學習如何抽象自定義 hooks。構建屬于自己的 React hooks 工具庫?! ∨囵B閱讀學習源碼的習慣,工具庫是一個對源碼閱讀不錯的選擇?! ∽ⅲ罕鞠盗袑?ahooks 的源碼解析是基于v3.3.13。自己 folk 了一份源碼,主要是對源碼做了一些解讀,可見詳情。  ...

    3403771864 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<