Validation للمدخلات بـ Zod: ما تصدّقش أي حاجة جاية من برة

01 / ملخص الدرس

ليه الـ validation (والـ mass assignment: حد يبعت role: admin). Zod 4: z.object و trim و min و z.email و z.coerce للـ query والـ params، و enum و default، و refine للحقول المرتبطة ببعض، و strictObject للـ keys الزيادة، و transform. safeParse و z.flattenError، و validate middleware factory بيرد 422 بكل الأخطاء مرة واحدة ويحط الداتا النضيفة في req.valid.

ضمن مسارباك إند Node.js للإنتاج — من تحت الصفر26 / 122

02 / شرح الدرس مكتوبًا

نص شرح المعلم والكود الذي كتبه ونتيجة تشغيله، بنفس ترتيب الدرس.

أهلًا بيك. أهم قاعدة في الأمان: أي حاجة جاية من برة الـ server، اعتبرها عدو لحد ما تتأكد منها. الـ body، والـ query، والـ params، والـ headers. خليني أوريك ليه. server بيسجل مستخدمين، وبياخد الـ body كله بالـ spread، وبيحط role student default. نشغّل، ونبعت مستخدم عادي، وواحد شاطر شوية.

server.js

import express from "express";

const app = express();
app.use(express.json());
const users = [];

app.post("/users", (req, res) => {
  // ❌ بنصدّق أي حاجة جاية
  const user = { id: users.length + 1, role: "student", ...req.body };
  users.push(user);
  res.status(201).json(user);
});

app.listen(3000, () => console.log("http://localhost:3000"));

المخرجات

$ node server.js
http://localhost:3000

→ POST /users
  {"name":"عمر","email":"[email protected]"}
← 201 Created
{
  "id": 1,
  "role": "student",
  "name": "عمر",
  "email": "[email protected]"
}

→ POST /users
  {"name":"hacker","role":"admin","id":1,"email":42}
← 201 Created
{
  "id": 1,
  "role": "admin",
  "name": "hacker",
  "email": 42
}

التاني بعت role admin، والـ spread جه بعد الـ default فكتب فوقه، وبقى admin! وكمان غيّر الـ id لواحد، والـ email بقى رقم. الـ attack ده اسمه mass assignment، وحصل في GitHub نفسها زمان. الحل: schema بتقول بالزبط إيه المسموح، وبأنهي شكل، وأي حاجة تانية ترمى. وأشهر مكتبة لده في Node: Zod. schemas dot js. name: string، و trim بيشيل المسافات، ومن حرفين لخمسين، ورسالة بالعربي. email: z dot email، و toLowerCase. age: z dot coerce dot number: لو جه string زي twenty، يحوّله رقم، وده مهم جدًّا للـ query والـ params اللي دايمًا strings. password: تمانية على الأقل. و refine: شرط على أكتر من حقل، الـ password لازم يطابق الـ confirm، والـ path بيقول الـ error يتنسب لأنهي حقل. نجرّب الـ schema لوحدها: بيانات بايزة، وبيانات سليمة فيها role زيادة، وباسوردين مش متطابقين. safeParse ما بترميش: بترجّع success، ومعاها data أو error. و z dot flattenError بترتّب الأخطاء حسب الحقل.

نشغّل.

main.js

import { z } from "zod";
import { Signup } from "./schemas.js";

const bad = Signup.safeParse({ name: " a", email: "x", age: "12.5", password: "123", confirm: "1" });
console.log(bad.success);
console.log(z.flattenError(bad.error).fieldErrors);

const good = Signup.safeParse({
  name: "  مُنى ",
  email: "[email protected]",
  age: "20",
  password: "12345678",
  confirm: "12345678",
  role: "admin",
});
console.log(good.success, good.data);

const mismatch = Signup.safeParse({ name: "مُنى", email: "[email protected]", age: 20, password: "12345678", confirm: "87654321" });
console.log(z.flattenError(mismatch.error).fieldErrors);

المخرجات

