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

target blank security issue

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

<a href="https://www.google.com" target="_blank" rel="noreferrer noopenner"> 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 noopenner"，以確保使用者當前瀏覽的頁面，不會因為開新視窗後被另開的這個網站給影響。

參考​