rel=noopener標(biāo)簽維護(hù)window.opener的安全

rel=noopener標(biāo)簽雖小，可能對(duì)不懂開(kāi)發(fā)的很多人來(lái)說(shuō)對(duì)noopener標(biāo)簽了解的不很多，但他在維護(hù)window.opener的安全上有重大作用。

window.opener 屬性是一個(gè)可讀可寫(xiě)的屬性，可返回對(duì)創(chuàng)建該窗口的 Window 對(duì)象的引用。例如： window.opener.close()將關(guān)閉源（父）窗口。但a鏈接需要有 target="_blank"才會(huì)有這個(gè)問(wèn)題。因?yàn)闆](méi)有target="_blank"就不存在源（父）窗口。

關(guān)于window.opener

window.opener 表示打開(kāi)當(dāng)前窗體頁(yè)面的的父窗體是誰(shuí)。

例如，在 A 頁(yè)面中，通過(guò)一個(gè)帶有 target="_blank" 的 a 標(biāo)簽打開(kāi)了一個(gè)新的頁(yè)面 B，那么在 B 頁(yè)面里，window.opener 的值為 A 頁(yè)面的 window 對(duì)象。

無(wú)來(lái)源的打開(kāi)的頁(yè)面，或者被禁止了 opener 的頁(yè)面創(chuàng)建/打開(kāi)，opener 的值為 null。


一般來(lái)說(shuō)，打開(kāi)同源(域名相同)的頁(yè)面，不會(huì)有什么問(wèn)題。但對(duì)于跨域的外部鏈接來(lái)說(shuō)，存在一個(gè)安全上的風(fēng)險(xiǎn)。
在跨域的情況下，window.opener 拿不到來(lái)源頁(yè)面的具體內(nèi)容，但是 window.opener.location 卻是例外。它會(huì)帶來(lái)什么問(wèn)題呢？

舉個(gè)栗子：

假如你在百度首頁(yè)添加了一個(gè)鏈接(例如: https://agent.xinnet.com)，通過(guò)訪問(wèn)新網(wǎng)首頁(yè)點(diǎn)擊了這個(gè)鏈接，正常情況下會(huì)打開(kāi)一個(gè)新頁(yè)面，新頁(yè)面自然是 https://agent.xinnet.com。

如果沒(méi)有對(duì)這個(gè)主頁(yè)鏈接設(shè)置禁用 window.opener 的跟蹤，在打開(kāi)的 https://agent.xinnet.com 頁(yè)面，可以通過(guò) window.opener.location 改寫(xiě)來(lái)源站點(diǎn)的地址。利用這一點(diǎn)，將來(lái)源站點(diǎn)改寫(xiě)到釣魚(yú)站點(diǎn)頁(yè)面上，例如跳轉(zhuǎn)到偽造的百度登陸頁(yè)面，那么粗心的用戶很難發(fā)現(xiàn)這一變化，那么他的賬號(hào)就存在偷走的可能了。


因?yàn)槿缜懊嫠v，在新打開(kāi)的頁(yè)面（baidu）中可以通過(guò)window.opener獲取到源頁(yè)面的部分控制權(quán)，即使新打開(kāi)的頁(yè)面是跨域的也照樣可以（例如 location 就不存在跨域問(wèn)題），
那么你就讓用戶暴露在一個(gè)非常簡(jiǎn)單的危險(xiǎn)境地。
第三方網(wǎng)站可以通過(guò)window.opener來(lái)操作源頁(yè)面，會(huì)有很大的安全隱患，比如：
if (window.opener) {
    window.opener.location = "**網(wǎng)站地址**?referrer="+document.referrer;
}
復(fù)制代碼第三方網(wǎng)站就可以更改源頁(yè)面的地址源，你本來(lái)瀏覽的是自己的網(wǎng)站，點(diǎn)擊了這個(gè)鏈接后，第三方的一個(gè)操作，你的頁(yè)面就變成了第三方給你設(shè)置的網(wǎng)站了，就如上邊舉得那個(gè)栗子。

所以為了限制 window.opener的訪問(wèn)行為，為了安全起見(jiàn)，原始頁(yè)面需要在每個(gè)使用了target="_blank"的鏈接中加上一個(gè)rel="noopener"屬性，規(guī)定禁止新頁(yè)面?zhèn)鬟f rel=noopener，通過(guò)設(shè)置了此屬性的鏈接打開(kāi)的頁(yè)面，其 window.opener 的值為 null。但該屬性在 chrome 49+，Opera 36+ 版本中才得到支持。在不支持 rel=noopener 屬性的瀏覽器中，可以使用 rel=noreferrer 禁用 HTTP 頭部的 Referer 屬性跟蹤來(lái)源頁(yè)面，得到的效果一樣。

這樣網(wǎng)站會(huì)阻止不法者者獲取有關(guān)鏈接源和與 referrer 鏈接相關(guān)的任何數(shù)據(jù)的信息?？梢杂行У姆乐勾蜷_(kāi)的子頁(yè)面操控源頁(yè)面跳轉(zhuǎn)到另一個(gè)相似的違法網(wǎng)站，提高網(wǎng)站安全性。