在網頁撰寫的過程中，經常當我們要另開視窗時，很容易使用
<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 意見:
張貼留言