使用 target="_blank"
屬性連結至其他網站的網頁時,可能會讓網站面臨效能和安全性問題:
- 另一個網頁可能會在與網頁相同的處理程序中執行。 如果其他網頁執行大量 JavaScript, 網頁效能可能會降低。
- 另一個頁面可透過
window.opener
屬性存取您的window
物件。 這可能會讓另一個網頁將你的網頁重新導向至惡意網址。
在 target="_blank"
連結中加入 rel="noopener"
或 rel="noreferrer"
,可避免這些問題。
Lighthouse 跨來源目的地稽核失敗
Lighthouse 會標記跨來源目的地的不安全連結:
Lighthouse 會透過以下程序識別連結不安全:
- 收集包含
target="_blank"
屬性 (而非rel="noopener"
或rel="noreferrer"
屬性) 的所有<a>
標記。 - 篩除任何相同主機連結。
由於 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」。
詳情請參閱「安全共用跨來源資源」一文。