target="_blank"必须搭配rel="noopener noreferrer"才安全，否则新页面可通过window.opener劫持原页面；合法target值仅\_self、\_blank、\_parent、\_top和framename五类。
target="_blank" 是唯一可靠且语义明确的新标签页打开方式；但单独使用它等于留后门，必须搭配 rel="noopener noreferrer" 才算安全落地。
为什么 target="_blank" 必须配 rel="noopener noreferrer"
不加 rel="noopener" 时，新页面可通过 window.opener 直接控制原页面跳转、读取 DOM，甚至执行恶意重定向。这不是理论风险——攻击者只需在链接目标页写一行 window.opener.location = "https://fake-login.example"，就能把你的用户劫持走。
常见错误包括：
-
target="blank"（漏下划线）→ 浏览器当普通字符串处理，等同于target="_self，当前页跳转 -
target="_new"或target="new"→ 非标准值，所有现代浏览器都忽略，退化为_self - 只加
rel="noopener"却漏掉noreferrer→ Referer 头仍会泄露来源 URL，影响隐私
target 的合法值到底有哪些
W3C 和 HTML Living Standard 明确只承认以下五类值：
立即学习“前端免费学习笔记（深入）”；
-
_self：默认行为，当前标签页加载（可省略） -
_blank：唯一推荐用于“新开页”的值 -
_parent：仅在嵌套<iframe>场景中有效，指向父级上下文 -
_top：跳出所有 iframe 层级，在顶层窗口加载 -
framename：匹配页面中某个<iframe name="xxx">，现已极少使用
像 _window、_newtab、new 这类写法，浏览器不会报错，但也不会生效——它们只是被当作自定义窗口名，而由于对应窗口不存在，最终仍 fallback 到 _self。
Vue/React 里写 <a> 标签容易踩的坑
框架不改变 HTML 语义，但容易因绑定方式绕过原生行为：
- 用
@click.prevent="window.open(url)"替代<a href="..." target="_blank">→ 右键菜单丢失“复制链接地址”，SEO 不识别，且 SSR 环境直接报ReferenceError: window is not defined - 动态生成
href时未校验，导致href="undefined"或href="javascript:void(0)"→ 点击无响应或触发意外 JS 行为 - 在
<router-link>或<Link>中硬塞target→ 这些组件不支持该属性，会被忽略，必须退回到原生<a>
可访问性与用户体验的隐性成本
屏幕阅读器会播报 target="_blank"，但不会自动说明“将在新标签页打开”。用户可能误以为当前页会跳转，结果发现原页面还在，新页又没注意——尤其对低视力或认知障碍用户更不友好。
所以实际项目中建议：
- 外部链接才用
target="_blank"；站内导航一律保持_self - 在链接文本后加视觉提示，比如
External site (opens in new tab)，或用aria-label补充语义：<a href="..." target="_blank" rel="noopener noreferrer" aria-label="Example website (opens in new tab)">Example</a> - 避免批量给所有外链加
_blank——用户手机端开一堆标签页后，内存和电池压力是真实存在的
真正难的不是写出 target="_blank"，而是判断“这个链接到底该不该新开页”，以及确保它新开得干净、安全、可感知。
