使用escape()处理数据库标签字段后UI显示实体编码如何修复

你遇到的显示异常是因为误用了escape()函数：

• escape()是早期被设计用来做URL编码的API，早已被Web标准废弃，它会把特殊字符、中文转换为%XX格式的URL编码，而非HTML安全转义格式，直接渲染到HTML页面就会显示为类似乱码的编码内容
• 另外你直接拼接HTML字符串时，如果没有做正确的HTML转义，还可能存在XSS注入风险

分两种场景选择对应方案：

场景1：需要将legend.value作为纯文本显示，不解析其中的HTML标签（推荐，安全性高） #

先实现专门的HTML转义工具函数，替换原有escape()调用即可：

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

// 原遍历逻辑替换escape调用
$.each(response.all_legends, function (key, legend) {
  tbody+='<tr>'+
            '<td><a href="" onclick="appendMessageText(this)" class="blue-1">'+htmlEscape(legend.value)+'</a></td>'+
            '<td>'+htmlEscape(legend.text)+'</td>'+
          '</tr>';
});

额外提示：如果使用jQuery，也可以用$('<a>').text(legend.value)的方式自动处理转义，更省心。

场景2：确认legend.value内容安全，需要渲染其中的HTML标签 #

直接去掉escape()包裹即可，无需额外转义：

$.each(response.all_legends, function (key, legend) {
  tbody+='<tr>'+
            '<td><a href="" onclick="appendMessageText(this)" class="blue-1">'+legend.value+'</a></td>'+
            '<td>'+legend.text+'</td>'+
          '</tr>';
});

注意：该场景如果legend.value是用户可输入的内容，会存在XSS攻击风险，建议增加HTML标签白名单过滤后再渲染。

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