以前就知道 noopener 是一個增加 target=”_blank” 安全性的語法,WordPress 的 link 也有這個語法,但沒有去細細的研究它,拜讀了幾篇大神的文章,長了知識才知道 window.oponer 可以有這樣的功能。
例如:我的文章中有一個對外的連結,我會這樣寫 html 語法。
target="_blank" href="http://example.com/"
這樣的結果是,我的原生網頁不變,會新開一個視窗來連結這個網頁。
http://example.com (被新視窗打開的頁面) 將會獲得當前頁面 (我的 https://sub.yungke.me) 的部分控制權,即使新打開的頁面是跨網域的也照樣可以的。
依上述的說法,我也不懂在說甚麼,跟 noopener 有甚麼關係,更何況更釣魚網頁有甚麼瓜葛,我借用大神的網頁的 DEMO 例子,就會明白 rel=noopener 它的功用。
請點取這個 DEMO (範例網頁是安全的,請放心)
http://keenwon.com/demo/201603/noopener.html
說明
DEMO 網頁有 2 個連結,第一個是沒有加上 rel=noopener 的 target=”_blank” 對外連結。
第 2 個連結,是有加上 rel=noopener 的 target=”_blank” 對外連結,點取之後,2 個連結的變化是不同的。
你會發現第 1 個連結點取後,原生網頁被換掉了,被換成「百度」首頁。
第 2 個連結點取後,原生網頁還是存在的。
如果第 1 個連結頁 (DEMO) 跳轉到釣魚網站呢?
或是你在一個電商網站刷卡購物,點取一個連外連結,原本的電商網站跳轉後,直接提示用戶登入,而此時你注意力集中在新開的視窗頁面裡,以為原來的電商網站帳號被登出了,你會又在登入一次繼續購物,很可能不會注意到原來的電商網頁在後台的變化,這時你的登入帳號和密碼,已經被釣魚網站給取走了。
結語
如果,還是不懂,可以看下面的影片,它是用 FB 的網頁被更換成登入狀態做說明:
那正確的連接語法該如何寫,我們添加了 rel=noopener 的連接,將 window.opener 變成 null。
rel="noopener" target="_blank" href="http://example.com/"
FireFox 不支持 noopener,加入下面比較完整:
rel="noopener noreferrer" target="_blank" href="http://example.com/"
參考文件:
「Target=_blank」有史以來最低估的漏洞
http://www.jdon.com/idea/target-blank.html
About rel=noopener
https://mathiasbynens.github.io/rel-noopener/
發佈留言