Checkmarx漏洞解惑：嵌入不可信数据问题及代码修复疑问

一、漏洞成因 #

Checkmarx提示的核心问题是直接将未过滤的不可信数据通过jQuery的$()方法嵌入DOM，引发XSS（跨站脚本攻击）风险。当不可信数据（如用户输入、第三方接口返回内容）包含恶意HTML/JS代码时，$()会直接解析并执行这些代码，攻击者可借此在页面注入恶意脚本，窃取用户数据或操控页面行为。

二、注入点定位 #

结合你提供的代码，Checkmarx标记的风险点指向$(this.menuIconTemplate)这一行：

$(this.menuIconTemplate)
    .insertAfter(
        this.$root
            .find(".ossui-pagetabs-nav-bar .ossui-addtab-icon")
            .closest('li'));

这里的this.menuIconTemplate是潜在的不可信数据源——如果该模板内容来自用户输入、后端动态返回或其他未过滤的外部渠道，就可能被篡改并嵌入恶意代码。jQuery的$()方法传入HTML字符串时，会直接将其解析为DOM元素插入页面，无默认的恶意代码清理机制，因此产生注入风险。

而$(this.$root.find('span.ossui_dropdown_icon'))是基于选择器查找现有DOM元素，不存在注入风险。

三、GPT修复方案详解 #

GPT给出的修复思路核心正确，需结合你的实际代码调整：

1. 锁定不可信数据源：先确认this.menuIconTemplate的来源，若为动态生成或外部传入，就是需要处理的目标。
2. HTML编码：将模板中的特殊字符（如<、>、"、'、&）转换为HTML实体，让浏览器将其当作普通文本渲染，而非解析为HTML/JS代码。GPT提供的encodeHTML函数就是实现该逻辑。
3. 内容清理（Sanitization）：若模板需保留合法HTML结构，不能仅用编码，需借助专门的清理库（如DOMPurify）过滤恶意标签和属性，只保留安全的HTML元素。

四、适配你代码的最终修复示例 #

方案1：纯文本场景（模板为纯文本/图标字符） #

如果menuIconTemplate仅包含简单文本或图标字符，直接编码后插入：

_addIconForDropDownMenu : function() {
    if (this.getConfig('tabDropdownMenu')) {
        $(this.$root.find('span.ossui_dropdown_icon'))
                .closest("li").remove();
        
        // 对模板内容进行HTML编码
        var encodedTemplate = this.encodeHTML(this.menuIconTemplate);
        // 创建文本节点插入，避免解析HTML
        $('<span class="ossui_dropdown_icon">' + encodedTemplate + '</span>')
                .insertAfter(
                        this.$root
                                .find(".ossui-pagetabs-nav-bar .ossui-addtab-icon")
                                .closest('li'));
        this._createDropdownMenuOnOverflow();
    }
},
encodeHTML: function(str) {
    return str.replace(/[&<>"']/g, function(match) {
        return {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#39;'
        }[match];
    });
}

方案2：需保留合法HTML场景 #

如果menuIconTemplate包含合法HTML结构（如<i class="icon"></i>），用DOMPurify清理后插入：

_addIconForDropDownMenu : function() {
    if (this.getConfig('tabDropdownMenu')) {
        $(this.$root.find('span.ossui_dropdown_icon'))
                .closest("li").remove();
        
        // 用DOMPurify清理模板中的恶意代码
        var sanitizedTemplate = DOMPurify.sanitize(this.menuIconTemplate);
        $(sanitizedTemplate)
                .insertAfter(
                        this.$root
                                .find(".ossui-pagetabs-nav-bar .ossui-addtab-icon")
                                .closest('li'));
        this._createDropdownMenuOnOverflow();
    }
}

注意：使用DOMPurify需先引入该库，它会自动过滤所有恶意HTML/JS，仅保留安全的元素和属性。

关键注意点 #

• 禁止直接将外部传入的HTML字符串通过$()插入DOM，必须先做过滤/编码处理。
• 区分纯文本和HTML场景：纯文本用编码，HTML用专业清理库。
• 确认所有动态内容的来源：若为后端返回的模板，后端也需做一次过滤/编码，实现前后端双重防护。

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