聊聊 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;

參考文檔
https://html.spec.whatwg.org/...
https://mathiasbynens.github....


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM