文章中英模式

布魯斯前端面試題目 - 如何正確開啟外部連結

掌握在新分頁中安全開啟外部連結的完整指南，了解target、rel屬性的正確使用，以及如何防範安全風險和改善使用者體驗。

文章中英模式

懶得看文章？那就來看影片吧

開啟外部連結的基本方法

在HTML中，使用target="_blank"屬性可以在新分頁或新窗口中開啟連結。當用戶點擊這樣的連結時，瀏覽器會保留當前頁面，並在新的分頁中加載目標URL。

<a href="https://example.com" target="_blank">訪問示例網站</a>

target屬性的可能值

_blank: 在新分頁或窗口開啟
_self: 在當前窗口開啟（默認行為）
_parent: 在父框架中開啟
_top: 在整個窗口中開啟，取消所有框架
framename: 在指定的已命名框架中開啟

安全隱患與解決方案

僅使用target="_blank"開啟外部連結存在安全隱患。新開啟的頁面可以通過window.opener訪問原頁面的window對象，這可能導致鏈接劫持（tabnabbing）攻擊。

潛在風險示例

// 在惡意網站上可能執行的代碼
if (window.opener) {
  // 可以訪問原頁面的window對象
  window.opener.location = 'https://malicious-site.com/fake-login.html';
  
  // 用戶返回原標籤頁時，可能已被重定向到釣魚頁面
}

為防止這種情況，應該始終在開啟外部連結時添加rel="noopener noreferrer"屬性：

<a 
  href="https://example.com" 
  target="_blank" 
  rel="noopener noreferrer"
>
  安全地訪問外部網站
</a>

rel="noopener"

1. 阻止新開窗口訪問window.opener
2. 防止鏈接劫持攻擊
3. 現代瀏覽器在使用target="_blank"時默認添加

rel="noreferrer"

1. 防止在請求頭中發送Referer信息
2. 增強隱私保護，不透露來源網站
3. 提供對較舊瀏覽器的向後兼容性

🔥 常見面試題目

(一) target="_blank"存在什麼安全隱患？如何解決？

答：使用target="_blank"開啟連結時存在以下安全隱患：

1. 窗口引用漏洞：新頁面可以通過window.opener訪問原頁面，甚至可以修改原頁面的URL。
2. 性能問題：新頁面與原頁面共享處理程序，可能影響原頁面性能。
3. Referer信息洩露：可能洩露用戶來源網站信息。

解決方案：添加rel="noopener noreferrer"屬性

<!-- 不安全的寫法 -->
<a href="https://example.com" target="_blank">訪問外部網站</a>

<!-- 安全的寫法 -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">訪問外部網站</a>

說明：

noopener：使window.opener返回null，防止鏈接劫持。
noreferrer：防止發送Referer頭信息，保護隱私。