target="_blank" 必须搭配 rel="noopener" 使用，否则新页面可通过 window.opener 劫持原页面并阻塞主线程；rel="noreferrer" 可选，用于隐藏 Referer，但不可替代 noopener。
target="_blank" 是让链接在新标签页打开的最直接方式，但它不是“加了就完事”，不加 rel="noopener" 会带来安全与性能隐患。
为什么 target="_blank" 单独用有风险
旧写法 <a href="https://example.com" target="_blank">链接</a> 会让新页面通过 window.opener 完全访问原页面的 window 对象——这意味着对方页面能调用 window.opener.location = "https://evil.com" 劫持你的页面，还能读取你的 DOM 或 Cookie（尤其在同源时）。同时，新页面会阻塞原页面的主线程，影响性能。
rel="noopener" 必须跟上，rel="noreferrer" 视需补充
现代写法必须包含 rel="noopener"：
<a href="https://example.com" target="_blank" rel="noopener">安全打开</a>
rel="noopener" 切断 window.opener 引用，消除安全漏洞和性能拖累。如果还希望隐藏来源（比如不向目标站发送 Referer 头），可叠加 rel="noreferrer"：
立即学习“前端免费学习笔记（深入）”；
-
rel="noopener"：必备，解决安全+性能问题 -
rel="noreferrer"：可选，等价于rel="noopener nofollow"，但会丢失Referer，影响分析统计 - 不要只写
rel="noreferrer"而漏掉noopener—— Safari 旧版对noreferrer的支持不完整，仍可能暴露window.opener
兼容性与浏览器差异要注意
target="_blank" 本身兼容所有浏览器，但 rel="noopener" 在 IE 不支持（IE11 及以下完全忽略该属性，但也不会报错）。如果你必须支持 IE：
- 确认业务是否真需 IE 支持；若必须，可 JS 动态打开：
window.open(url, '_blank', 'noopener')（注意：此处的noopener是window.open的 features 字符串参数，非 HTML 属性） - Chrome、Firefox、Edge、Safari 12.1+ 均完整支持
rel="noopener" - 部分 CMS 或富文本编辑器会自动过滤
rel属性，需检查输出源或后端白名单配置
别忽略 target="_blank" 对用户体验的影响
用户习惯和可访问性也得兼顾：
- 屏幕阅读器会播报 “在新窗口中打开”，但若没视觉提示（如外链图标或文字标注），视障用户可能不知情
- 移动端 Safari 默认在新标签页打开，但用户手势返回时容易迷路；建议仅对明确需要跳转离开当前流程的链接使用（如文档下载、第三方服务登录）
- 不要给站内导航链接滥用
target="_blank"—— 这违背用户预期，且不利于 SEO
真正关键的不是“怎么写”，而是“为什么写这个组合”；漏掉 rel="noopener" 的 target="_blank" 就像开着门锁着窗，看似安全，实则留了后门。
