如何修复GitHub CodeQL提示的DOM text is reinterpreted as HTML without escaping meta-characters错误

错误原因 #

这个CodeQL报错提示的是未对元字符转义就将DOM文本重新解析为HTML，本质是存在XSS注入风险：
你代码里直接把window.location.href和页面title两个可控变量拼接到HTML字符串中，再通过jQuery的.html()方法插入DOM，如果这两个变量中包含<、>、"、'等HTML元字符，会被浏览器直接解析为HTML代码执行，攻击者可以通过构造特殊的URL或者页面title触发XSS攻击。

修复方案 #

推荐优先使用DOM节点生成方式替代HTML字符串拼接，从根源规避解析风险，不需要手动处理转义逻辑，jQuery内置方法会自动处理安全转义：

// HTML转义工具函数，备用场景可使用
function escapeHtml(str) {
  return str.replace(/[&<>"']/g, match => {
    const escapeMap = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    };
    return escapeMap[match];
  });
}

$(document).ready(function() {
    const rawUrl = window.location.href;
    const rawTitle = $('title').text();
    const $shareContainer = $('#shareit').empty();

    // Pinterest分享节点
    const $pinterest = $('<mobileshare3>').addClass('mobileshare3').append(
        $('<a>')
            .attr('href', `https://pinterest.com/pin/create/button/?url=${encodeURIComponent(rawUrl)}&media=${encodeURIComponent(rawUrl)}&description=${encodeURIComponent(rawTitle)}`)
            .attr('rel', 'noreferrer')
            .attr('target', '_blank')
            .attr('title', 'شارك على بانتيراست')
            .append($('<i>').addClass('fab fa-pinterest'))
    );

    // WhatsApp分享节点
    const $whatsapp = $('<mobileshare5>').addClass('mobileshare5').append(
        $('<a>')
            .addClass('whatsapp')
            .attr('href', `whatsapp://send?text=${encodeURIComponent(rawTitle + ' ' + rawUrl)}`)
            .attr('rel', 'noreferrer')
            .attr('target', '_top')
            .attr('title', 'شارك على واتساب')
            .append($('<i>').addClass('fab fa-whatsapp'))
    );

    // Telegram分享节点
    const $telegram = $('<mobileshare4>').addClass('mobileshare4').append(
        $('<a>')
            .attr('href', `https://t.me/share/url?url=${encodeURIComponent(rawUrl)}&text=${encodeURIComponent(rawTitle)}`)
            .attr('rel', 'noreferrer')
            .attr('target', '_blank')
            .attr('title', 'شارك على تيليغرام')
            .append($('<i>').addClass('fab fa-telegram-plane'))
    );

    // Facebook分享节点
    const $facebook = $('<mobileshare>').addClass('mobileshare').append(
        $('<a>')
            .attr('href', `https://www.facebook.com/sharer.php?u=${encodeURIComponent(rawUrl)}&t=${encodeURIComponent(rawTitle)}`)
            .attr('rel', 'noreferrer')
            .attr('target', '_blank')
            .attr('title', 'شارك على فايسيوك')
            .append($('<i>').addClass('fab fa-facebook'))
    );

    $shareContainer.append($pinterest, $whatsapp, $telegram, $facebook);
});

修复逻辑说明 #

• 完全避免手动拼接HTML字符串，不会出现把可控内容（url、title）当成HTML解析的情况
• jQuery的attr方法会自动对属性值做转义处理，避免属性注入风险
• 所有URL参数都使用encodeURIComponent编码，避免URL注入问题
• 不再使用.html()方法插入未校验内容，直接通过DOM节点操作插入，从根源上消除了CodeQL报错的触发条件

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