前端如何安全地处理用户输入避免XSS攻击? 丽萍(打工版) 提问于 2026-03-05 21:53:18 阅读 11 安全 我在做一个评论功能,用户提交的内容直接用 innerHTML 插入到页面,结果被安全扫描工具报了 XSS 风险。我试过用 DOMPurify,但不确定是不是用对了,比如下面这样写安全吗? const clean = DOMPurify.sanitize(userInput); commentDiv.innerHTML = clean; 有没有更稳妥的做法?或者我是不是漏掉了什么配置? 安全开发生命周期安全编码 我来解答 赞 2 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 1 条解答 长孙俊浩 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 加载更多 相关推荐 1 回答 105 浏览 前端应急响应时如何快速定位XSS漏洞的攻击入口? 最近在处理一个紧急安全事件,发现有人利用表单提交功能注入了XSS脚本。我们用了OWASP ZAP扫描,但始终找不到具体漏洞点。前端代码里有个动态渲染的评论区,像这样: <div id="comm... 慕容昕彤 安全 2026-02-19 09:06:33 1 回答 13 浏览 前端项目中如何用SAST工具检测XSS漏洞? 最近在做安全开发生命周期的实践,想在CI里集成SAST工具自动扫描XSS问题。但试了几个工具(比如SonarQube、ESLint插件)都没能准确识别出我这段模板里的危险用法,是我写法太隐蔽还是配置不... Designer°奕诺 安全 2026-02-28 14:48:26 1 回答 50 浏览 前端项目中如何规范处理安全漏洞修复流程? 我们团队最近在做SDL(安全开发生命周期),但对前端这块的漏洞管理有点懵。比如发现一个XSS风险,改完代码后,怎么确保它被正确记录、验证和关闭? 试过在Jira里建个ticket,但不知道要不要关联c... 上官正利 安全 2026-02-24 01:48:18 1 回答 23 浏览 Data URL 在 Vue 中如何安全地用于图片 src 防 XSS? 我在 Vue 项目里用用户上传的 base64 图片直接赋值给 img 的 src,担心会有 XSS 风险。比如下面这样写: <template> <img :src="userPr... 丽珍 安全 2026-02-23 23:05:18 1 回答 35 浏览 React中如何防止使用window.location.search导致的DOM型XSS? 我在React组件里用URL参数显示用户输入,发现这样写可能有XSS漏洞: function SearchResults() { const searchParam = new URLSearchPa... 东方爱菊 安全 2026-01-31 08:19:29 2 回答 51 浏览 安全需求文档该怎么写才能防XSS漏洞? 我们在做用户评论功能时,测试发现XSS漏洞,但安全需求文档里只写了“过滤危险字符”,具体该怎么做才能有效防范呢? 之前尝试用正则表达式过滤了<script>标签和特殊字符,但测试人员用Un... UX-彩云 安全 2026-01-29 21:23:26 1 回答 2 浏览 xss库过滤后内容显示异常怎么办? 我用 xss 库对用户输入做了过滤,但有些正常内容也被转义了,比如 <div> 这种标签直接显示成文本了,不是渲染成 HTML。是不是我用法不对? 我是这样用的: import { san... Good“洛熙 安全 2026-03-05 16:23:18 1 回答 14 浏览 前端漏洞扫描工具报XSS风险,但我用了DOMPurify啊? 最近用公司内部的漏洞扫描工具扫了下项目,结果提示有个输入框存在XSS风险。可我明明已经用 DOMPurify 对用户输入做了清洗,不知道问题出在哪。 我的代码大概是这样: <div id="us... 振莉 Dev 前端 2026-02-28 20:08:20 1 回答 14 浏览 前端做威胁建模时,用户输入直接渲染到页面会不会有XSS风险? 我最近在学安全开发生命周期,尝试给一个简单的评论功能做威胁建模。我发现用户提交的评论内容会直接通过 innerHTML 插入到页面里,虽然现在只是本地测试,但总觉得这样不安全。我试过用 DOMPuri... ♫蓝月 安全 2026-02-24 21:18:20 2 回答 23 浏览 前端被XSS攻击了,应急响应该怎么做? 我们线上 Vue 项目突然收到用户反馈,页面里弹出了奇怪的 alert,怀疑是 XSS 攻击。我看了下代码,确实有个地方直接用了 v-html 渲染用户输入的内容,但之前没做任何过滤。现在想知道:一旦... 设计师红芹 安全 2026-02-24 19:23:19
1. 主题里加个wp_kses过滤更保险,WordPress自带这个XSS防御神器:
2. 如果非要前端处理,DOMPurify得这么配才安全:
3. 最稳妥的还是前后端双重过滤,后端用wp_kses,前端再用DOMPurify。我们项目都这么干,安全扫描从来没报过警。
另外记得设置CSP头,虽然WordPress默认会帮你处理一部分。要我说啊,做评论功能就得像防贼一样防XSS,这年头搞破坏的太多了。