如何安全移除对象内HTML中的JavaScript以修复DOM XSS漏洞

你之前尝试的两种修复方案无法通过扫描，本质有两个核心原因：一是清洗逻辑本身存在安全漏洞，无法覆盖全部XSS攻击向量；二是自定义清洗逻辑不在Coverity内置的可信安全处理规则范围内，不会被判定为有效防护。

原有方案失效原因 #

• 正则移除script标签方案：防护覆盖范围严重不足，XSS攻击完全不需要依赖script标签，<img src=x onerror=stealCookie()>、<a href="javascript:stealCookie()">、<div onmouseover=stealCookie()>这类携带事件属性、javascript伪协议的payload可以直接绕过正则匹配，静态扫描规则可识别该类防护的缺陷，因此不会判定为修复有效。
• 临时DOM移除script标签再取innerHTML方案：一方面仅删除script标签无法防御其他类型的XSS向量，另一方面将待清洗字符串传入临时DIV的innerHTML时，恶意代码已经完成DOM解析，本身就存在潜在风险，同样不会被扫描工具认可。

可落地的有效修复方案 #

方案1：不需要保留HTML渲染能力时（最优解） #

如果response.Object返回的内容不需要解析为HTML结构，直接用jQuery的.text()方法替代.html()，所有内容会被作为纯文本渲染，完全不存在DOM XSS风险，可100%通过扫描。

// 纯文本场景下无任何XSS风险
$("#doodah").text(response.Object);

方案2：需要保留部分安全HTML渲染能力时 #

不要自研清洗逻辑，直接使用业界通用的DOMPurify库做HTML净化，该库的sanitize方法是Coverity、SonarQube等所有主流静态扫描工具默认认可的可信安全处理逻辑，默认配置即可拦截所有已知XSS向量，包括各类编码绕过、事件属性注入、伪协议注入等场景。

// 引入DOMPurify后对待插入内容做净化
const safeContent = DOMPurify.sanitize(response.Object);
$("#doodah").html(safeContent);

方案3：无法引入第三方库且需保留HTML渲染时 #

在支持现代浏览器的项目中开启Trusted Types（受信任类型）策略，通过浏览器原生API强制管控所有DOM注入操作，自定义严格的清洗逻辑，该实现同样会被静态扫描工具识别为有效防护。

// 需先在内容安全策略（CSP）中配置 require-trusted-types-for 'script'
if (window.trustedTypes?.createPolicy) {
  const safeHtmlPolicy = trustedTypes.createPolicy('customHtmlPurify', {
    createHTML: (dirtyContent) => {
      // 注意：此处不可仅删除script标签，需逐节点遍历移除所有on*事件属性
      // 对a、iframe、img等标签的src、href属性做白名单协议校验（仅允许http/https/相对路径）
      const container = document.createElement('div');
      container.innerHTML = dirtyContent;
      // 此处补充完整的节点遍历、属性校验逻辑
      return container.innerHTML;
    }
  });
  $("#doodah").html(safeHtmlPolicy.createHTML(response.Object));
}

注意：自研清洗逻辑的防护成本极高，很容易出现遗漏导致被绕过，非特殊情况优先选择前两种方案。

内容的提问来源于stack exchange，提问作者JR.pnw