[html] 暗藏玄機的跨域連結 - link rel

前言

在使用 chrome lighthouse 檢測網站時發現一項外開連結的提醒：
🚫 Links to cross-origin destinations are unsafe
裡面提到在使用 target="_blank" 開啟跨域連結時
需要加上 rel="noopener" 或 rel="noreferrer"
這兩個屬性有什麼功能呢？

關於 rel

先簡單介紹一下 rel 這個屬性，最常看到他的地方應該就是引入 css 的時候（？

<link rel="stylesheet" href="/custom.css">

rel 其實是 relationship 的意思，是用來定義目前網站與連結網站/資源之間的關係
以上述 css 例子來說，就是定義此連結為一份 stylesheet
rel 可用的屬性值非常多，可以參考 MDN：HTML attribute: rel - HTML | MDN
以下分享常與外開連結 target="_blank" 並用的幾個屬性值

noopener

noopener 可以阻擋新開的網站使用 window.opener
而 window.opener 可以將原始網站導頁，也可以取得原始網站的內容

window.opener.href = "http://whatever-link-you-want.com"; // redirect
window.opener.document.getElementById("oops"); // get element

這些操作對於原始網站的安全性有很大的威脅！
加上 noopener 則可以避免這個問題發生，讓新網站抓不到 opener

💡 2021/4/23 補充

chrome 在 version 88 新增了一項功能，在 target="_blank" 的情況下會預設使用 rel="noopener" 以增加安全性。參考：New in Chrome 88 - Chrome Developers

noreferrer

這裡的 referrer 指的就是在送出請求時 headers 上的 referer
使用 noreferrer 的話，在新網站上發送的請求就不會帶上 referer 了
此外，他也包含了 noopener 的功能～

此功能對於原本的網站沒有影響，但對新網站的流量分析就有差別了
因為在網站追蹤工具上（例如 google analytics）
就會用 referer 這個欄位判斷來源網站，並歸類在 referral 類別
如果沒有來源網站，該次造訪就會被視為直接流量（direct）
（所以在內部連結時千萬別加上這個值～否則會影響分析資料）

💡 referer or referrer？

http headers 內的 referer 其實是 referrer 的誤拼
在referer 文件內有簡短的說明 😂：referer is actually a misspelling of the word "referrer".

nofollow

除了上述兩個值之外，還有個也常被使用的 no 系列值：nofollow
在介紹他之前，先來說說另一個東西：反向連結（backlink）
這個詞在網路上找到的說法大致是：A link created when one website links to another.
也就是一個網站連接到另一個網站時的連結（微繞口令？
假設某篇文章裡放了一個購物網站連結，這個連結就是購物網站的 backlink

而 SEO 的計算就包含了 backlink 的數量以及 backlink 的來源
數量越多，表示越多網站認可（endorse）該網站的內容
而來源網站若越受歡迎、越具權威性，也會讓 backlink 的價值越高
簡單來說，若某網站的 backlink 很多，且都來自於知名網站，就會提升該網站的 SEO
在連結內加上 nofollow 可讓搜尋引擎忽視這兩個網站之間的關聯，進而影響 SEO 計算

這個做法應該較常用於社群媒體類的網站
例如知名部落格平台 medium 上有很多文章，但 medium 的流量極大
為了避免 medium 的流量影響到文章內連結的 SEO，或是有人惡意洗流量
medium 就可以在外開連結都加上 nofollow 來取消兩個網站的關聯

💡 backlink

backlink 在此只有簡短的提及
但關於 backlink 如何影響 SEO 這塊有很多文章深究
個人覺得也滿有趣的，也可以查閱最下方參考資料的連結～

小總結

• noopener：阻擋新視窗操作原本的網站，提升網站安全性
• noreferrer：移除請求時的 referer header，影響新視窗流量來源的追蹤
• nofollow：取消 SEO backlink 的追蹤，影響新視窗的 SEO

田野調查

許多大型網站都有在連結上應用這些值，在此列出幾個做參考：

youtube

影片下方資訊欄的外部連結：使用 nofollow

facebook

粉專介紹欄的外部連結：使用 nofollow 及 noopener

twitter

個人介紹區的外部連結：使用 noopener 及 noreferrer

medium

文章內的外部連結：使用 noopener 及 nofollow

ptt 網頁版

文章內的外部連結：使用 nofollow

reddit 網頁版

文章內的外部連結：使用 noopener、nofollow 及 ugc
ugc 是一個比較新的應用，Google 在 2019 年 9 月宣布支持此屬性值
他的全名是 user generated content，意指「由使用者產生的內容」
同期提出的還有另一個 sponsored，表示連結由贊助商提供（有償連結）

參考資料

• What rel="noreferrer noopener" Mean and How it Affects SEO
• 3 個常常令人誤會的連結語法: nofollow, noreferrer, noopener - HDcourse
• SEO重大更新Google 新增 Rel=sponsored, Rel=ugc 二種屬性-新視野網頁設計
• backlink related
  • Backlink(反向連結)如何影響網站SEO | 數位引擎
  • Backlinks | SEO Best Practices [2020] - Moz