noreferrer：順帶把“我是誰(shuí)”也隱藏掉

rel="noreferrer" 做的事情是：

在跳轉(zhuǎn)時(shí)，不再把“從哪個(gè)頁(yè)面來(lái)的”這個(gè)信息， 通過(guò) HTTP Referer 頭部傳給目標(biāo)站點(diǎn)。

簡(jiǎn)單說(shuō)：

• 對(duì)方拿不到你頁(yè)面的 URL 作為來(lái)源

• 某些老瀏覽器里，不加這個(gè)就沒(méi)法同時(shí)兼容 noopener

• 也順手給用戶多了一層隱私保護(hù)

兩個(gè)屬性一起用，就是現(xiàn)在業(yè)界推薦的“標(biāo)配”：

rel="noopener noreferrer"

它們一起做到了：

• 不給對(duì)方遠(yuǎn)程控制權(quán)

• 不亂暴露用戶從哪兒來(lái)的

• 還順便補(bǔ)上老瀏覽器的坑

你付出的成本？ 不過(guò)就是在 <a> 標(biāo)簽里，多敲了 20 來(lái)個(gè)字符而已。

“瀏覽器不是已經(jīng)幫我自動(dòng)加 noopener 了嗎？”

確實(shí)，部分現(xiàn)代瀏覽器 在某些場(chǎng)景里， 會(huì)自動(dòng)為 target="_blank" 的外鏈加上 noopener。

但問(wèn)題有兩個(gè)：

1. 并不是所有瀏覽器都這么做

2. 你也不能保證將來(lái)改動(dòng)、第三方組件、特殊環(huán)境里不會(huì)漏掉

作為一個(gè)開(kāi)發(fā)者， 在這種“成本極低、收益極大”的地方， 與其賭瀏覽器，不如自己寫(xiě)死。

親手多寫(xiě) 1 行， 好過(guò)哪天追著用戶說(shuō)：“這個(gè)問(wèn)題是瀏覽器的問(wèn)題，不是我。”

什么時(shí)候該用？什么時(shí)候不必用？

這對(duì)組合，也不是“逢 <a> 必加”。

可以簡(jiǎn)單記住一條：

給“外鏈”加上它

• 指向你無(wú)法完全信任的站點(diǎn)

• 跳到第三方支付、第三方內(nèi)容平臺(tái)

• 跳到合作方、廣告方、外部工具

這些地方，一律建議：

<a  target="_blank" rel="noopener noreferrer">第三方頁(yè)面</a>

內(nèi)部導(dǎo)航，正常情況下不用加

如果你的鏈接是：

• 同一域名下的頁(yè)面之間跳轉(zhuǎn)

• 同一 SPA 應(yīng)用內(nèi)部用 <a> 做路由（而不是 window.open）

• 必須依賴 window.opener 做明確的、可信的雙向通信

那就不必強(qiáng)行加 noopener。 在同一個(gè)受控環(huán)境下，相互通信本身就是設(shè)計(jì)的一部分。

但有一點(diǎn)可以堅(jiān)守：

只要是 “點(diǎn)了就跳出我控制范圍” 的鏈接， 我都會(huì)習(xí)慣性補(bǔ)上這兩個(gè)屬性。

順手一個(gè)小優(yōu)化：用 CSS 標(biāo)記所有“會(huì)開(kāi)新標(biāo)簽的外鏈”

為了給用戶一點(diǎn)“視覺(jué)提示”， 我還習(xí)慣順帶加一點(diǎn)點(diǎn) CSS：

a[target="_blank"] {
  cursor: pointer;
}

a[target="_blank"]::after {
  content: "↗";
  font-size: 0.8em;
  margin-left: 0.25em;
}

這樣用戶一眼就能看出來(lái)：

• 這個(gè)鏈接點(diǎn)了會(huì)開(kāi)新標(biāo)簽

• 跳出當(dāng)前站點(diǎn)，不是普通內(nèi)部導(dǎo)航

UX 更清晰，安全感也更足一點(diǎn)。

最后一句：真正“專業(yè)”的前端，很多時(shí)候就藏在這種小細(xì)節(jié)里

rel="noopener noreferrer" 看起來(lái)只是一個(gè)不起眼的小屬性。

• 頁(yè)面不加照樣能跑

• 一般用戶也察覺(jué)不到區(qū)別

• 控制臺(tái)也不會(huì)給你報(bào)紅

可它解決的是一個(gè)：

“安安靜靜存在了很多年，但一旦被利用就很致命”的問(wèn)題。

你多寫(xiě)這一行：

• 用戶更安全

• 你的站更難被拿去當(dāng)“跳板”或釣魚(yú)工具

• 安全審計(jì)時(shí)看你的代碼，也會(huì)多一絲尊重

成本幾乎為零，收益卻相當(dāng)可觀。

所以，下次你再寫(xiě)：

<a  target="_blank">外鏈</a>

不妨養(yǎng)成一個(gè)小習(xí)慣，順手補(bǔ)上這一段：

rel="noopener noreferrer"

就這一行， 讓外鏈安全了一大截。

鏈接類型處理表格

總結(jié)

到此這篇關(guān)于使用noopener和noreferrer讓HTML中的外部鏈接更安全的文章就介紹到這了,更多相關(guān)noopener和noreferrer讓HTML外鏈更安全內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！