点击此链接，真的安全打开新标签页吗？小心长尾词陷阱！

本文共计792个文字，预计阅读时间需要4分钟。

当然可以。请提供需要改写的原文内容，我将按照您的要求进行修改。

为什么 target="_blank" 会触发 window.opener 劫持

新标签页一打开，它的 window.opener 就指向你原来的 window 对象。跨域也不拦，哪怕目标站和你完全不相干：

• window.opener.location.href = "https://fake-login.example" —— 原页面瞬间被重定向
• window.opener.document.write("...") —— 原页面内容被清空重写
• 两个页面共享渲染进程，对方跑个死循环，你这页就卡住

这种攻击叫 Tabnabbing，不是“可能”，而是已知可稳定复现的链路。

rel="noopener" 是必须项，不是可选项

它强制把新页面的 window.opener 设为 null，从源头切断控制链。注意几个实操细节：

立即学习“前端免费学习笔记（深入）”；

• 现代浏览器（Chrome 49+、Firefox 52+、Safari 10.1+）都支持 noopener，但旧版 Safari 仅认 noreferrer；所以生产环境统一写 rel="noopener noreferrer"
• noreferrer 顺带屏蔽 Referer 头，防来源泄露；但安全核心是 noopener，光写 noreferrer 不防劫持
• 不要只在手写 HTML 里加——CMS 输出、Markdown 渲染器、富文本编辑器导出的 HTML，都得在服务端或前端做自动补全

动态生成链接时最容易漏掉 rel

Vue/React 模板里拼 <a :href="url" target="_blank">，如果 url 来自用户输入或 API，rel 极易被忽略。更隐蔽的是这些场景：

• 第三方组件库（如旧版 Ant Design 的 Link）默认不加 rel
• 用 window.open(url, "_blank") 替代原生 a 标签时，没传 opener: null 或没用 'noopener' 特性字符串
• 服务端模板硬编码 target="_blank"，但没预留 rel 插槽，导致所有外链裸奔

这类地方没法靠肉眼检查，得靠 Lighthouse 扫描或正则匹配 <a[^>]*target=["']_blank["'][^>]*> 并验证是否含 rel=["'].*noopener。

target="_blank" 不等于“安全跳转”，只是打开方式

它解决的是用户体验问题（不丢当前页），但本身不提供任何安全保护。真正起防护作用的只有 rel="noopener" 这一个属性。很多人以为加了 target 就万事大吉，结果在后台系统、支付页、登录态页面里埋下高危入口。最麻烦的是：DevTools 不再报错提醒，Lighthouse 也只当建议项——等你发现被劫持，往往已经晚了。