$ node main.js
false
{
  name: [ 'الاسم قصير' ],
  email: [ 'إيميل غلط' ],
  age: [ 'Invalid input: expected int, received number' ],
  password: [ 'Too small: expected string to have >=8 characters' ]
}
true {
  name: 'مُنى',
  email: '[email protected]',
  age: 20,
  password: '12345678',
  confirm: '12345678'
}
{ confirm: [ 'الـ password مش متطابق' ] }

الأولى: false، وأربع أخطاء مرة واحدة: الاسم قصير، والإيميل غلط، والسن مش integer، والـ password قصير. التانية: true، والاسم اتنضف من المسافات، والإيميل اتصغّر، والسن اتحوّل رقم، والـ role اختفى خالص! Zod بتشيل أي key مش في الـ schema. التالتة: الـ refine اشتغل، والخطأ على confirm. وخد بالك: في الأولى الـ refine ما اشتغلش، لأنه بيستنى الحقول الأساسية تنجح الأول. دلوقتي نربطها بـ Express. validate: factory بتاخد schema، ومكانها في الـ request: body أو query أو params. لو فشل: four twenty two، يعني Unprocessable Content، ومعاها كل الأخطاء بالحقول، فالـ frontend يعرض كل غلطة جنب الحقل بتاعها. لو نجح: البيانات النضيفة في req dot valid، والـ route ما يلمسش req dot body الخام أبدًا. POST users بـ validate Signup، وبنشيل confirm و password من الرد. و GET users بـ schema للـ query: page و limit بـ coerce و default، و sort enum.

نشغّل.

server.js

import express from "express";
import { z } from "zod";
import { Signup } from "./schemas.js";
import { validate } from "./validate.js";

const app = express();
app.use(express.json());
const users = [];

app.post("/users", validate(Signup), (req, res) => {
  const { confirm, password, ...data } = req.valid.body;
  const user = { id: users.length + 1, role: "student", ...data };
  users.push(user);
  res.status(201).json(user);
});

const ListQuery = z.object({
  page: z.coerce.number().int().min(1).default(1),
  limit: z.coerce.number().int().min(1).max(50).default(10),
  sort: z.enum(["new", "name"]).default("new"),
});

app.get("/users", validate(ListQuery, "query"), (req, res) => {
  res.json({ query: req.valid.query, count: users.length });
});

app.listen(3000, () => console.log("http://localhost:3000"));

المخرجات

$ node server.js
http://localhost:3000

→ POST /users
  {"name":"hacker","role":"admin","email":"[email protected]","age":30,"password":"12345678","confirm":"12345678"}
← 201 Created
{
  "id": 1,
  "role": "student",
  "name": "hacker",
  "email": "[email protected]",
  "age": 30
}

→ POST /users
  {"name":"a"}
← 422 Unprocessable Entity
{
  "error": "البيانات مش صح",
  "fields": {
    "name": [
      "الاسم قصير"
    ],
    "email": [
      "إيميل غلط"
    ],
    "age": [
      "Invalid input: expected number, received NaN"
    ],
    "password": [
      "Invalid input: expected string, received undefined"
    ],
    "confirm": [
      "Invalid input: expected string, received undefined"
    ]
  }
}

→ GET /users
← 200 OK
{
  "query": {
    "page": 1,
    "limit": 10,
    "sort": "new"
  },
  "count": 1
}

→ GET /users?page=2&limit=500&sort=hack
← 422 Unprocessable Entity
{
  "error": "البيانات مش صح",
  "fields": {
    "limit": [
      "Too big: expected number to be <=50"
    ],
    "sort": [
      "Invalid option: expected one of \"new\"|\"name\""
    ]
  }
}

الـ hacker اتسجل student، والـ role اتشال. الناقص: four twenty two وكل الحقول الغلط. GET من غير query: الـ defaults. و limit خمسمية و sort غلط: four twenty two. من غير الـ max على الـ limit، أي حد كان يقدر يطلب مليون صف في request واحد ويوقّع الـ database. التحدي: schema للـ course. CreateCourse بـ strictObject، يعني أي key زيادة يترفض، مش يتشال بس. title، و price بتتحوّل لقروش بـ transform، و level enum بـ default، و tags. و CourseParams للـ teacherId. وتربطهم بالـ route. أربع حالات اختبار في الكومنت.

