以前就知道 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/
發佈留言