只加target="_blank"危险，因新页面可通过window.opener劫持原页面跳转或篡改DOM；必须搭配rel="noopener noreferrer"切断引用并防Referer泄露。
为什么只加 target="_blank" 是危险操作
浏览器在用 target="_blank" 打开新页面时，会默认让新页通过 window.opener 访问原页面的 DOM。攻击者只要在目标页写一行 window.opener.location = 'https://phishing-site.com'，就能把你的用户正在操作的后台页面悄悄重定向——而用户完全无感知。这种 tabnabbing 在管理后台、支付页、登录态页面中尤其致命。
这不是理论风险：Chrome、Firefox、Safari 全部默认启用该行为，且不加任何提示。
- 必须同时设置
rel="noopener noreferrer"才能切断这条通道 -
noopener切断window.opener引用，noreferrer还额外阻止Referer头泄露来源 - 如果只需防劫持，
noopener足够；若还要隐藏来源（比如隐私敏感场景），才加noreferrer
如何批量修复已存在的不安全外链
直接遍历所有带 target="_blank" 但没设 rel 的 a 标签，补全属性即可。注意：不能只靠正则替换 HTML 字符串，否则会丢事件监听器、破坏 Vue/React 绑定状态。
- 执行前先筛选：
document.querySelectorAll('a[target="_blank"]:not([rel~="noopener"])') - 对每个匹配元素执行：
a.rel = 'noopener noreferrer'（或用a.setAttribute('rel', 'noopener noreferrer')） - 如果已有其他
rel值（如rel="nofollow"），需合并而非覆盖：a.rel += ' noopener noreferrer' - 动态插入的链接（如 AJAX 加载内容）需在插入后立即运行该逻辑，或封装为 MutationObserver 监听
href 属性值本身怎么判断是否为外链
不能只看域名是否不同——协议、端口、子域都可能影响判定。浏览器原生的 URL 构造函数是最可靠方式：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
function isExternalLink(href) {
try {
const url = new URL(href, location.href);
return url.origin !== location.origin;
} catch {
return false; // 无效 URL，按内链处理更安全
}
}
常见误判点：
-
href="/path"和href="path"都是相对路径，属于内链 -
href="//cdn.example.com/file.js"是协议相对 URL，需比对location.protocol + '//' + location.host -
href="mailto:admin@example.com"或tel:+8613800138000不是 HTTP(S) 链接，无需加rel
清理完外链，下一步该优化什么
安全只是起点。真实项目里，外链还涉及加载性能、SEO 权重传递、可访问性三方面：
- 对非关键外链（如友情链接、广告）加
rel="nofollow"，避免权重误导 - 需要预加载的资源（如文档 PDF、常用工具页），可加
rel="prefetch"，但仅限用户大概率点击的链接 - 所有外链建议加上
aria-label，例如aria-label="访问 GitHub 官网（在新窗口打开）"，方便读屏软件识别意图 - 不要给外链加
download属性——浏览器会拒绝跨域下载，且违反用户预期
最常被忽略的是：清理和优化必须同步到服务端渲染输出或 CMS 导出内容里。前端 JS 补丁只能兜底，源头不改，每次发版都得重复修。
