跨來源目的地的連結不安全

使用 target="_blank" 屬性連結至其他網站的網頁時，可能會讓網站面臨效能和安全性問題：

  • 另一個網頁可能會在與網頁相同的處理程序中執行。 如果其他網頁執行大量 JavaScript， 網頁效能可能會降低。
  • 另一個頁面可透過 window.opener 屬性存取您的 window 物件。 這可能會讓另一個網頁將你的網頁重新導向至惡意網址。

在 target="_blank" 連結中加入 rel="noopener" 或 rel="noreferrer"，可避免這些問題。

Lighthouse 跨來源目的地稽核失敗

Lighthouse 會標記跨來源目的地的不安全連結：

Lighthouse 稽核顯示有不安全的跨來源目的地連結

Lighthouse 會透過以下程序識別連結不安全：

  1. 收集包含 target="_blank" 屬性 (而非 rel="noopener" 或 rel="noreferrer" 屬性) 的所有 <a> 標記。
  2. 篩除任何相同主機連結。

由於 Lighthouse 會過濾掉相同主機連結，因此你會注意遇到大型網站問題：如果某個網頁含有 target="_blank" 連結至網站上的另一個網頁，而未使用 rel="noopener" 的方式，這項稽核對效能的影響依然適用。不過，您不會在 Lighthouse 結果中看到這些連結。

如何提升網站效能及防範安全漏洞

將 rel="noopener" 或 rel="noreferrer" 新增至 Lighthouse 報表中識別的每個連結。一般來說，使用 target="_blank" 時，請一律新增 rel="noopener" 或 rel="noreferrer"：

<a href="https://examplepetstore.com" target="_blank" rel="noopener">
  Example Pet Store
</a>
  • rel="noopener" 會禁止新頁面存取 window.opener 屬性，並確保該屬性在獨立程序中執行。
  • rel="noreferrer" 的效果相同，但也會阻止 Referer 標頭傳送到新頁面。請參閱連結類型「noreferrer」。

詳情請參閱「安全共用跨來源資源」一文。

資源