HTML中使用rel="noopener"防止窗口劫持的方法如下：在HTML中，rel="noopener" 是一个用于 标签的属性，用来防止通过 window.opener 引用当前页面的恶意网站。当用户点击链接并打开新窗口时，如果目标页面通过 window.opener 访问原始页面，可能会导致安全问题（如窗口劫持）。使用 rel="noopener" 可以阻止这种行为。使用方法

2026-05-12 17:45:37 0浏览 收藏

在HTML中使用`rel="noopener"`是防范窗口劫持攻击的关键安全实践——当配合`target="_blank"`打开外部链接时，它能强制将新页面的`window.opener`置为`null`，彻底切断其对原始页面的访问与操控能力（如恶意重定向、历史篡改或脚本注入），有效抵御钓鱼和跳转劫持；而忽略该属性、拼写错误或仅添加不搭配`target="_blank"`都会使防护失效，尤其在动态渲染（如Vue/React富文本）或服务端生成链接场景下更易遗漏，因此推荐对外部不可信链接统一采用`rel="noopener noreferrer"`，并在链接生成源头强制注入，而非依赖运行时补救。

为什么 rel="noopener" 能防窗口劫持

当用 target="_blank" 打开新页面时，新页面可通过 window.opener 访问原页面的 window 对象——这意味着它能调用 window.location.replace()、读取历史记录，甚至执行脚本篡改原页。攻击者常利用这点做钓鱼或跳转劫持。rel="noopener" 会切断这个引用，让新页面的 window.opener 为 null，彻底阻断控制链。

rel="noopener" 必须和 target="_blank" 一起用才生效

单独写 rel="noopener" 没有意义，浏览器只在存在 target="_blank"（或 target="_popup" 等非当前上下文目标）时才启用 opener 隔离逻辑。

正确写法示例：

<a href="https://example.com" target="_blank" rel="noopener">外部链接</a>

常见错误：

• 漏掉 target="_blank"，只加 rel="noopener"
• 写成 rel="noopen" 或 rel="no-opener"（拼写错误）
• 在
  中忘记加 rel（rel 属性不适用于 form，需改用 JavaScript + window.open() 并显式传 null）

要不要加 rel="noreferrer"？

rel="noreferrer" 会同时禁用 window.opener 和 Referer 头，比 noopener 更严格。但要注意：

• 如果后端依赖 Referer 做简单来源校验（如防止图片盗链），加了 noreferrer 可能导致请求被拒
• noreferrer 在部分旧版 Safari（≤11.1）中会隐式降级为 noopener，行为不一致
• 现代最佳实践是：对外部不可信链接用 rel="noopener noreferrer"；对需要传递 Referer 的合作方链接，只用 rel="noopener"

Vue/React 等框架里容易漏掉的地方

模板中写死的 标签容易补上 rel，但动态生成的链接常被忽略：