rel=noopener 這回事

以前就知道 noopener 是一個增加 target=”_blank” 安全性的語法,WordPress 的 link 也有這個語法,但沒有去細細的研究它,拜讀了幾篇大神的文章,長了知識才知道 window.oponer 可以有這樣的功能。

例如:我的文章中有一個對外的連結,我會這樣寫 html 語法。

target="_blank" href="http://example.com/"

這樣的結果是,我的原生網頁不變,會新開一個視窗來連結這個網頁。

http://example.com (被新視窗打開的頁面) 將會獲得當前頁面 (我的 https://yungke.me) 的部分控制權,即使新打開的頁面是跨網域的也照樣可以的。

依上述的說法,我也不懂在說甚麼,跟 noopener 有甚麼關係,更何況更釣魚網頁有甚麼瓜葛,我借用大神的網頁的 DEMO 例子,就會明白 rel=noopener 它的功用。

請點取這個 DEMO(範例網頁是安全的,請放心)

說明:

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/"

參考文件:

Sending
User Rating 5 (2 votes)

Leave a Reply

0 Shares
Share
Tweet
+1
Share
Buffer