爲什麼大部分國外網站內鏈接不用
target="_blank"
新窗口打開?Google 都是當前窗口打開;Baidu/Bing 都是新窗口打開。
- 用戶將無法控制它在本頁打開還是新窗口打開。
- 新窗口打開使任務欄更加地擁擠。
- 新窗口打開增加瀏覽器資源的消耗。
- 新窗口打開是後退按鈕變得不可用。
- 用戶更加期望新頁面在當頁載入
以上,並不是我們討論的重點!作爲安全公司,我們關注重點在於安全、安全、安全!
涉及內容:
<a href="https://ligang.blog.csdn.net" target="_blank">李剛的學習專欄</a>
window.open(strUrl, strWindowName, [strWindowFeatures])
網絡釣魚
Phishing,攻擊者利用欺騙性的電子郵件和僞造的 Web 站點來進行網絡詐騙活動,受騙者往往會泄露自己的私人資料,如信用卡號、銀行卡賬戶、身份證號等內容。詐騙者通常會將自己僞裝成網絡銀行、在線零售商和信用卡公司等可信的品牌,騙取用戶的私人信息。
場景:瀏覽某個網站,隨後打開了新窗口,結果這個新窗口神不知鬼不覺地把原來的網頁地址改了(重定向到一個仿冒網頁)。等你回到那個釣魚頁面,已經僞裝成登錄頁,要求輸入登錄憑據。你可能不會注意到這一點,因爲焦點位於新窗口中的惡意頁面上,而重定向發生在後臺。稀裏糊塗把賬號密碼輸進去了~
parent
與 opener
<iframe>
中提供了一個用於父子頁面交互的對象window.parent
,我們可以通過該對象來從框架中的頁面訪問父級頁面的 window- 新打開的窗口,可直接使用
window.opener
來訪問來源頁面的window
對象
瀏覽器提供了完整的跨域保護,在域名相同時,parent
對象和 opener
對象實際上就直接是上一級的 window
對象;而當域名不同時,parent
和 opener
則是經過包裝的一個 global
對象。這個 global
對象僅提供非常有限的屬性訪問,並且在這僅有的幾個屬性中,大部分也都是不允許訪問的。
如果,你的網站上有一個鏈接,使用了 target="_blank"
,那麼一旦用戶點擊這個鏈接並進入一個新的標籤,新標籤中的頁面如果存在惡意代碼,就可以將你的網站直接導航到一個虛假網站。此時,如果用戶回到你的標籤頁,看到的就是被替換過的頁面了。
// 新打開的窗口中執行
window.opener.location.replace('https://ligang.blog.csdn.net')
之前打開的窗口被導航到了 https://ligang.blog.csdn.net 。
防禦
代碼控制
<iframe>
直接使用 sandbox 屬性
noreferrer
可以使用 <a>
標籤的 rel
屬性來指定 rel="noreferrer"
來隱藏 referer
<a href="https://blog.csdn.net/ligang2585116" target="_blank" rel="noreferrer">李剛的學習專欄</a>
noopener
瀏覽器導航到目標資源,而無需授予對打開它的文檔的新瀏覽上下文訪問權限-通過不設置Window打開的窗口上的.opener屬性(它返回null)。
<a href="https://blog.csdn.net/ligang2585116" target="_blank" rel="noreferrer noopener">李剛的學習專欄</a>
JavaScript
function openUrl(url) {
var newTab = window.open()
newTab.opener = null
newTab.location = url
}
性能
通過target="_blank"
打開的新窗口,跟原來的頁面窗口共用一個進程。如果這個新頁面執行了一大堆性能不好的 JavaScript 代碼,佔用了大量系統資源,那你原來的頁面也會受到池魚之殃。 – Baidu而來
參考地址
- https://mp.weixin.qq.com/s/BN0myVrOTl9LpuKJG5C9RQ
- https://github.com/vuejs/vue-router/issues/1280
- https://juejin.im/post/5a9f8425f265da239a5f57f8
- https://www.zhihu.com/question/20162882
- https://mathiasbynens.github.io/rel-noopener/