React表单（含React Hook Form）输入Sanitization的必要性与实现方法

针对你的react-hook-form表单，输入sanitization主要用于防范XSS、注入类漏洞，同时确保输入数据格式合规。以下是具体实现方案和最佳实践：

一、核心时机选择 #

sanitization可以在两个关键节点处理：

• 实时输入时：用户输入过程中自动净化，同步修正输入内容
• 提交前：统一处理所有表单数据，确保存储/传输前的安全性

二、结合react-hook-form的具体实现 #

1. 使用register的setValueAs实时净化 #

react-hook-form的register方法支持setValueAs选项，可实时转换用户输入值。以常用的XSS防护库DOMPurify为例：

先安装依赖：

npm install dompurify

修改组件代码：

import { useForm } from "react-hook-form";
import DOMPurify from "dompurify";

// 通用净化函数
const sanitizeInput = (value) => {
  if (!value) return value;
  // 过滤恶意HTML标签，防范XSS
  return DOMPurify.sanitize(value);
};

export default function App() {
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = (data) => {
    // 此时data已为净化后的数据
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 实时净化姓名输入 */}
      <input {...register("firstName", { setValueAs: sanitizeInput })} />

      {/* 必填字段同时添加净化规则 */}
      <input {...register("lastName", { 
        required: true,
        setValueAs: sanitizeInput 
      })} />
      {errors.lastName && <p>Last name is required.</p>}

      {/* 年龄字段净化后确保仅保留数字 */}
      <input {...register("age", { 
        pattern: /\d+/,
        setValueAs: (value) => sanitizeInput(value).replace(/\D/g, '')
      })} />
      {errors.age && <p>Please enter a number for age.</p>}

      <input type="submit" />
    </form>
  );
}

2. 提交前统一净化 #

如果需要对所有字段批量处理，可在handleSubmit回调中集中处理：

const onSubmit = (rawData) => {
  // 批量遍历净化所有表单字段
  const sanitizedData = Object.fromEntries(
    Object.entries(rawData).map(([key, value]) => [
      key,
      value ? DOMPurify.sanitize(value) : value
    ])
  );
  // 后续使用净化后的数据
  console.log(sanitizedData);
};

3. 自定义校验+净化结合 #

针对富文本等特殊字段，可在校验规则中嵌入净化逻辑，确保数据合规：

<input 
  {...register("bio", {
    validate: (value) => {
      const sanitized = DOMPurify.sanitize(value);
      // 确保净化后内容不为空（必填场景）
      return sanitized.trim() !== "" || "Bio cannot be empty";
    },
    setValueAs: (value) => DOMPurify.sanitize(value)
  })} 
/>

三、推荐工具库 #

• DOMPurify：专门针对HTML/XSS的净化库，支持自定义允许的标签/属性，处理富文本输入时首选
• sanitize-html：轻量HTML净化工具，配置灵活，适合控制输入内容的标签范围
• 自定义正则：简单场景（如仅允许数字、字母）可直接用正则处理，比如value.replace(/[^a-zA-Z0-9\s]/g, '')

四、额外安全提示 #

• React默认会转义JSX插值内容，但如果使用dangerouslySetInnerHTML渲染HTML，必须提前净化数据
• 前端sanitization仅作为第一层防护，后端必须同步做校验和净化，形成双层安全屏障

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