DOMPurify清理Mustache模板时结构被篡改，如何禁用自动修复？

问题的核心不是DOMPurify主动修改了结构，而是它依赖的浏览器DOM解析器会自动修正不符合HTML规范的代码——HTML标准里<table>元素的直接子节点只能是<thead>、<tbody>、<tr>这类合法表格元素，像{{#section}}这种纯文本节点不允许放在<table>内部，所以DOM解析器会把这些文本节点自动移到<table>外面，DOMPurify只是基于修正后的DOM生成清理结果。

下面是两种可行的解决方法：

方法一：预处理转HTML注释，后处理还原 #

把Mustache区块转换成HTML注释（注释可以合法放在<table>内部），清理完成后再转换回原语法：

// 预处理：将Mustache区块包裹为HTML注释
const preprocessed = model.html_template.replace(/({{#.*?}}|{{\/.*?}})/g, '<!--$1-->');

// 执行DOMPurify清理
const sanitized = DOMPurify.sanitize(preprocessed);

// 后处理：将注释还原为Mustache语法
const finalTemplate = sanitized.replace(/<!--({{#.*?}}|{{\/.*?}})-->/g, '$1');

如果你的Mustache语法包含空格（比如{{ # section }}），可以调整正则表达式适配：

const preprocessed = model.html_template.replace(/({{\s*#.*?}}\s*|{{\s*\/.*?}}\s*)/g, '<!--$1-->');
const finalTemplate = sanitized.replace(/<!--({{\s*#.*?}}\s*|{{\s*\/.*?}}\s*)-->/g, '$1');

方法二：启用DOMPurify的XML模式 #

XML解析器不会自动修正HTML结构（因为XML是严格语法），你可以通过USE_XML选项强制DOMPurify使用XML模式处理：

const sanitized = DOMPurify.sanitize(model.html_template, {
  USE_XML: true
});

注意：XML模式要求所有HTML标签必须正确闭合（比如不能出现<td>不闭合的情况），如果你的模板存在不规范的HTML标签，这种方法可能会导致解析错误，因此更适合结构严谨的模板。

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