如何在React结合Yup的TextField中防范HTML与脚本注入

1. 先利用React自带的XSS防护 #

React默认会自动转义HTML特殊字符（像<、>、&这些），只要你不是用dangerouslySetInnerHTML渲染用户输入的内容，基础的XSS防护就已经生效了。比如你当前用TextField收集的description，后续如果直接作为普通文本展示，React会自动把<script>这类标签转义成纯文本，不会执行。

2. 用Yup在验证层拦截危险内容 #

给你的表单加上Yup验证规则，直接禁止或过滤包含HTML/脚本的输入：

import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  description: Yup.string()
    .test(
      'no-dangerous-content',
      '描述不能包含HTML标签或脚本代码',
      (value) => {
        if (!value) return true;
        // 匹配HTML标签、javascript协议、事件绑定的正则
        const dangerousPattern = /<[^>]+>|javascript:|on\w+=/i;
        return !dangerousPattern.test(value);
      }
    )
    .required('描述不能为空'),
});

把这个schema传给你的Formik表单（通过validationSchema属性），用户输入违规内容时，你的helperText会自动显示错误提示，还能阻止表单提交。

3. 输入内容清洗（按需使用） #

如果需要允许用户输入部分格式，但要过滤危险代码，可以用dompurify库做清洗：

import DOMPurify from 'dompurify';

// 在表单提交前处理输入
const sanitizedDesc = DOMPurify.sanitize(values.description);
// 把清洗后的内容提交给后端或存到状态里

要是只想简单移除所有HTML标签，用正则也能搞定：

const stripAllHtml = (str) => str.replace(/<[^>]*>/g, '');
const cleanDesc = stripAllHtml(values.description);

4. 针对你现有代码的注意点 #

你当前的TextField输入逻辑是安全的，重点要注意后续展示description时，绝对不要用dangerouslySetInnerHTML渲染原始输入内容。如果确实需要展示富文本，一定要先做清洗处理再渲染。

内容的提问来源于stack exchange，提问作者Cucumberbatch