聊聊 rel=noopener

最近梳理團隊 eslint 時，在 airbnb 的配置中發現了這麼一項

'react/jsx-no-target-blank': 2複製代碼

官方文檔的介紹大概是這樣的

若是你須要用 a 標籤打開一個標籤頁時，你會使用 target='_blank' 這個屬性，此時你須要添加 rel='noreferrer noopener'複製代碼

這就讓人很迷惑了，這倆屬性是幹什麼的呢，google 一下方纔知道，它是爲了解決安全問題。

當你使用 target='_blank' 打開一個新的標籤頁時，新頁面的 window 對象上有一個屬性 opener，它指向的是前一個頁面的 window 對象，所以，後一個頁面就得到了前一個頁面的控制權，so 可怕！！

好比的 a 標籤是這樣 <a href='/index'>打開鏈接</a> ，打開後在控制檯輸入 window.opener.alert(1) 看看？

甚至在跨域的狀況下他也能夠生效，好比打開 <a href='https://github.com/ZhangFe/Blog'>連接<a/>後，你能夠使用 window.opener.location.replace 更改前一個頁面的 url。

那麼，爲了不這種狀況，就須要我們的主角登場了！

好比你的連接如今變成了這樣 <a href='/index' rel=noopener>連接<a/>，再打開後你會發現 window.opener 已經被置爲了 null，若是是一些舊的瀏覽器，能夠使用 rel=noreferrer，它不只禁用了 window.opener，後一個頁面也沒法獲取到 referrer，再不行，能夠利用 js 來打開新的頁面，以後將 opener 置爲 null 來完成這個功能

var otherWindow = window.open();
otherWindow.opener = null;
otherWindow.location = url;複製代碼

參考文檔
html.spec.whatwg.org/multipage/l…
mathiasbynens.github.io/rel-noopene…