2020年5月25日

[掘竅] 為什麼要使用 rel="noreferrer noopener",談 target="_blank" 的安全性風險

在網頁撰寫的過程中,經常當我們要另開視窗時,很容易使用 <a target="_blank"> 這樣的寫法,但如果你有使用 ESLint 的話,它會建議你在 a 標籤中要加上 rel="noreferrer noopener",也就是:
<a href="https://www.google.com" target="_blank" rel="noreferrer noopener">
  Google
</a>
之所以要加上這行,是因為當瀏覽器使用 target="_blank" 來打開新視窗時,新的視窗所在的網頁是有辦法透過 window.opener 這個物件來操作你原本的頁面。
舉例來說,當你在 A 站點了超連結另開新視窗到 B 站時,B 站可以在它的頁面中執行:
window.opener.location = 'https://www.google.com';
這時候你會發現你在 A 站的網頁默默轉址到了 Google 的頁面。
這種做法主要是利用一般人只會注意新開的視窗(B 站),而忽略了原有的視窗(A 站),但若不進一步處理, 新開的視窗是有機會可以修改到原視窗內所瀏覽的網址的。
因此,若你使用的 target="_blank" 的話,eslint-plugin-react 都會建議你要加上 rel="noreferrer noopener",以確保使用者當前瀏覽的頁面,不會因為開新視窗後被另開的這個網站給影響。

參考

0 意見:

張貼留言