不加 rel="noopener noreferrer" 的 target="_blank" 是带后门的链接，因新页面可通过 window.opener 劫持原页面跳转或篡改内容，属已知可利用的 tabnabbing 攻击；合法 target 值仅 _self、_blank、_parent、_top 和 framename 五类，其余如 "blank" 或 "_new" 均无效并降级为 _self。
不加 rel="noopener noreferrer" 的 target="_blank" 是带后门的链接——它能让新页面控制你原来的页面，不是理论风险，而是已知可利用的攻击面。
为什么 target="_blank 必须配 rel="noopener noreferrer"
浏览器打开新标签页时，默认让新页面保留对原页面的引用（window.opener）。恶意页面只要执行 window.opener.location = "https://fake-login.example"，就能把用户正在浏览的原始页面悄悄跳转到钓鱼页。
常见错误现象包括：
- 点开外部链接后，返回原页发现地址变了
- 原页面卡顿、响应变慢（两个页面共享渲染进程）
- 控制台出现
Blocked a frame with origin ... from accessing a cross-origin frame报错（其实是浏览器在拦截已发生的劫持尝试）
必须同时写全：rel="noopener noreferrer"。只写 noopener 不能阻止 Referer 泄露；只写 noreferrer 在旧版 Safari 中仍存在 opener 访问漏洞。
target 的合法值到底有哪些，哪些是无效拼写
W3C 明确只承认五类值：_self、_blank、_parent、_top 和自定义 framename。其他写法浏览器不会报错，但会静默降级为 _self。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
容易踩坑的写法：
-
target="blank"（漏下划线）→ 当作普通窗口名处理，因无同名窗口，最终在当前页跳转 -
target="_new"或target="_window"→ 非标准值，所有现代浏览器忽略 -
target="_BLANK"→ 区分大小写，_blank才有效 -
target="myFrame "（末尾空格）→ 匹配失败，行为不一致（部分浏览器 fallback 到_self，部分到_blank）
Vue/React 里用 target 容易绕过安全约束
框架不改变 HTML 语义，但容易因写法绕过原生防护机制：
- 用
@click.prevent="window.open(url)"替代<a></a>→ 右键菜单丢失“复制链接”，SSR 环境直接报ReferenceError: window is not defined - 在
<router-link></router-link>或<link>上硬加target="_blank"→ 这些组件不支持该属性，会被忽略，必须退回到原生<a href="" target="_blank" rel="noopener noreferrer"></a> - 动态生成
href未校验，导致href="undefined"→ 点击后跳转到http://yoursite.com/undefined，404 或触发意外逻辑
真正影响用户体验的隐性成本
屏幕阅读器会读出 target="_blank"，但不会自动说明“将在新标签页打开”。用户可能误以为当前页会跳转，结果原页面还在、新页又没注意——这对低视力或认知障碍用户尤其不友好。
所以实际项目中建议：
- 仅对外部链接使用
target="_blank"；站内导航一律保持_self - 显式补充说明，比如链接文本写成“GitHub 仓库（在新标签页中打开）”，或加
aria-label="GitHub 仓库，在新标签页中打开" - 不要滥用
target分组（如target="group1"），现代浏览器对多标签页复用逻辑已优化，且这种写法在 iframe 场景外基本无意义
最常被忽略的一点：即使你用了 rel="noopener noreferrer"，如果目标域名本身不可信，依然可能通过 social engineering 或其他 JS 注入手段诱导用户操作——rel 解决的是技术层面的 opener 劫持，不是信任问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
