13.客户端如何提交数据安全校验(express-validator)

一、安装express-validator

客户端的数据校验通常会用JavaScript在前端做,但服务器端校验同样重要,防止恶意请求绕过前端。在客户端提交数据时,为了保证数据的安全性,通常需要结合服务端校验(使用如 express-validator)和客户端校验。以下是使用 express-validator 在服务端进行数据安全校验的步骤:

express-validatoropen in new window

npm install --save express-validator

二、校验规则详解

  1. 链式调用:通过 check() 指定字段,并链式调用校验方法。

  2. 常用校验方法:

  • notEmpty(): 非空校验

  • isLength(): 长度校验

  • isEmail(): 邮箱格式校验

  • isInt(): 整数校验

  • trim(): 自动去除前后空格

  • escape(): 转义 HTML 字符(防 XSS 攻击)

  • bail(): 中断校验

  1. 自定义错误消息:使用 withMessage() 定义错误提示。

三、服务端校验配置

username用户名提交数据安全校验

  1. 修改router/user.js
const express = require("express");
const router = express.Router();
const useController = require("../controller/useController");
// 导入 Express Validator 模块,用于验证请求体
const { body, validationResult } = require("express-validator");

router.post(
  "/register",
  body("username")
    .notEmpty()
    .withMessage("用户名不能为空")
    .isLength({ min: 2 })
    .withMessage("用户名长度不能小于2"),
  (req, res, next) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array() });
    }
  },
  useController.register
);
module.exports = router;
  1. 打开终端运行
npm run dev

image.png

  1. Postman客户端提交数据

客户端(如前端页面)需要将数据通过 POST 请求发送到服务端,建议同时做客户端校验以提高用户体验

image.png

四、模块化拆分

  1. 新建middleware/validator/userValidator.js
const { body } = require("express-validator");
module.exports.register = [
  body("username")
    .notEmpty()
    .withMessage("用户名不能为空")
    // bail() 中断校验
    .bail()
    .isLength({ min: 2 })
    .withMessage("用户名长度不能小于2"),
  body("email").notEmpty().isEmail().withMessage("请输入正确的邮箱地址"),
];
  1. user.js中引入userValidator.js
const express = require("express");
const router = express.Router();
const useController = require("../controller/useController");
// 导入 Express Validator 模块,用于验证请求体
const { body, validationResult } = require("express-validator");
const validator = require("../middleware/validator/userValidator");
router.post(
  "/register",
  ...validator.register,
  (req, res, next) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(401).json({ errors: errors.array() });
    }
    next();
  },
  useController.register
);
module.exports = router;
  1. 打开终端
npm run dev

image.png

  1. Postman客户端提交数据
  • username为o时报错提示

image.png

  • username为xi时

image.png

image.png

五、统一处理 express 校验错误 的中间件封装方法

  1. 新建middleware/validator/errorBack.js
// 导入 express-validator 的校验结果处理工具
const { validationResult } = require("express-validator");
// 导出一个高阶函数:接收校验规则数组,返回中间件函数
module.exports = (validator) => {
  // 并行执行所有校验器的 run 方法,每个校验器会往 req 对象中写入校验结果
  return async (req, res, next) => {
    await Promise.all(validator.map((item) => item.run(req)));
    const errors = validationResult(req);
    // 如果存在校验错误
    if (!errors.isEmpty()) {
      return res.status(401).json({ errors: errors.array() });
    }
    // 校验通过,继续后续处理流程
    next();
  };
};
  1. 修改middleware/validator/userValidator.js
// 导入 express-validator 的 body 校验器
const { body } = require("express-validator");
// 导入自定义的统一错误处理中间件
const validate = require("./errorBack");
module.exports.register = validate([
  // 对 username 字段进行校验
  body("username")
    .notEmpty()
    .withMessage("用户名不能为空")
    // bail() 中断校验
    .bail()
    .isLength({ min: 2 })
    .withMessage("用户名长度不能小于2"),
  // 对 email 字段进行校验
  body("email").notEmpty().isEmail().withMessage("请输入正确的邮箱地址"),
]);
  1. 新建router/user.js
const express = require("express");
const router = express.Router();
const useController = require("../controller/useController");
// 导入 Express Validator 模块,用于验证请求体
const validator = require("../middleware/validator/userValidator");
// 定义注册路由(POST /register)
// 请求处理流程:
// 1. 先通过 validator.register 中间件进行数据校验
// 2. 校验通过后才会执行 useController.register 处理业务逻辑
router.post("/register", validator.register, useController.register);
module.exports = router;

六、注意事项

  1. 永远不要信任客户端数据:即使做了前端校验,服务端校验仍是必须的。

  2. 敏感数据加密:密码等敏感信息应在传输时使用 HTTPS,存储时使用哈希加密。

  3. 防 XSS 攻击:使用 escape() 或类似库(如 DOMPurify)清理用户输入。

最后更新时间' 2025/3/5 20:36:04