【Html】a標籤target: ‘_blank‘, rel: ‘noopener‘

CCC0203發表於2020-12-20

為了安全性。
使用target=’_blank’開啟一個新標籤時,新頁面的window物件上有一個屬性opener,它指向的是前一個頁面的window物件,因此,後一個頁面就獲得了前一個頁面的控制權。
比如的 a 標籤是這樣<a href='/index'>開啟連線</a>,開啟後在控制檯輸入 window.opener.alert(1),該頁面會彈出警告框。

如果你需要用 a 標籤開啟一個標籤頁時,你會使用 target=’_blank’ 這個屬性,此時你需要新增 rel=‘noreferrer noopener’

比如你的連結現在變成了這樣<a href="/index" target="_blank" rel="noopener" >連線</a>,再開啟後你會發現 window.opener 已經被置為了 null,如果是一些舊的瀏覽器,可以使用 rel=noreferrer,它不僅禁用了 window.opener,後一個頁面也無法獲取到 referrer,再不行,可以利用 js 來開啟新的頁面,之後將 opener 置為 null 來完成這個功能(沒試過sorry)