DOM更改 Mustache-Template-Structure-解网

问：

我正在尝试使用 DOMPurify 清理用户提交的模板。此模板使用 mustache-syntax 来嵌入变量等。清理本身没有问题，但 Mustache-Sections 被移动到模板中的不同部分，而 DOMPurify 似乎试图修复 HTML 结构本身。

我假设这个“自动修复”正在弄乱模板。有没有办法防止这种情况发生？

以下代码用于清理：

DOMPurify.sanitize(model.html_template);

消毒前的模板：

<table>
    <tr>
        <td>{{value1}}</td>
    </tr>
    
    {{#section}}
    <tr>
        <td>{{value2}}</td>
    </tr>
    {{/section}}
</table>

消毒后的模板：

{{#section}}
    
{{/section}}
<table>
    <tbody>
        <tr>
            <td>{{value1}}</td>
        </tr>
        <tr>
            <td>{{value2}}</td>
        </tr>
    </tbody>
</table>

JavaScript 胡子 Dompurify

我认为最安全的选择是先渲染然后消毒，而不是相反。我意识到这效率较低;当然，如果您可以只对模板进行一次清理，然后重复使用它而无需任何进一步处理，那将是理想的选择。但是，DOMPurify 文档明确警告不要在清理后再进行任何 HTML 处理：

有没有脚枪的潜力？
好吧，请注意，如果您先对 HTML 进行清理，然后再对其进行修改，则很容易使清理效果无效。如果在清理后将清理后的标记提供给另一个库，请确保该库不会自行弄乱 HTML。

你可能会争辩说 Mustache 不会“搞砸”HTML，但这显然不是真的。请考虑以下有问题的示例：

<table>
    {{#rows}}
    <tr><td>{{value}}</td></tr>
</table>
{{/rows}}

如果您忽略 Mustache 语法，HTML 看起来有效，但生成的代码将无效，除非解析为完全长度的内容。rows1

另一个明显的迹象是，DOMPurify 的选项迎合了相反的情况：将去除所有模板语法。SAFE_FOR_TEMPLATES: true

如果您需要更多原因：DOMPurify 将其大部分清理逻辑推迟到浏览器。移动部分问题很可能特定于您正在测试的浏览器，因此它甚至不是 DOMPurify 可以控制的。此外，其他浏览器可能会以您甚至还不知道的其他方式破坏您的模板。通过先渲染并将清理作为插入 DOM 之前的最后一步，可以避免一大类潜在问题。

上一个：如何在 DOMPurify 中允许 <td> 和 <tr> 标签？

下一个：在 php xampp 上设置 freepik-labs/dompurify

DOM更改 Mustache-Template-Structure

DOMPurify changing Mustache-Template-Structure

评论