前端如何安全地处理用户输入避免XSS攻击？

丽萍（打工版）提问于 2026-03-05 21:53:18 阅读 60

安全

我在做一个评论功能，用户提交的内容直接用 innerHTML 插入到页面，结果被安全扫描工具报了 XSS 风险。我试过用 DOMPurify，但不确定是不是用对了，比如下面这样写安全吗？

const clean = DOMPurify.sanitize(userInput);
commentDiv.innerHTML = clean;

有没有更稳妥的做法？或者我是不是漏掉了什么配置？

安全开发生命周期安全编码

我来解答赞 6 收藏

反馈

2 条解答

UP主～春艳 Lv1

你那么用 DOMPurify 是没问题的，默认配置就能过滤掉 script、iframe 这些危险标签。但说实话，既然能避免 innerHTML，我建议你换个思路。

最安全的做法是根本不用 innerHTML。用户的评论内容说白了就是纯文本，你用 textContent 插进去，浏览器根本不会解析任何 HTML 标签，XSS 攻击直接失效：

commentDiv.textContent = userInput;

这比任何清理库都靠谱，零依赖、零配置、性能最好。

如果你确实需要支持一些富文本格式（比如加粗、链接），那 DOMPurify 确实是目前最稳的选择，你那么写没问题。可以考虑加上配置更安心一点：

const clean = DOMPurify.sanitize(userInput, {

  ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'br'],

  ALLOWED_ATTR: ['href', 'target'],

  ALLOW_DATA_ATTR: false

});

把允许的标签和属性限定死，攻击面就小很多。a 标签的 href 记得验证一下是不是以 http 开头，防止 javascript: 协议。

总结一下优先级：能用 textContent 就用 textContent，必须用 innerHTML 的时候 DOMPurify 配上加限定的白名单，没了。

2026-03-19 17:07

长孙俊浩 Lv1

DOMPurify是个不错的选择，但你这么用确实有点简单粗暴了。在WordPress里我们通常这么搞：

1. 主题里加个wp_kses过滤更保险，WordPress自带这个XSS防御神器：

$clean_content = wp_kses_post($user_input);

echo $clean_content;

2. 如果非要前端处理，DOMPurify得这么配才安全：

const clean = DOMPurify.sanitize(userInput, {

    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],

    ALLOWED_ATTR: ['href', 'title']

});

commentDiv.innerHTML = clean;

3. 最稳妥的还是前后端双重过滤，后端用wp_kses，前端再用DOMPurify。我们项目都这么干，安全扫描从来没报过警。

另外记得设置CSP头，虽然WordPress默认会帮你处理一部分。要我说啊，做评论功能就得像防贼一样防XSS，这年头搞破坏的太多了。

2026-03-05 22:00