必须写为rel="noopener noreferrer",末尾带连字符或空格均无效;该属性仅与target="_blank"共用时才切断window.opener并阻止Referer泄露,否则新页面可劫持原页。

rel="noopener-noreferrer-" 末尾带连字符是无效写法
浏览器会直接忽略这个 rel 属性值,因为它不符合 HTML 规范的 token 分割规则。rel 值必须由空格分隔的合法关键词组成,noreferrer- 不是标准关键字,连字符结尾会被解析器截断或整体拒识。实际效果等同于没写 rel,target="_blank" 依然裸奔。
noopener 和 noreferrer 必须小写、无连字符、无空格
常见错误包括:rel="NOOPENER"(大小写错)、rel="no-opener"(连字符非法)、rel="noopener noreferrer "(末尾空格导致整个值失效)。这些写法在 Safari、Firefox 或旧版 WebView 中大概率不生效,安全防护完全落空。
正确写法只有一种:rel="noopener noreferrer",且必须与 target="_blank" 同时出现才触发隔离逻辑。
window.opener 未切断的风险不是理论问题
- 恶意页面可执行
window.opener.location.replace("https://fake-login.example"),用户返回时已在钓鱼页 -
window.opener.document.write("")直接清空你原页面 DOM - 两个标签页共享渲染进程,对方跑死循环会导致你页面卡死
- TikTok 2023 年真实被利用过,不是“可能”而是“已发生”
服务端/富文本场景最容易漏掉 rel 属性
手动写 HTML 时容易补上,但以下场景几乎从不自动加:CKEditor 导出的外链、Vue 的 v-html 渲染、评论区自动识别 URL、CMS 模板拼接链接。这些才是真实高危区——target="_blank" 被自动注入,rel 却没人管。
立即学习“前端免费学习笔记(深入)”;
别依赖 Chrome 88+ 的隐式 noopener:Safari ≤16.6、Firefox 旧版本、微信内置 WebView 等仍完全依赖显式声明。安全不是靠浏览器猜,是靠你每处动态出口都守住这一行。



















