<a> 標簽通常會配合着使用 noopener, noreferrer 及 nofollow 這些屬性, 它們的作用及用法如下。
noopener
當給鏈接加上 target="_blank" 后， 目標網頁會在新的標簽頁中打開， 此時在新打開的頁面中可通過 window.opener 獲取到源頁面的 window 對象， 這就埋下了安全隱患。
具體來說,
- 你自己的網頁 A 有個鏈接是打開另外一個三方地址 B
- B 網頁通過
window.opener獲取到 A 網頁的window對象， 進而可以使得 A 頁面跳轉到一個釣魚頁面window.opener.location.href ="abc.com"， 用戶沒注意地址發生了跳轉， 在該頁面輸入了用戶名密碼后則發生信息泄露
為了避免上述問題， 引入了 rel="noopener" 屬性， 這樣新打開的頁面便獲取不到來源頁面的 window 對象了， 此時 window.opener 的值是 null。
所以， 如果要在新標簽頁中打開三方地址時， 最好配全着 rel="noopener"。
noreferrer
與 noopener 類似， 設置了 rel="noreferrer" 后新開頁面也無法獲取來源頁面的 window 以進行攻擊， 同時， 新開頁面中還無法獲取 document.referrer 信息， 該信息包含了來源頁面的地址。
通常 noopener 和 noreferrer 會同時設置， rel="noopener noreferrer"。
既然后者同時擁有前者限制獲取 window.opener 的功能， 為何還要同時設置兩者呢。
考慮到兼容性， 因為一些老舊瀏覽器不支持 noopener。
nofollow
搜索引擎對頁面的權重計算中包含一項頁面引用數 (backlinks), 即如果頁面被其他地方鏈接得多， 那本頁面會被搜索引擎判定為優質頁面， 在搜索結果中排名會上升。
當設置 rel="nofollow" 則表示告訴搜索引擎， 本次鏈接不為上述排名作貢獻。
一般用於鏈接內部地址， 或一些不太優質的頁面。