如何解决JavaScript XSS漏洞？AJAX加载HTML显示异常问题

核心矛盾拆解 #

你遇到的问题本质是Trusted Types的强制安全拦截与HTML正常渲染的冲突：启用策略后，浏览器会拒绝直接用字符串赋值innerHTML或调用jQuery的html()，但完全关闭策略又会触发Coverity的安全告警。关键是要正确配置安全策略+用符合规范的方式渲染HTML。

具体解决方案 #

1. 配置精准的Trusted Types安全策略 #

创建仅允许合法HTML的策略，过滤script标签、事件属性（如onclick、onload）等危险内容，同时保留正常HTML结构：

let safeHtmlPolicy;
if (window.trustedTypes) {
  safeHtmlPolicy = trustedTypes.createPolicy('mvc-form-safe-html', {
    createHTML: (rawHtml) => {
      // 移除所有script标签（含嵌套）
      let cleaned = rawHtml.replace(/<script\b[^>]*>([\s\S]*?)<\/script>/gi, '');
      // 移除所有on开头的事件属性
      cleaned = cleaned.replace(/\bon\w+\s*=\s*["']?[^"'>]+["']?/gi, '');
      // 可按需添加规则：比如限制仅允许div、input等表单相关标签
      return cleaned;
    }
  });
}

2. 用TrustedHTML对象渲染内容 #

Trusted Types启用后，必须使用策略生成的TrustedHTML对象赋值给innerHTML，jQuery的html()方法目前对Trusted Types适配不完善，建议用原生DOM操作：

$.ajax({
  url: '/Your/Mvc/Action',
  success: (rawResult) => {
    const target = document.getElementById('form-container');
    if (safeHtmlPolicy && target) {
      // 通过策略生成安全的TrustedHTML实例
      const safeHtml = safeHtmlPolicy.createHTML(rawResult);
      // 原生innerHTML赋值，绕过jQuery的兼容问题
      target.innerHTML = safeHtml;
    } else {
      // 降级处理：浏览器不支持Trusted Types时直接渲染
      $(target).html(rawResult);
    }
  }
});

3. 修正错误的替换函数逻辑 #

如果之前尝试用自定义替换函数清理HTML，要避免错误转义所有HTML标签（比如把<转成<）——这会直接导致HTML变成纯文本。正确的替换应该只移除危险内容，保留正常标签结构。

关键注意事项 #

• 不要禁用Trusted Types核心规则：Coverity的安全要求合理，直接关闭会引入XSS风险
• 避免过度清理：只针对脚本、事件属性等危险内容，不要破坏正常的表单HTML结构
• 优先原生DOM操作：jQuery的html()、parseHTML()目前对Trusted Types的支持不如原生innerHTML稳定

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