<base target="_blank">仅影响当前页未显式设target的<a>和<form>元素，不作用于<iframe>、<img>及JS跳转；且不自动添加rel="noopener"，存在安全风险，需JS补全。
base target="_blank" 会全局影响哪些元素
<base target="_blank"> 只作用于当前页面中**未显式声明 target 属性**的 <a> 和 <form> 元素。它不修改已有 target 的标签，也不影响 <iframe>、<img> 或纯 JS 跳转。
常见误判点：
- 写了
<base target="_blank">，但某个<a href="...">同时带了target="_self"—— 这个链接仍会在当前页打开 -
<a href="#">或<a href="javascript:void(0)">会被带上target="_blank"，但点击后实际无跳转，却触发新标签页（空页），属于隐性 bug -
<form action="/submit">提交后也会新开标签页，可能打断用户填写流程（比如登录后跳到新页，原页表单状态丢失）
为什么 base target="_blank" 缺少 rel="noopener" 是硬伤
浏览器不会为 <base> 自动补 rel="noopener noreferrer"。所有被它影响的外链，都会让新页面拿到 window.opener 引用，可执行 window.opener.location = 'https://evil.com' 劫持原页。
2026 年主流浏览器（Chrome 95+、Firefox 102+、Safari 17+）已默认对无 rel="noopener" 的 target="_blank" 链接降级处理：要么静默 fallback 到 _self，要么新开标签页但置空 window.opener（不可靠）。你看到“点了没反应”，大概率是这个原因。
立即学习“前端免费学习笔记（深入）”；
无法绕过，必须补。而 <base> 本身不支持 rel 属性 —— 它只管 target，不管安全。
替代方案：JS 批量加 target + rel 更可控
想全局控制外链行为，又不牺牲安全性，推荐在 DOM 加载完成后用 JS 注入：
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('a[href^="http"]:not([href*="yoursite.com"])')
.forEach(link => {
link.target = '_blank';
link.rel = 'noopener noreferrer';
});
});
关键点：
- 用属性选择器精准匹配外链，排除内链和锚点（
href="#section"） - 检查是否已存在
rel，避免重复赋值（如某些 CMS 会自动加rel="nofollow"） - 若项目用 Vue/React，应在组件挂载逻辑里统一处理，别依赖 HTML 模板硬写
- 注意 SSR 场景：服务端渲染时无法运行 JS，需在模板层或构建时注入（如用 Webpack DefinePlugin 注入环境变量判断）
真正难处理的是边界情况
不是“怎么设”，而是“设完谁受影响、谁被漏掉、谁因此变慢”。比如：
- 微信内置 WebView 对
<base target>支持极差，很多版本直接忽略 - 带
download属性的链接（<a download href="file.pdf">）加了target="_blank"会失效 —— 下载行为优先级高于跳转 - Shadow DOM 内部的
<a>不受主文档<base>影响 - 部分旧版 Safari 在 iframe 中使用
<base target>会导致相对路径解析异常
这些细节上线前很难覆盖测试，最容易被忽略的是表单提交和空链接被连带影响 —— 它们不会报错，但会让用户操作逻辑断裂。
