理解 noopener 與 noreferrer 的差異

2024-12-16

設置 target="_blank" 時,點擊連結會在新視窗或分頁中打開連結,但這也會導致新窗口或分頁能夠通過 window.opener 訪問原本的頁面。

html
<a href="https://example.com" target="_blank" rel="noopener">Example</a>

<a href="https://example.com" target="_blank" rel="noreferrer">Example</a>

簡單對比

屬性阻止 window.opener不傳 HTTP 參照標頭
noopener✔︎✖︎
noreferrer✔︎✔︎

瓜熊

努力學習 Nuxt 中……