求助：Checkmarx检测出高风险Client DOM Stored XSS问题的解决方法

问题原因分析 #

Checkmarx报的这两个XSS漏洞，核心都是未过滤的不可信数据直接插入DOM，导致恶意代码被浏览器解析执行：

1. 片段1：用模板字符串$('<option>${week}</option>')直接拼接HTML，若week来自用户输入/后端返回的未净化数据（比如包含<script>alert('xss')</script>），会被当作HTML标签解析，触发XSS。
2. 片段2：.html(data)会直接把data作为HTML插入DOM，若data包含恶意脚本或危险标签，会直接在页面执行。

具体修复方案 #

针对片段1的修复

推荐用jQuery的安全创建元素方法，自动转义HTML特殊字符：

// 替换原来的.append($(`<option>${week}</option>`))
.append($('<option>').text(week))

如果一定要用模板字符串拼接，手动对week做HTML转义：

// 定义转义函数
function escapeHtml(str) {
  return str.replace(/[&<>"']/g, match => {
    const escapeMap = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#039;'
    };
    return escapeMap[match];
  });
}

// 转义后再拼接
.append($(`<option>${escapeHtml(week)}</option>`))

针对片段2的修复

分两种场景处理：

• 如果data只是纯文本内容：直接改用.text(data)，它会自动转义所有HTML特殊字符，杜绝XSS：

  $("#webpage").text(data).css('opacity', '1.0').fadeIn();
  

• 如果data确实需要渲染为HTML：必须用专业的HTML清理库（比如DOMPurify）过滤危险内容，只保留安全的HTML标签和属性：

  // 先引入DOMPurify（可通过npm或CDN加载）
  const cleanHtml = DOMPurify.sanitize(data);
  $("#webpage").html(cleanHtml).css('opacity', '1.0').fadeIn();
  

额外防护建议 #

• 后端返回数据时同步做一次HTML过滤/转义，实现前后端双重防护；
• 修复后重新用Checkmarx扫描验证，或手动构造含恶意代码的测试数据（比如week="<script>alert(1)</script>"），确认页面仅显示纯文本，无脚本执行。

内容的提问来源于stack exchange，提问作者Adam Matusiak