target=”_blank” 还需要 rel=”noopener” 吗？

如果你写前端超过两年,大概率被 ESLint 或者 Code Review 提醒过:”外链记得加 rel="noopener noreferrer"“。这条规矩已经变成一种肌肉记忆,很多人写的时候根本不会去想”为什么要加”,纯粹是复制粘贴。

那么问题来了:现在还有必要吗?答案是——技术上大部分场景已经不需要了,但写上也不算错。下面把来龙去脉说清楚。

先说说这个属性当年是为了解决什么问题

target="_blank" 在新标签页打开一个链接的时候,浏览器默认会做一件挺”贴心”但也挺危险的事:让新打开的页面通过 window.opener 这个属性,拿到一个指向原页面 window 对象的引用。

这意味着什么?意味着你点开的那个新页面,理论上可以反过来操控你原来那个标签页,比如把它偷偷跳转到一个长得一模一样的钓鱼登录页。

你回头一看,标签页没变,网址栏可能也被伪装了,但其实已经是假页面了,等你重新输入密码,账号就被偷了。这套攻击手法业内叫”reverse tabnabbing”(反向标签页劫持)。

除了安全问题,还有一个性能问题:新打开的页面如果和原页面共享同一个渲染进程,新页面里跑的重 JS 脚本可能拖慢你原来那个标签页。

rel="noopener" 就是用来堵这个口子的:它让新页面的 window.opener 变成 null,新页面既拿不到你的引用,也不会和你跑在同一个进程里。这就是为什么很长一段时间里,大家写外链都要老老实实加上它。

大概从 2018 到 2021 年这几年,主流浏览器陆续悄悄改了默认行为:

这几个版本之后,只要你写了 target="_blank",浏览器会自动给它加上 noopener 的行为,不管你 HTML 里写没写这个属性。

这个改动后来也被写进了 WHATWG 的 HTML 标准里,不是哪家浏览器单方面搞的私活,而是规范层面达成的共识。

也就是说,在今天(2026 年)几乎所有正常更新的浏览器上:

<a href="https://example.com" target="_blank">外部链接</a>

和

<a href="https://example.com" target="_blank" rel="noopener">外部链接</a>

在安全效果上是完全等价的。你不写,浏览器也会替你把 window.opener 干掉。

这里有几个挺实际的原因,值得你继续保留这个习惯,而不是马上把项目里所有的 noopener 都删掉:

1. 老旧浏览器兜底

比如已经停止更新的 Edge Legacy,或者某些企业内网还在用的古董版本浏览器,并不会自动应用这个默认行为。如果你的产品用户群里还有这部分人(尤其是一些 To B 的系统,客户的 IT 环境可能很落后),显式写上 rel="noopener" 相当于给这批用户多一层保险。

2. 各种审查工具还在盯着这条规则

Lighthouse、一些 ESLint 插件、代码扫描工具目前依然会把”target="_blank" 没配 rel="noopener"“标记为一个问题项,拉低你的评分或者审查不通过。

工具的规则更新往往比浏览器行为的变化滞后,你要是图省事不写,可能得天天跟审查报告较劲。

3. 团队规范的惯性成本很低

这是一个几乎零成本的写法,加不加对现代浏览器用户没有任何区别,但保留这个习惯可以让代码在任何环境下都”稳”。

团队规范这种东西,一旦要改,还要开会讨论、更新 lint 规则、教育全员,投入产出比并不划算——毕竟它又不影响任何功能。

很多人写的时候是照抄 rel="noopener noreferrer",但其实这两个东西职责不一样:

noopener:阻止新页面拿到 window.opener,防止反向标签劫持。
noreferrer:效果包含了 noopener(也会让 window.opener 变成 null),同时还会阻止浏览器把 Referer 请求头发给新打开的页面,也就是不让对方知道用户是从你的哪个页面点过去的。

所以严格来说,rel="noopener noreferrer" 里的 noopener 是多余的——写 noreferrer 一个词就够了,两个效果都覆盖了。之所以大家还是习惯两个一起写,主要是历史遗留 + 图个”看着安心”。

如果你想保留 referrer 信息(比如做统计分析、想让对方网站知道流量来源),那就只写 noopener,别带上 noreferrer。

只做现代浏览器项目、不太在乎审查工具报错:可以不写,浏览器已经帮你兜底了。
面向大众用户、企业客户,或者项目里跑着 Lighthouse/ESLint 之类的检查:建议继续写,成本几乎为零,但能避免老旧环境的安全风险,也能让审查报告保持干净。
想清楚 noopener 和 noreferrer 的区别,别再无脑抄一整串——按你的实际需求决定要不要保留 referrer 信息。

一句话总结:浏览器已经把这个坑填上了,但工具生态和长尾用户还没跟上,所以这行代码目前处于”可以不写,但写了更保险”的过渡期。