如何转义"中的&符号解决Kendo模板属性解析异常

问题根源 #

该解析错误本质是多层转义缺失导致的：

• 手写拼接的JSON字符串直接放在HTML的data-link-value属性中，动态值内的特殊字符（&、双引号）未做对应层级的转义
• 浏览器解析HTML属性时，会将&识别为HTML实体的起始标记，碰到未转义的&和双引号时会提前截断属性值，直接导致后续JSON结构损坏
• 原有逻辑用eval解析属性值不仅会放大转义问题，还存在严重的XSS安全隐患

推荐解决方案（零转义成本，稳定性最高） #

不要在HTML属性内硬拼JSON字符串，将所需参数拆为独立data属性存储，从根源上避开多层转义的问题。

第一步：修改JSP中的Kendo模板代码 #

<assd:column has-tooltip="false" width="150px" name="groupName"
    template="<span 
        data-g-id='#:id#'
        data-g-name='#:schoolNameSafe# группа #:groupNameSafe# (#:groupType#)'
        data-g-type='#:groupTypeId#'
        data-imported='#:hasLicenses#'
    >#:groupName#</span>"
>Group</assd:column>

第二步：调整对应JavaScript逻辑 #

通过jQuery的.data()方法直接读取各属性值，方法会自动处理HTML转义逻辑，无需手动解析JSON，同时废弃不安全的eval写法：

var template = kendo.template(this.rowLinkTemplate);
var $targetEl = $("[data-g-id]", arg.currentTarget);
// 直接读取拆分后的data属性，自动完成转义处理
var linkParams = {
    gId: $targetEl.data("gId"),
    gName: $targetEl.data("gName"),
    gType: $targetEl.data("gType"),
    imported: $targetEl.data("imported")
};
var link = template(linkParams);
document.location = link;

备选方案（需保留单属性存储JSON的场景） #

如果业务要求必须将所有参数存入单个data-link-value属性，必须严格按照顺序完成两层转义：

• 动态值插入JSON结构前，先完成JSON标准转义：值内双引号转义为\"、反斜杠转义为\\、特殊控制字符按JSON规范完成转义
• 拼接完成的完整JSON字符串，再做HTML实体编码：&转义为&、"转义为"、</>分别转义为</>
• JS读取到属性值后，使用JSON.parse()代替eval完成解析，彻底规避安全风险

注意：转义顺序不可颠倒，若先做HTML编码再做JSON转义，依然会出现解析异常。

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