為瀏覽器新開視窗的安全加份保險,使用 rel="noopener"

前陣子使用 Tools for Web Developers 查閱 LightHouse 相關資訊的時候,看到這篇文章 Opens External Anchors Using rel="noopener",裡面提到 a 標籤 target="_blank" 新開視窗的參數存在安全上的問題;當一個包含 target="_blank" 的 a 標籤,搭配 Javascript 的 window.opener.location = newURL,會將原本的網頁導向未經授權的第三方網站,例如釣魚網站。如果使用者沒注意的話,很容易產生安全上的隱憂。

安全隱患的實作方式可以參考這篇文章 About rel=noopener (英文)。

解決方式:

所幸解決這個問題的方式很簡單,你只要為包含 target="_blank" 的 a 標籤加上 rel="noopener" 參數,確保 window.opener 為 null 即可避免上述的問題。

<a href="https://tt5.org" target="_blank" rel="noopener">TT5</a>

如果要支援早期版本的 Firefox,可以再加上 noreferrer。

<a href="https://tt5.org" target="_blank" rel="noopener noreferrer">TT5</a>

noopener 的支援清單

noopener 的支援清單

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料