rel="noopener"必须与target="_blank"配合使用，强制新页面window.opener为null以防范tabnabbing攻击；单独使用无效，拼写错误（如noopen、no-opener）或用于不支持rel的标签均属常见错误。
rel="noopener"防的是Tabnabbing攻击，不是“建议加”，是必须加
它强制新页面的 window.opener 为 null，让跳转后的页面根本拿不到原页面的引用。没有 window.opener，攻击者连 window.opener.location.replace() 都调用不了——不是被拦截，是压根不存在。
常见错误现象：
- 只写
target="_blank"，没加rel="noopener"，Lighthouse 直接标高危 - 拼错成
rel="noopen"或rel="no-opener"（必须小写、无连字符） - 在
<form target="_blank"></form>里硬塞rel属性（form不支持rel，得改用window.open()并显式传参）
必须和target="_blank"一起用才生效，单独写rel="noopener"无效
rel="noopener" 只在创建新浏览上下文时起作用，包括：<a target="_blank"></a>、<form target="_blank"></form>、window.open(url, "_blank") 这三类场景。其他情况（比如 target="_self"）加了也白加。
关键点：
- Chrome ≥64、Firefox ≥79、Safari ≥12.1 虽有隐式
noopener，但一旦你写了其他rel值（如rel="nofollow"），隐式机制就失效 - Safari ≤12.0 和部分 Android WebView 完全不支持隐式行为，不显式写就等于裸奔
- IE 不支持
rel="noopener"，但它本身也不支持window.opener跨页引用，风险较低但兼容性差
rel="noopener"和rel="noreferrer"解决的是不同问题
rel="noopener" 管 JS 引用安全，rel="noreferrer" 管 HTTP 请求头隐私。两者常组合使用，但不能互相替代。
容易踩的坑：
- 以为
rel="noreferrer"就够了——它在旧版 Safari（≤11.1）中不保证window.opener === null，必须显式写noopener - 写成
rel="noreferrer noopener"，某些 CMS 或 Markdown 渲染器会按顺序取第一个合法值，可能只认noreferrer而跳过noopener - 业务强依赖
document.referrer（比如来源统计或白名单校验），加了noreferrer会导致字段为空，请求被拒
动态生成链接最容易漏掉rel属性
手写 HTML 很容易补上，但真实风险集中在服务端或富文本环节：
- WordPress、Discourse 等 CMS 自动给外链加
target="_blank"，但未必补rel - 富文本编辑器导出 HTML 时，原始内容若没带
rel，不会自动注入 - Vue 的
v-html或 React 的dangerouslySetInnerHTML渲染用户输入，原始 HTML 若没rel，前端无法事后修补 - 服务端模板拼接链接时硬编码
target="_blank"，却忘了预留rel字段
最常被忽略的不是语法对不对，而是“谁在生成这个链接”——只要不是开发者亲手写的静态标签，就得在生成环节强制注入，而不是靠运行时补全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
