外链新窗口打开有风险吗？

外链使用 target="_blank” 时若未正确添加 rel 属性，可能引发严重的“opener abuse”安全风险——恶意新页面可劫持原始页面跳转至钓鱼网站；虽然现代浏览器已默认补全 rel="noopener"，但旧版兼容性差、框架动态渲染易遗漏、第三方嵌入内容难以控制等问题仍普遍存在；因此，必须显式添加 rel="noopener" 作为安全底线（兼顾 Referer 传递），对广告或用户生成内容则应升级为 rel="noopener noreferrer"，并结合构建时自动补全、服务端白名单过滤或 CSP 等多层防护，才能真正堵住这一常被忽视却极具破坏力的攻击入口。

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

因为 target="_blank" 会赋予新页面对原页面的 window.opener 访问权限，只要新页面执行 window.opener.location = 'https://evil.com'，就能劫持你的原始页面跳转——这叫「opener abuse」。现代浏览器虽已默认加 rel="noopener"（Chrome 88+、Firefox 79+），但旧版或未显式声明时仍存在风险。

必须加 rel="noopener" 吗？rel="noreferrer" 呢？

加 rel="noopener" 是底线：它切断 window.opener 引用，防止跳转劫持，且不影响 Referer 头（目标站仍能知道来源页）。而 rel="noreferrer" 会同时禁用 window.opener 和 Referer，适合隐私敏感场景（如广告链接、用户生成内容中的外链）。

实际建议按需选择：

• 普通外链（如官网友情链接）→ rel="noopener"
• 第三方广告/UGC 内容 → rel="noopener noreferrer"
• 需要传递 Referer 给合作方（如联盟追踪）→ 只用 rel="noopener"，不加 noreferrer

Vue/React 中动态渲染外链容易漏掉 rel 属性

框架里常通过 v-bind:href 或 href={url} 渲染链接，但 rel 很容易被忽略，尤其当链接来自 CMS 或用户输入时。

安全写法示例：

<a :href="externalUrl" target="_blank" rel="noopener noreferrer">外部链接</a>

若用 v-html 或 dangerouslySetInnerHTML 渲染富文本，必须在服务端或前端做白名单过滤，强制补全 rel="noopener noreferrer"，否则攻击者可注入恶意 HTML 绕过防护。

只加 rel="noopener" 还不够？注意 Safari 的兼容性坑

Safari 15.4 之前版本对 rel="noopener" 支持不完整，某些情况下仍保留部分 window.opener 能力。稳妥起见，可配合 JavaScript 补丁：

<a href="https://example.com" target="_blank" onclick="this.rel='noopener noreferrer'">链接</a>

或者统一用事件监听器批量处理：

document.querySelectorAll('a[target="_blank"]').forEach(el => {
  if (!el.rel.includes('noopener')) el.rel += ' noopener';
  if (!el.rel.includes('noreferrer')) el.rel += ' noreferrer';
});

不过更推荐在构建时用插件（如 rehype-external-links）自动补全，避免运行时 patch 的不确定性。

真正麻烦的是那些没权限改源码的嵌入式外链，比如第三方评论系统或老 CMS 输出的内容——这时候只能靠 CSP 的 frame-ancestors 或 referrer-policy 做兜底，但效果有限。别低估一个没加 rel 的 target="_blank" 在真实环境里的渗透路径。

终于介绍完啦！小伙伴们，这篇关于《外链新窗口打开有风险吗？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！