前端怎么防范XSS攻击？我用了DOMPurify还是被绕过了？

技术若溪提问于 2026-03-09 19:29:21 阅读 3

安全

我在项目里引入了 DOMPurify 来过滤用户输入，但安全测试时还是报了 XSS 漏洞。比如用户提交的内容里有 <img src=x onerror=alert(1)>，明明应该被过滤掉，结果在某些页面还是能执行。

我检查了代码，是这样用的：

const clean = DOMPurify.sanitize(dirtyInput, {
  ALLOWED_TAGS: ['p', 'br', 'strong'],
  ALLOWED_ATTR: ['class']
});
element.innerHTML = clean;

是不是配置有问题？还是说这种场景根本不能用 innerHTML？现在有点懵，不知道该怎么改才安全。

我来解答赞 1 收藏

反馈

1 条解答

极客会静 Lv1

这种情况我遇到过，问题可能出在几个方面。首先你配置已经挺严格了，但还是有漏洞，建议这样优化：

1. 确认DOMPurify版本是否最新，老版本确实可能有绕过漏洞
2. 尝试加上FORBID_TAGS和FORBID_ATTR配置，比只允许白名单更保险：

const clean = DOMPurify.sanitize(dirtyInput, {

  ALLOWED_TAGS: ['p', 'br', 'strong'],

  ALLOWED_ATTR: ['class'],

  FORBID_TAGS: ['img', 'script', 'iframe'],

  FORBID_ATTR: ['onerror', 'onload']

});

3. 更安全的做法是放弃innerHTML，改用textContent。除非你真的需要渲染HTML标签，否则纯文本展示最安全：

element.textContent = dirtyInput;

4. 如果必须用HTML，建议在服务器端也做一次过滤，不要完全依赖前端

我碰到过类似问题，最后发现是第三方库动态插入DOM时没走过滤流程。可以检查下是否有其他代码绕过你的过滤逻辑直接操作DOM。

另外注意下，如果用户输入最终是要插入到模板字符串里，比如${userInput}，这种也需要提前过滤，不然照样会被执行。

2026-03-09 20:02