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

丽萍(打工版) 阅读 11

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

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

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

我来解答 赞 2 收藏
二维码
手机扫码查看
1 条解答
长孙俊浩
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