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

本文首發於公衆號：符合預期的CoyPan

本文章翻譯於：medium.com/front-end-w… 原標題爲：Prevent Sending HTTP Referer Headers from Your Website

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

當一個外部連接使用了target=_blank的方式，這個外部連接會打開一個新的瀏覽器tab。此時，新頁面會打開，而且和原始頁面佔用同一個進程。這也意味着，若是這個新頁面有任何性能上的問題，好比有一個很高的加載時間，這也將會影響到原始頁面的表現。若是你打開的是一個同域的頁面，那麼你將能夠在新頁面訪問到原始頁面的全部內容，包括document對象(window.opener.document)。若是你打開的是一個跨域的頁面，你雖然沒法訪問到document，可是你依然能夠訪問到location對象。

這意味着，若是你在你的站點或者文章中，嵌入了經過新窗口打開一個新頁面的連接，這個新頁面能夠使用window.opener，在必定程度上來修改原始頁面。

能夠參考這個例子：s.codepen.io/adamlaki/de…

(筆者這裏作了一個小gif，方便你們看上面那個例子的效果)

咱們來看看上面例子發生了什麼？當你點擊了連接(在打開的document中)，瀏覽器會打開這個頁面。而這個頁面中運行了一段JavaScript代碼：經過window.opener來修改原始頁面(你來自的那個頁面)。有點乏味可是這多是有害的。

那麼問題來了：咱們如何阻止這種狀況的發生呢？在全部使用target=_blank打開新頁面的連接上，加上rel="noopener"。

<a href="https://niteshsoni.info" rel="noopener"></a>
複製代碼

使用了rel=noopener之後，當一個新頁面經過一個連接打開後，新頁面中的惡意JavaScript代碼將沒法經過window.opener來訪問到原始頁面。這將保證新頁面運行在一個單獨的進程裏。

在老瀏覽器中，你能夠使用rel=noreferrer屬性，具備一樣的效果。可是，這樣也會阻止Refererheader被髮送到新頁面。

<a href="https://niteshsoni.info" rel="noopener noreferrer"></a>
複製代碼

在上面的例子中，使用了rel="noreferrer" ，當一個用戶點擊了這個超連接進入到新頁面後，新頁面拿不到referrer信息。這將意味着，新頁面不知道用戶是從哪裏來的。

若是你經過JavaScript中的window.open打開一個頁面的話，上文所說的都適用，由於你也是打開了一個新的窗口。在這種狀況下，你不得不清楚掉opener對象：

var newWindow = window.open();
newWindow.opener = null;
複製代碼

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

筆者的總結

這是一篇很短的文章，主要介紹了在使用<a target="_blank">標籤打開一個新窗口過程當中的安全問題。新頁面中能夠使用window.opener來控制原始頁面。若是新老頁面同域，那麼在新頁面中能夠任意操做原始頁面。若是是不一樣域，新頁面中依然能夠經過window.opener.location，訪問到原始頁面的location對象。

試想一下，你在本身的a頁面中，經過<a target="_blank" href="http://b.com">打開新窗口，跳轉到了b頁面，此刻b頁面中有一段代碼window.opener.location = 'http://c.com'。這是，a頁面就會自動跳轉到c頁面。若是這個c頁面是一個和a頁面長得同樣的釣魚網站，那麼用戶可能就中招了。

解決方法就是：在帶有target="_blank"的<a>標籤中，加上rel="noopener"屬性。若是使用window.open的方式打開頁面，將opener對象置爲空。這樣的反作用是：在某些低版本瀏覽器中，新頁面中拿不到referer信息。

寫在後面

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

符合預期。