تمرين

CreateCourse (strictObject: title 5-120، price ← قروش بـ transform، level enum default، tags max 5) و CourseParams (teacherId رقم موجب) على POST /courses/:teacherId.

الحل. strictObject، وكل حقل زي المطلوب، والـ price: coerce، وحدود، و transform للقروش. CourseParams بـ coerce و positive. و validate بقت ترجّع formErrors كمان، لأن الـ keys الزيادة في strictObject بتتسجّل على الـ object كله، مش على حقل. والـ route فيه الاتنين بالترتيب. نشغّل.

server.js

import express from "express";
import { CreateCourse, CourseParams } from "./schemas.js";
import { validate } from "./validate.js";

const app = express();
app.use(express.json());

app.post(
  "/courses/:teacherId",
  validate(CourseParams, "params"),
  validate(CreateCourse),
  (req, res) => {
    const { price, ...rest } = req.valid.body;
    res.status(201).json({ teacherId: req.valid.params.teacherId, priceCents: price, ...rest });
  },
);

app.listen(3000, () => console.log("http://localhost:3000"));

المخرجات

$ node server.js
http://localhost:3000

→ POST /courses/7
  {"title":"  Node للمحترفين ","price":"199.99","tags":["node"]}
← 201 Created
{
  "teacherId": 7,
  "priceCents": 19999,
  "title": "Node للمحترفين",
  "level": "beginner",
  "tags": [
    "node"
  ]
}

→ POST /courses/abc
  {"title":"Node 101","price":0}
← 422 Unprocessable Entity
{
  "error": "البيانات مش صح",
  "fields": {
    "teacherId": [
      "Invalid input: expected number, received NaN"
    ]
  }
}

→ POST /courses/7
  {"title":"ab","price":-1}
← 422 Unprocessable Entity
{
  "error": "البيانات مش صح",
  "fields": {
    "title": [
      "Too small: expected string to have >=5 characters"
    ],
    "price": [
      "Too small: expected number to be >=0"
    ]
  }
}

→ POST /courses/7
  {"title":"Node 101","price":0,"role":"admin"}
← 422 Unprocessable Entity
{
  "error": "البيانات مش صح",
  "fields": {},
  "form": [
    "Unrecognized key: \"role\""
  ]
}

two oh one، والسعر بقى تسعتاشر ألف تسعمية تسعة وتسعين قرش، والـ level default. abc: الـ teacherId. التالتة: title و price مع بعض. والرابعة: Unrecognized key role. الدرس الجاي: تصنيف الأخطاء، وشكل موحّد للـ errors اسمه Problem Details.

schemas.js

import { z } from "zod";

export const Signup = z
  .object({
    name: z.string().trim().min(2, { error: "الاسم قصير" }).max(50),
    email: z.email({ error: "إيميل غلط" }).toLowerCase(),
    age: z.coerce.number().int().min(13),
    password: z.string().min(8),
    confirm: z.string(),
  })
  .refine((d) => d.password === d.confirm, {
    error: "الـ password مش متطابق",
    path: ["confirm"],
  });


export const CreateCourse = z.strictObject({
  title: z.string().trim().min(5).max(120),
  price: z.coerce
    .number()
    .min(0)
    .max(10000)
    .transform((p) => Math.round(p * 100)),
  level: z.enum(["beginner", "intermediate", "advanced"]).default("beginner"),
  tags: z.array(z.string().min(2).max(20)).max(5).default([]),
});

export const CourseParams = z.object({
  teacherId: z.coerce.number().int().positive(),
});

validate.js

import { z } from "zod";

// factory: validate(schema, "body" | "query" | "params")
export function validate(schema, where = "body") {
  return (req, res, next) => {
    const result = schema.safeParse(req[where] ?? {});
    if (!result.success) {
      const { formErrors, fieldErrors } = z.flattenError(result.error);
      return res.status(422).json({
        error: "البيانات مش صح",
        fields: fieldErrors,
        ...(formErrors.length ? { form: formErrors } : {}),
      });
    }
    req.valid = { ...req.valid, [where]: result.data };
    next();
  };
}

03 / دروس المسار (122)