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

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

關于window.opener

window.opener 表示打開當前窗體頁面的的父窗體是誰。

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

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


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

舉個栗子：

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

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


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

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

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