元素
元素
工具
博客
问答

React表单提交时如何防止XSS攻击？IDS/IPS配置有什么建议？

FSD-义霞 阅读 95
安全

我在做一个用户反馈表单时发现，如果用户输入带标签的内容，提交后服务器IDS直接拦截请求了。但前端已经用了DOMPurify处理输入内容，为什么还是被拦截？

这是我的表单组件代码：


import { useState } from 'react';
import DOMPurify from 'dompurify';

const FeedbackForm = () => {
  const [input, setInput] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // 只净化显示内容，没处理提交数据
    const sanitized = DOMPurify.sanitize(input);
    fetch('/api/feedback', { method: 'POST', body: input });
  };

  return (
    <form onSubmit={handleSubmit}>
      <textarea 
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button type="submit">提交</button>
    </form>
  );
};

export default FeedbackForm;

我尝试过在后端增加XSS过滤，但IDS还是频繁报警。用Wireshark抓包发现请求被标记为CVE-2023-20522漏洞模式。是不是应该在前端也做输入白名单过滤？IPS规则该怎么调整才能既安全又不影响正常用户？

IDS/IPS
我来解答 赞 9 收藏
二维码
手机扫码查看
反馈
2 条解答
司徒长永
司徒长永 Lv1
你这问题核心在于混淆了「前端渲染时的XSS防护」和「传输过程中的内容过滤」，DOMPurify只在前端显示时起作用，但你提交的是原始 input，没用 sanitized 那份数据，所以后端收到的还是带标签的脏数据，IDS当然会报警。

先说代码问题，你提交的应该是净化后的数据，改成这样：

const handleSubmit = (e) => {

  e.preventDefault();

  const sanitized = DOMPurify.sanitize(input);

  fetch('/api/feedback', { 

    method: 'POST',

    headers: { 'Content-Type': 'application/json' },

    body: JSON.stringify({ content: sanitized })

  });

};


但光前端净化远远不够，后端必须做二次校验，不能信任任何前端传来的数据。建议后端用语言自带的HTML过滤库（比如Python的 bleach、Node.js 的 sanitize-html）再过滤一遍，同时做白名单策略——只允许
、

、 等必要标签，其他全干掉。

至于IDS误报，CVE-2023-20522 是某个具体WAF规则的编号，但你得先确认是不是真的攻击：抓包看看请求体里到底有什么敏感模式。如果只是用户输入了类似 这种明显 payload，IDS拦截是对的；如果是正常文本（比如用户写“我在脚本里遇到了问题”），那可能是规则太敏感。

建议调整方向：
- 把反馈类接口加入白名单，跳过某些高危规则（比如SQL/XSS混合检测）
- 后端统一做输入长度限制、标签白名单，避免把过滤压力全丢给IDS
- 如果用的是ModSecurity这类WAF，可以写自定义规则，对特定字段做宽松匹配

最后提醒一句，别依赖前端做安全边界，前端净化只是用户体验优化，真正防止注入的防线一定在后端。

点赞 5
2026-02-24 09:04
Newb.俊衡
Newb.俊衡 Lv1
你的问题出在提交的数据还是原始输入，而不是净化后的数据。最简单的办法是直接提交净化后的内容 sanitized，而不是原来的 input。修改代码如下：

const handleSubmit = (e) => {

  e.preventDefault();

  const sanitized = DOMPurify.sanitize(input);

  fetch('/api/feedback', { method: 'POST', body: JSON.stringify({ feedback: sanitized }) });

};


至于IDS/IPS规则，建议放宽对常见无害标签（如 <b>、<i>）的拦截，或者配置基于行为的检测而不是单纯的模式匹配。不过这得看你们安全团队的具体要求了，实在不行就全禁了吧，反正用户也不太会用HTML。
点赞 14
2026-02-02 08:05
相关推荐
元素
元素
工具
博客
问答
登录/注册