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

前言

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

随便一个外链

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

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

在新标签打开的外链

从此以后，外链都乖乖在新标签里打开。原页面留在那儿，新内容另起一页，体验一下子顺眼了很多，用起来确实爽。直到有一天，才知道：

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

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

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

具体来说：

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

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

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

意思就是：

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

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

你以为是单纯的“另开一页”？结果人家顺着这条“绳子”，直接把你的原页面拖走了。更可怕的是——用户根本意识不到发生了什么。

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

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

哪些场景尤其危险？

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

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

只要你的用户在这个页面里登录过、输入过敏感信息、做过对账号有影响的操作，那一旦被人利用 window.opener 做文章，你和用户就一起掉坑里了。

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

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

更安全的外链

就这一行：

rel="noopener noreferrer"

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

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

rel="noopener" 的作用是：

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

也就是说：新标签页依然能正常打开，但它不再有权限反向操作你的原页面。window.opener 变成 null，这条路被你堵死了。tabnabbing 这条攻击链，直接被斩断。

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

rel="noreferrer" 做的事情是：

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

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

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

rel="noopener noreferrer"

它们一起做到了：不给对方远程控制权，不乱暴露用户从哪儿来的，还顺便补上老浏览器的坑。你付出的成本？不过就是在 标签里，多敲了 20 来个字符而已。

这对组合，也不是“逢 必加”。可以简单记住一条：

第三方页面

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

如果你的链接是同一域名下的页面之间跳转、同一 SPA 应用内部用 做路由（而不是 window.open）、必须依赖 window.opener 做明确的、可信的双向通信，那就不必强行加 noopener。在同一个受控环境下，相互通信本身就是设计的一部分。

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

外链

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

rel="noopener noreferrer"

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

链接类型处理表格

总结