HTML外链属性怎么安全清理？链接优化实战步骤-html教程-PHP中文网

只加target="_blank"危险，因新页面可通过window.opener劫持原页面跳转或篡改DOM；必须搭配rel="noopener noreferrer"切断引用并防Referer泄露。

html外链属性怎么安全清理？链接优化实战步骤

为什么只加 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 DHTML 页面生成器

生成可在 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