HTML a標籤打開新標籤頁避免出現安全漏洞，請使用「noopener」

新標籤頁中打開一個網址如何出現安全漏洞

讓咱們在網站上的新標籤頁中打開一個網址，HTML以下

<a href="https://malicious-domain.netlify.com" target="_blank">
  訪問惡意網站！
</a>
複製代碼

這裏咱們有一個指向惡意網站的 href 屬性，並以 _blank 屬性爲 target，使其在新標籤頁中打開。

該流程看起來如此簡單明瞭，用戶在這裏可能面臨的安全風險是什麼？

用戶從你的頁面重定向到域，此時，瀏覽器會將你當前網站的全部 window 變量內容附加到惡意網站的 window.opener 變量。如今惡意網站能夠訪問你網站的 window，這顯然在重定向此方法時打開了一個安全漏洞。

惡意網站一旦經過 window.opener 訪問了你的網站的 window 變量，它能夠將你以前的網站重定向到一個新的釣魚網站，這個網站可能與你打開的實際網站類似，甚至可能會要求你再次登陸。

在惡意網站中，只需編寫如下代碼便可完成上述修改

if (window.opener) {
  window.opener.location = 'https://www.dhilipkmr.dev';
}
複製代碼

所以，無辜用戶將陷入此陷阱，並提供可能暴露給攻擊者的登陸詳細信息。

咱們如何避免這種狀況？

一種簡單的方法是將帶有 noopener 的 rel 屬性添加到 <a> 標記。

<a href="https://malicious-domain.netlify.com" rel="noopener" target="_blank">
  訪問惡意網站！
</a>
複製代碼

它有什麼做用？

rel = "noopener" 表示瀏覽器不要將當前網站的 window 變量附加到新打開的惡意網站。

這使得惡意網站的 window.opener 的值爲 null。

所以，在將用戶導航到你未維護的新域時，請小心。

並不是老是咱們用標籤打開一個新標籤，在某些狀況下，你必須經過執行javascript的 window.open() 來打開它，以下所示：

function openInNewTab() {
  // 一些代碼
  window.open('https://malicious-domain.netlify.com');
}
複製代碼

<span class="link" onclick="openInNewTab()">訪問惡意網站！</span>
複製代碼

這裏沒有說起 noopener，所以這致使當前網站的 window 傳遞到惡意網站。

經過js打開新標籤頁時，該如何處理？

function openInNewTabWithoutOpener() {
   var newTab = window.open();
   newTab.opener = null;
   newTab.location='https://malicious-domain.netlify.com';
 }
複製代碼

<span class="link" onclick="openInNewTabWithoutOpener()">訪問惡意網站！</span>
複製代碼

咱們已經經過 window.open() 打開了一個虛擬標籤，該標籤打開了 about:blank，所以這意味着它還沒有重定向到惡意網站。

而後，咱們將新標籤的 opener 值修改成 null。

將咱們將新標籤的網址修改成惡意網站的網址。

此次，opener 再次爲空，所以它沒法訪問第一個網站的 window 變量。

問題解決了。

可是在舊版本的Safari中將沒法使用此方法，所以咱們再次遇到問題。

如何解決Safari的問題？

function openInNewTabWithNoopener() {
  const aTag = document.createElement('a');
  aTag.rel = 'noopener';
  aTag.target = "_blank";
  aTag.href = 'https://malicious-domain.netlify.com';
  aTag.click();
}
複製代碼

<span class="link" onclick="openInNewTabWithoutOpener()">訪問惡意網站！</span>
複製代碼

在這裏，咱們模擬點擊錨標記。

• 咱們建立 <a> 標記並分配所需的屬性，而後在其上執行 click()，其行爲與單擊連接相同。
• 不要忘記在此處向標籤添加 rel 屬性。

其餘事實：

• 當您在錨標記上單擊 CMD + LINK 時，Chrome，Firefox和Safari會將惡意網站的 window.opener 視爲 null。
• 可是，在經過JavaScript處理新標籤頁打開的元素上的 CMD + LINK 上，瀏覽器將附加窗口變量並將其發送到新標籤頁。
• 默認狀況下，新版的Safari會在全部狀況下刪除 window.opener，要將窗口信息傳遞給新的標籤頁，你必須明確指定 rel='opener'。

沒有人能夠繞過你的"保安"。

---

來源：dev.to，做者：Dhilip kumar，翻譯：公衆號《前端外文精選》

本文首發於微信公衆號《前端外文精選》，關注即送大禮包，準能爲你節省很多錢！