必须同时写 target="_blank" 和 rel="noopener noreferrer"，只写前者会被现代浏览器降级为当前页跳转；后者不是“锦上添花”，而是阻断 window.opener 访问、防止 Referer 泄露的强制要求。
必须同时写 target="_blank" 和 rel="noopener noreferrer"，只写前者会被现代浏览器降级为当前页跳转；后者不是“锦上添花”，而是阻断 window.opener 访问、防止 Referer 泄露的强制要求。
为什么只写 target="_blank" 会失效？
Chrome 49+、Firefox 52+、Safari 12.1+ 默认对孤立的 target="_blank" 施加安全限制：若未显式声明 rel="noopener"，浏览器会静默将其行为退化为 target="_self" —— 表现就是点击后仍在当前页跳转，毫无预警。
- 常见误写：
target="blank"（漏下划线）、target="_new"（非标准值），两者均被当作自定义窗口名处理，因无对应窗口，最终 fallback 到当前页 -
href="#"或href=""即使加了target="_blank"也不会触发跳转，因为没有真实目标 URL - 部分 Android WebView 或 iOS WKWebView 默认禁用弹窗，
target="_blank"可能完全静默失败，需额外配置setJavaScriptCanOpenWindowsAutomatically(true)
rel="noopener noreferrer" 缺一不可的原因
rel="noopener" 切断新页面对原页面 window.opener 的引用，防止其调用 location.replace() 劫持原页；rel="noreferrer" 阻止 HTTP Referer 头发送，避免来源 URL 泄露。二者作用不同，不能互相替代。
- 只写
rel="noreferrer"而漏掉noopener：旧版 Safari（window.opener，存在钓鱼风险 - 只写
rel="noopener"：虽已切断 opener，但 Referer 仍可能泄露敏感路径（如含 token 的 URL） - 两个属性顺序无关，可任意排列，但必须共存于同一
<a>标签中
动态生成链接时怎么不漏掉安全属性？
用字符串拼接 HTML（如 `<a href="${url}" target="_blank">...</a>`）极易遗漏 rel，尤其在模板逻辑复杂或多人协作时。更可靠的方式是用 DOM API 显式构造：
立即学习“前端免费学习笔记（深入）”；
const link = document.createElement('a');
link.href = 'https://example.com';
link.target = '_blank';
link.rel = 'noopener noreferrer'; // 注意：这里必须是字符串，不是数组
link.textContent = '示例链接';
document.body.appendChild(link);
- 插入前可用
link.outerHTML检查是否三项齐全 - 若需批量处理已有链接（如外链自动加 target），建议用 CSS 选择器筛选
a[href^="http"]，再统一设置target和rel - Vue/React 中不要依赖
v-bind或props动态拼接属性字符串，应直接绑定rel字段，确保 SSR 和客户端一致
target 的合法值有哪些？别踩自定义命名的坑
W3C 明确只承认五种合法值：_self、_blank、_parent、_top 和 framename（匹配 <iframe name="xxx">）。所有其他写法（如 _window、_search）均为非标准，浏览器忽略并 fallback 到 _self。
-
target="dashboard"不等于“每次开新页”，而是“复用名为 dashboard 的窗口/标签页”——第二次点击会覆盖加载，不是新增 -
target="_parent"在无 iframe 嵌套时等效于_self；target="_top"在单页应用中极少需要，误写成target="parent"（缺下划线）会触发非标准窗口复用，且无noopener保护 - 全局
<base target="_blank">会影响所有相对链接，但无法自动注入rel，反而增加安全隐患，不推荐使用
真正容易被忽略的不是语法，而是上下文：iframe 的 sandbox 属性可能直接禁用 target="_blank"，WebView 需要手动开启弹窗权限，旧版 Safari 对 noreferrer 的兜底能力有限——这些都不是加个属性就能解决的，得看环境、测真机、查控制台报错。
