a標籤noopener什麼意思？ noreferrer屬性/nofollow作用

超鏈接標籤 <a>代碼通常與noopener、noreferrer 和nofollow 屬性一起使用，本文將會分享noopener、noreferrer 和nofollow代碼屬性的使用方法。

a標籤noopener是什麼意思？

將 target="_blank" 添加到鏈接時，目標頁面將在新選項卡中打開。

在新打開的頁面中，可以通過window.opener獲取源頁面窗口對象，埋下安全隱患。

• 具體來說，你自己的網頁A鏈接，有一個可以打開另一個第三方地址的網頁B鏈接。
• B網頁通過window.opener獲取網頁A的window對象；
• 然後就可以使用A頁面跳轉到釣魚頁面window.opener.location.href=”abc。com”，用戶沒有註意到
• 地址跳轉，在該頁面輸入用戶名和密碼後，出現信息洩露。
• 為了避免上述問題，引入了rel 設置了=”noopener” 屬性，使得新打開的頁面無法獲取源頁面的window對象。
• 此時window.opener的值為null。

所以，如果要在新標籤頁中打開第三方地址，最好是給a標籤代碼添加 rel="noopener"屬性。

noreferrer屬性作用

類似於noopener。

設置rel="noreferrer"後，新打開的頁面無法獲取源頁面的窗口進行攻擊。

同時，無法從新打開的頁面獲取document.referrer信息。此信息包含源頁面的地址。

通常noopener和noreferrer同時設置，rel="noopener noreferrer"。

既然後者有前者同時限制訪問window.opener的功能，為什麼要同時設置呢？

為了兼容性，因為部分老瀏覽器不支持noopener。

nofollow的作用

搜索引擎對頁面權重的計算包括頁面引用數（反向鏈接），即如果該頁面被許多其他網頁鏈接，則該頁面將被判斷為高質量頁面。

搜索結果中的排名將會上升。

設置rel=”nofollow”時，意思是告訴搜索引擎該鏈接對上述排名沒有貢獻。

• 一般用於鏈接無需SEO排名的內部地址（比如註冊或登錄頁面鏈接），不想浪費導出權重，或者一些質量較差的頁面。