前言
刚学前端那会儿，处理外链的方式简单粗暴：
随便一个外链
点一下，当前标签直接跳走。用户刚打开好不容易进来的页面，下一秒——嗖地没了。
后来发现 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 来个字符而已。
“浏览器不是已经帮我自动加 noopener 了吗？”
确实，部分现代浏览器 在某些场景里，会自动为 target="_blank" 的外链加上 noopener。但问题有两个：
- 并不是所有浏览器都这么做
- 你也不能保证将来改动、第三方组件、特殊环境里不会漏掉
作为一个开发者，在这种“成本极低、收益极大”的地方，与其赌浏览器，不如自己写死。
亲手多写 1 行，好过哪天追着用户说：“这个问题是浏览器的问题，不是我。”
什么时候该用？什么时候不必用？
给“外链”加上它
- 指向你无法完全信任的站点
- 跳到第三方支付、第三方内容平台
- 跳到合作方、广告方、外部工具
这些地方，一律建议：
第三方页面
内部导航，正常情况下不用加
如果你的链接是同一域名下的页面之间跳转、同一 SPA 应用内部用 做路由（而不是 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" 看起来只是一个不起眼的小属性。页面不加照样能跑，一般用户也察觉不到区别，控制台也不会给你报红。可它解决的是一个：
“安安静静存在了很多年，但一旦被利用就很致命”的问题。
你多写这一行，用户更安全，你的站更难被拿去当“跳板”或钓鱼工具，安全审计时看你的代码，也会多一丝尊重。成本几乎为零，收益却相当可观。
所以，下次你再写：
外链
不妨养成一个小习惯，顺手补上这一段：
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认证等 |
