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

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

關于window.opener

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

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

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


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

舉個栗子：

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

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


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

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

這樣網站會阻止不法者者獲取有關鏈接源和與 referrer 鏈接相關的任何數據的信息。可以有效的防止打開的子頁面操控源頁面跳轉到另一個相似的違法網站，提高網站安全性。