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