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

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

關(guān)于window.opener

window.opener 表示打開當(dāng)前窗體頁面的的父窗體是誰。

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

無來源的打開的頁面，或者被禁止了 opener 的頁面創(chuàng)建/打開，opener 的值為 null。


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

舉個(gè)栗子：

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

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


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

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

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