使用noopener和noreferrer让HTML中的外部链接更安全

目录

• 前言
• 问题不在“新标签”，而在它背后悄悄多出的那根“线”
• 哪些场景尤其危险？
• 一行就能补上的安全大洞：rel="noopener noreferrer"
• noopener：直接剪断那根“控制原页面”的线
• noreferrer：顺带把“我是谁”也隐藏掉
• “浏览器不是已经帮我自动加 noopener 了吗？”
• 什么时候该用？什么时候不必用？
• 给“外链”加上它
• 内部导航，正常情况下不用加
• 顺手一个小优化：用 CSS 标记所有“会开新标签的外链”
• 最后一句：真正“专业”的前端，很多时候就藏在这种小细节里
• 链接类型处理表格
• 总结

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

<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 做文章，你和用户就一起掉坑里了。

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

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

就这一行：

rel="noopener noreferrer"

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

rel="noopener" 的作用是：

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

也就是说：

• 新标签页依然能正常打开

• 但它不再有权限反向操作你的原页面

• window.opener 变成 null，这条路被你堵死了

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

rel="noreferrer" 做的事情是：

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

简单说：

• 对方拿不到你页面的 URL 作为来源

• 某些老浏览器里，不加这个就没法同时兼容 noopener

• 也顺手给用户多了一层隐私保护

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

rel="noopener noreferrer"

它们一起做到了：

• 不给对方远程控制权

• 不乱暴露用户从哪儿来的

• 还顺便补上老浏览器的坑

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

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

但问题有两个：

1. 并不是所有浏览器都这么做

2. 你也不能保证将来改动、第三方组件、特殊环境里不会漏掉

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

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

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

可以简单记住一条：

• 指向你无法完全信任的站点

• 跳到第三方支付、第三方内容平台

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

这些地方，一律建议：

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

如果你的链接是：

• 同一域名下的页面之间跳转

• 同一 SPA 应用内部用 <a> 做路由（而不是 window.open）

• 必须依赖 window.opener 做明确的、可信的双向通信

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

但有一点可以坚守：

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

为了给用户一点“视觉提示”， 我还习惯顺带加一点点 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认证等

到此这篇关于使用noopener和noreferrer让HTML中的外部链接更安全的文章就介绍到这了,更多相关noopener和noreferrer让HTML外链更安全内容请搜索风君子博客以前的文章或继续浏览下面的相关文章希望大家以后多多支持风君子博客！

您可能感兴趣的文章:

• jQuery新窗口打开外链接
• js获取元素外链样式的方法
• 用 JavaScript 给站外链接的 cursor 进行改造