必须同时写 target="_blank" 和 rel="noopener noreferrer"，仅 target="_blank" 会被现代浏览器降级为当前页跳转；前者控制新开标签页，后者切断 window.opener 访问并隐藏来源，缺一不可。
要在新标签页打开链接，必须写 target="_blank"，但仅这样还不够——现代浏览器会因安全策略将其降级为当前页跳转，除非同时加上 rel="noopener noreferrer"。
正确写法：必须两个属性一起用
只加 target="_blank" 是不完整的。标准、安全、兼容的写法是：
-
target="_blank"告诉浏览器开新标签页 -
rel="noopener noreferrer"切断新页面对原页面的控制权，防止被劫持，也隐藏来源地址 - 两个属性可放在
<a>标签任意位置，顺序不限，但都不可省略
示例：<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部链接</a>
常见错误写法及后果
这些看似相似的写法，实际效果可能完全不是你想要的：
立即学习“前端免费学习笔记（深入）”；
-
target="blank"（漏下划线）→ 浏览器当普通字符串处理，等同于target="_self，仍在当前页打开 -
target="_new"或target="new"→ 非标准值，所有主流浏览器都忽略，退化为当前页 - 只写
rel="noreferrer"却漏掉noopener→ Safari 旧版仍可能暴露window.opener，存在安全风险 -
href="#"或href=""→ 即使加了target="_blank"，也不会跳转，因为没真实目标
动态生成链接时怎么保证安全
JavaScript 拼接 HTML 字符串容易漏掉 rel。更稳妥的方式是用 DOM API 显式设置：
- 用
document.createElement('a')创建元素 - 依次赋值：
link.href = url、link.target = '_blank'、link.rel = 'noopener noreferrer' - 插入前检查
link.outerHTML，确认三项都在
服务端模板（如 PHP、Jinja）中也要统一补全 rel，不能依赖前端修补。
哪些场景不能只靠 target="\_blank"
某些环境会限制或忽略该属性：
- 微信内置 WebView、部分旧版安卓浏览器：可能直接无视
target，需改用window.open(url, '_blank') - 富文本编辑器或 CMS：常过滤
rel属性，要检查后端白名单配置 - 严格 CSP 策略下：若未允许
popup，控制台会报错Refused to open a window - Vue/React 中用
<router-link>或封装组件：它们不支持target，必须退回原生<a>标签
