PJCHENder 未整理筆記

[IS] target="_blank" 的安全性風險

2020-05-25

[IS] target="_blank" 的安全性風險

target blank security issue

在網頁撰寫的過程中,經常當我們要另開視窗時,很容易使用 <a target="_blank"> 這樣的寫法,但如果你有使用 ESLint 的話,它會建議你在 a 標籤中要加上 rel="noreferrer noopenner",也就是:

1
2
3
<a href="https://www.google.com" target="_blank" rel="noreferrer noopenner">
Google
</a>

之所以要加上這行,是因為當瀏覽器使用 target="_blank" 來打開新視窗時,新的視窗所在的網頁是有辦法透過 window.opener 這個物件來操作你原本的頁面。

舉例來說,當你在 A 站點了超連結另開新視窗到 B 站時,B 站可以在它的頁面中執行:

1
window.opener.location = 'https://www.google.com';

這時候你會發現你在 A 站的網頁默默轉址到了 Google 的頁面。

這種做法主要是利用一般人只會注意新開的視窗(B 站),而忽略了原有的視窗(A 站),但若不進一步處理, 新開的視窗是有機會可以修改到原視窗內所瀏覽的網址的。

因此,若你使用的 target="_blank" 的話,eslint-plugin-react 都會建議你要加上 rel="noreferrer noopenner",以確保使用者當前瀏覽的頁面,不會因為開新視窗後被另開的這個網站給影響。

參考

掃描二維條碼,分享此文章