使用標籤時,你可能會忽略的一個安全問題

收藏待读

使用標籤時,你可能會忽略的一個安全問題

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

使用<a><noscript><img itemprop=https://s.codepen.io/adamlaki/debug/dd4475e9a73052ad37d3e5f19f4bcb92

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

使用<a><noscript><img itemprop=JavaScript 代碼:通過 window.opener 來修改原始頁面(你來自的那個頁面)。有點乏味但是這可能是有害的。

使用<a><noscript><img itemprop=

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

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

在上面的例子中,使用了 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

這裡只有乾貨,符合你的預期

使用<a><noscript><img itemprop=原文 : SegmentFault

相關閱讀

免责声明:本文内容来源于SegmentFault,已注明原文出处和链接,文章观点不代表立场,如若侵犯到您的权益,或涉不实谣言,敬请向我们提出检举。