如何在AJAX加载内容到.html()时防范DOM XSS攻击？

因为你需要保留合法HTML结构，直接用.text()会转义所有标签，所以核心思路是先清理响应中的恶意代码，再将安全的HTML插入DOM，以下是具体可行方案：

1. 使用专业HTML清理库（推荐） #

用DOMPurify这类经过广泛验证的库，它能精准保留合法HTML，过滤所有触发XSS的恶意内容（比如<script>标签、onclick事件属性、javascript:伪协议等）。

修改你的代码如下：

productSearch: function productSearch(e, element) {
        var $searchModal = $('#product-search-modal');
        var $searchModalBody = $searchModal.find('.modal-body');
        var url = $searchModal.data('url');
        ...
        $.get(url, {
            fromQuote: true, customerNumber: custNumber, hasQtyField: false
        }).done(function (response) {   
            // 先清理响应内容，再插入DOM
            var sanitizedHtml = DOMPurify.sanitize(response);
            $searchModalBody.html(sanitizedHtml);
        })

使用前需引入DOMPurify（可从官方仓库下载后本地引入，无需依赖外部CDN）。

2. 配合服务端防护（关键） #

前端清理是最后一道防线，更重要的是从源头控制：

• 服务端生成响应时，只允许预设的安全HTML标签（如<div>、<img>、<span>）和属性（如src、class）
• 对用户输入的内容（如产品名称、自定义描述）做严格转义或过滤，避免恶意代码被嵌入到HTML响应中

3. 不要自行实现过滤逻辑 #

不要尝试用正则或简单字符串替换来过滤HTML，HTML的结构和编码方式复杂，恶意代码很容易绕过这类简易过滤，专业库已经覆盖了绝大多数边缘攻击场景。

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