聊聊 rel=noopener

zhe.zhang發表於2019-03-04

最近梳理團隊 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…

相關文章