首页 > 文章 > 前端

target="_blank"的隐藏风险_HTML链接新标签页安全

时间：2026-05-05 10:30:43 245浏览收藏

哈喽！今天心血来潮给大家带来了《target="_blank"的隐藏风险_HTML链接新标签页安全》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

加 target="_blank" 不安全，必须同时加 rel="noopener" 才能防止 window.opener 劫持；否则新页面可篡改原页面地址栏、DOM 或拖慢性能，即 Tabnabbing 攻击。

$target=\$

只加 target="_blank" 就打开外链？危险。它默认让新页面拿到你原页面的 window.opener，能直接改掉你的地址栏、替换 DOM，甚至拖慢性能——这不是假设，是浏览器明确允许的行为。

为什么 `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 模板里拼，如果 url 来自用户输入或 API，rel 极易被忽略。更隐蔽的是这些场景：

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

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

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

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

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《target="_blank"的隐藏风险_HTML链接新标签页安全》文章吧，也可关注golang学习网公众号了解相关技术文章。

资料下载