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

FSD-义霞提问于 2026-02-02 08:01:36 阅读 62

安全

我在做一个用户反馈表单时发现，如果用户输入带标签的内容，提交后服务器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 收藏

反馈

1 条解答

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。

2026-02-02 08:05