加 rel="noopener" 是底线：它切断 window.opener 引用防跳转劫持，且保留 referer；rel="noreferrer" 则同时禁用二者，适合隐私敏感场景。
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" 在真实环境里的渗透路径。
