富文本编辑器怎么防XSS攻击？

シ紫瑶提问于 2026-03-26 16:30:26 阅读 27

安全

我在项目里用了富文本编辑器，用户可以贴各种HTML内容，但担心被XSS注入。试过用DOMPurify.sanitize()处理，但有些样式会被干掉，客户不接受。

有没有既能保留合理标签（比如<b>、<img>、<a>），又能彻底过滤恶意脚本的方法？比如<img onerror="alert(1)">这种就该被拦住。

现在后端只做了简单转义，前端又怕漏掉什么。是不是得配合白名单策略？求个稳妥方案……

import DOMPurify from 'dompurify';

const clean = DOMPurify.sanitize(dirty, {
  ALLOWED_TAGS: ['b', 'i', 'u', 'a', 'img', 'p', 'br'],
  ALLOWED_ATTR: ['href', 'src', 'alt', 'title']
});

XSS防护

我来解答赞 5 收藏

反馈

1 条解答

Code°秀兰 Lv1

我之前也遇到过这问题，确实DOMPurify得配白名单。你现在的配置基本对了，但要加个钩子函数专门处理 onerror 这类危险属性：

const clean = DOMPurify.sanitize(dirty, {

  ALLOWED_TAGS: ['b', 'i', 'u', 'a', 'img', 'p', 'br'],

  ALLOWED_ATTR: ['href', 'src', 'alt', 'title'],

  FORBID_ATTR: ['on*'], // 拦截所有以 on 开头的事件属性

  ADD_ATTR: [] // 其他需要放开的属性

});

后端也别只简单转义，建议再用类似策略过滤一遍，保险点。客户要求多很正常，慢慢磨吧，反正安全第一。

2026-03-26 17:12