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

使用 target="_blank" 屬性連結至其他網站的網頁時， 請暴露在效能和安全性問題的影響下：

  • 其他頁面的執行程序可能會與專頁相同。 如果其他網頁執行大量 JavaScript 您的網頁效能可能會較差
  • 其他頁面可以使用 window.opener 屬性存取您的 window 物件。 這可能會讓其他網頁將您的網頁重新導向至惡意網址。

正在新增rel="noopener"或rel="noreferrer" target="_blank" 連結可避免這些問題。

Lighthouse 跨來源目的地稽核作業失敗的方式

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

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

Lighthouse 會使用以下程序將連結判定為不安全的連結：

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

由於 Lighthouse 會濾除同主機連結， 發布大型網站時，請注意以下極端情況： 如果有網頁包含target="_blank"連結至網站中其他網頁，不使用 rel="noopener"， 這項稽核的效能影響依然適用。 不過，Lighthouse 結果不會顯示這些連結。

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

新增 rel="noopener" 或 rel="noreferrer" 。 一般來說，使用 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」。

請參閱「安全地共用跨來源資源」。 張貼更多資訊

資源