HTML中使用标签打开新窗口的方法

在HTML中使用`target="_blank"`打开新标签页虽方便，但若不搭配`rel="noopener"`将引发严重的安全风险——新页面可通过`window.opener`劫持原始页面、重定向至恶意网址（opener abuse攻击），同时带来性能隐患；现代浏览器虽对跨源场景做了部分限制，但同源场景及旧版浏览器仍完全暴露，且主流审计工具（如Lighthouse）已将其缺失列为严重问题；因此，无论链接指向外部还是内部页面、无论静态书写还是框架动态绑定，都必须始终同步添加`rel="noopener"`（而非仅`target="_blank"`），这才是真正安全、合规、无冗余的实践标准。

直接加 target="_blank" 不够，不加 rel="noopener" 会有安全风险和性能问题

为什么 target="_blank" 默认不安全

当页面用 target="_blank" 打开新页面时，新页面会通过 window.opener 访问原页面的 window 对象——这意味着它能调用 window.opener.location = 'https://evil.com' 反向劫持你的页面（即“opener abuse”）。Chrome、Firefox 等现代浏览器已默认将跨源 opener 设为 null，但同源场景下仍存在风险，且旧版浏览器完全不受限。

实操建议：

• 始终搭配使用 rel="noopener"（推荐）或 rel="noreferrer"
• rel="noopener"：切断 window.opener 引用，保留 Referer 头
• rel="noreferrer"：同时移除 window.opener 和 Referer 头（适合不想泄露来源的场景）
• 不要写成 target="_blank" rel="noreferrer noopener" ——noopener 已隐含 noreferrer 的 opener 行为，二者并列冗余（尽管浏览器兼容）

target="_blank" 在不同浏览器中的行为差异

虽然规范定义 target="_blank" 应打开新标签页（非窗口），但实际取决于用户浏览器设置和系统偏好：

• Chrome / Edge：默认新开标签页；若用户禁用标签页、启用弹窗拦截，可能退化为新窗口
• Safari：在 iOS 上强制在新标签页中打开（不可配置）；macOS 上受「在新窗口中打开链接」系统选项影响
• Firefox：遵循用户设置，可通过 browser.link.open_newwindow 配置项控制（值为 1/2/3）
• 没有 JS 干预时，无法强制“新开窗口”（window.open() 才能控制尺寸、位置等）

常见错误写法与修复

这些写法看似能用，但埋了坑：

• 只写 → 缺少 rel，存在安全漏洞
• 写成 target="_blank_" 或 target="blank" → 浏览器当作命名窗口处理，可能复用已有标签页，导致意外覆盖
• 在 Vue/React 中动态绑定：:target="isExternal ? '_blank' : '_self'" 却忘了同步绑定 :rel="isExternal ? 'noopener' : ''" → 条件缺失导致漏掉防护
• 用 target="_blank" 链接到同域页面（如内部文档）→ 仍需 rel="noopener"，因为同源下 window.opener 完全可读写

真正安全的写法就这一行：Link。别省略 rel，哪怕只是个静态链接——这个细节在审计工具（如 Lighthouse）里直接标为「严重」，而且一旦上线，攻击面就长期存在。

本篇关于《HTML中使用标签打开新窗口的方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！