使用noopener和noreferrer让HTML中的外部链接更安全_网页播放器

前言

刚学前端那会儿，我处理外链的方式简单粗暴：

<a href="https://example.com">随便一个外链</a>

点一下，当前标签直接跳走。用户刚打开好不容易进来的页面，下一秒——嗖地没了。

后来我发现 target="_blank" 这个“神器”：

<a href="https://example.com" target="_blank">在新标签打开的外链</a>

从此以后，外链都乖乖在新标签里打开：

原页面留在那儿
新内容另起一页

体验一下子顺眼了很多，我自己也用得很爽。直到有一天，我才知道：

只加 target="_blank"，你其实给自己埋了一个安全坑。

问题不在“新标签”，而在它背后悄悄多出的那根“线”

当你用 target="_blank" 打开一个新标签时，浏览器会在两个页面之间，悄悄建立一条 javascript 通道。

具体来说：

新开的页面，可以通过一个叫 window.opener 的对象，直接“反向操作”你的原页面。

就像这样简单粗暴的一行：

window.opener.location = 'https://a-new-page.com';

意思就是：

“把原来的那一页，重定向到我指定的这个新地址。”

这种操作，有个专业（但听起来就很阴间）的名字：tabnabbing（标签劫持）。

你以为你只是好心把外链丢到新标签页，结果人家顺着这条“绳子”，直接把你的原页面拖走了。

更可怕的是——用户根本意识不到发生了什么。

刚才还在你的后台系统里操作
刷一下，页面“看起来差不多”，其实已经换了站点
继续输入密码、填表单、点击按钮……

全程没警觉，你的平台就这样被“借壳上演了一场骗局”。

哪些场景尤其危险？

这种“标签劫持”风险，对下面这些场景尤其致命：

管理后台（admin 面板）
支付系统 / 充值页面
邮箱 / 账号登录页
saas 后台、数据控制台
政府、医疗、教育等敏感业务页面

只要你的用户：

在你这个页面里登录过
输入过敏感信息
做过对账号有影响的操作

那一旦被人利用 window.opener 做文章，你和用户就一起掉坑里了。

一行就能补上的安全大洞：rel="noopener noreferrer"

好消息是，修这个问题，真的只要 加一小段属性：

<a href="https://example.com" target="_blank" rel="noopener noreferrer">更安全的外链</a>

就这一行：

rel="noopener noreferrer"

后面这两个值，分别干这些事：

noopener：直接剪断那根“控制原页面”的线

rel="noopener" 的作用是：

告诉浏览器： “新开的那一页，不允许通过 window.opener 访问/控制我。”

也就是说：

新标签页依然能正常打开
但它不再有权限反向操作你的原页面
window.opener 变成 null，这条路被你堵死了

tabnabbing 这条攻击链，直接被斩断。

noreferrer：顺带把“我是谁”也隐藏掉

rel="noreferrer" 做的事情是：

在跳转时，不再把“从哪个页面来的”这个信息，通过 http referer 头部传给目标站点。

简单说：

对方拿不到你页面的 url 作为来源
某些老浏览器里，不加这个就没法同时兼容 noopener
也顺手给用户多了一层隐私保护

两个属性一起用，就是现在业界推荐的“标配”：

rel="noopener noreferrer"

它们一起做到了：

不给对方远程控制权
不乱暴露用户从哪儿来的
还顺便补上老浏览器的坑

你付出的成本？不过就是在 <a> 标签里，多敲了 20 来个字符而已。

“浏览器不是已经帮我自动加 noopener 了吗？”

确实，部分现代浏览器 在某些场景里，会自动为 target="_blank" 的外链加上 noopener。

但问题有两个：

并不是所有浏览器都这么做
你也不能保证将来改动、第三方组件、特殊环境里不会漏掉

作为一个开发者，在这种“成本极低、收益极大”的地方，与其赌浏览器，不如自己写死。

亲手多写 1 行，好过哪天追着用户说：“这个问题是浏览器的问题，不是我。”

什么时候该用？什么时候不必用？

这对组合，也不是“逢 <a> 必加”。

可以简单记住一条：

给“外链”加上它

指向你无法完全信任的站点
跳到第三方支付、第三方内容平台
跳到合作方、广告方、外部工具

这些地方，一律建议：

<a href="https://third-party.com" target="_blank" rel="noopener noreferrer">第三方页面</a>

内部导航，正常情况下不用加

如果你的链接是：

同一域名下的页面之间跳转
同一 spa 应用内部用 <a> 做路由（而不是 window.open）
必须依赖 window.opener 做明确的、可信的双向通信

那就不必强行加 noopener。在同一个受控环境下，相互通信本身就是设计的一部分。

但有一点可以坚守：

只要是 “点了就跳出我控制范围” 的链接，我都会习惯性补上这两个属性。

顺手一个小优化：用 css 标记所有“会开新标签的外链”

为了给用户一点“视觉提示”，我还习惯顺带加一点点 css：

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

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

这样用户一眼就能看出来：

这个链接点了会开新标签
跳出当前站点，不是普通内部导航

ux 更清晰，安全感也更足一点。

最后一句：真正“专业”的前端，很多时候就藏在这种小细节里

rel="noopener noreferrer" 看起来只是一个不起眼的小属性。

页面不加照样能跑
一般用户也察觉不到区别
控制台也不会给你报红

可它解决的是一个：

“安安静静存在了很多年，但一旦被利用就很致命”的问题。

你多写这一行：

用户更安全
你的站更难被拿去当“跳板”或钓鱼工具
安全审计时看你的代码，也会多一丝尊重

成本几乎为零，收益却相当可观。

所以，下次你再写：

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

不妨养成一个小习惯，顺手补上这一段：

rel="noopener noreferrer"

就这一行，让外链安全了一大截。

链接类型处理表格

链接类型	target	rel属性	说明
内部链接	不设置或`_self`	(无需)	站内导航
内部资源	`_blank`	`noopener`	pdf、下载文件等
可信外部	`_blank`	`noopener noreferrer`	合作伙伴、参考资料
用户内容	`_blank`	`ugc nofollow noopener noreferrer`	评论、论坛帖子
广告链接	`_blank`	`sponsored nofollow noopener noreferrer`	付费广告、推广
社交媒体	`_blank`	`noopener noreferrer`	分享按钮
登录/注册	`_blank`	`noopener noreferrer`	oauth认证等