EMZETT.
Увійти

Emzett Wiki

Валідація форм за допомогою Zod і схем: безпечна перевірка вводу

Properties1
tagsglossar, typescript, sicherheit

2 хв читання

Валідація форм за допомогою Zod і схем: безпечна перевірка вводу

Коротко: Користувацькому вводу довіряти не можна; за допомогою бібліотек схем на кшталт Zod ви один раз централізовано перевіряєте форму, тип і межі: у браузері для зручності та на сервері для безпеки.

Докладніше: Усе, що приходить ззовні (форми, параметри URL, запити API, cookie), може бути хибним або шкідливим. Валідація гарантує, що дані відповідають очікуванням, перш ніж програма їх використовує. TypeScript перевіряє лише під час розробки; під час виконання потрібен код перевірки.

Подробиці

Zod коротко

import { z } from "zod";
const Signup = z.object({
  email: z.string().email("Invalid email")
  age: z.coerce.number().int().min(13).max(120)
  password: z.string().min(12)
  terms: z.literal("on", { message: "Please agree" })
});
const r = Signup.safeParse(Object.fromEntries(formData));
if (!r.success) return { errors: r.error.flatten().fieldErrors };
const data = r.data; // чисто типізовано

Схема — джерело істини: type Signup = z.infer<typeof Signup> створює тип TypeScript. Подібні: Valibot, Yup, ArkType, Joi, JSON Schema.

Де перевіряти?

  • У браузері: швидкий зворотний зв’язок (атрибути HTML required, type=email, pattern, плюс схема). Лише зручність, легко обійти.
  • Завжди ще й на сервері (маршрут API, серверна дія): саме тут безпека. Ніколи не покладайтеся на те, що браузер перевірив.
  • База даних: обмеження (NOT NULL, UNIQUE, CHECK, зовнішні ключі) як останній захист.
  • Вивід: екрануйте під час відображення (XSS), а не «очищайте й сподівайтеся».

Хороші правила

  • Список дозволеного замість списку забороненого: допускайте відомі хороші значення (enum, шаблон), а не шукайте погані.
  • Задавайте ліміти (довжина, розмір, кількість, діапазон значень), також для завантаження файлів (перевірка типу, розміру, вмісту).
  • Перетворюйте типи навмисно (coerce), обрізайте пробіли.
  • Повідомлення про помилки корисні, але без внутрішніх подробиць.
  • Відхиляйте/видаляйте невідомі поля (запобігайте масовому присвоєнню: користувач не повинен зуміти надіслати isAdmin: true).
  • Кодування символів і нормалізація (адреса пошти в нижньому регістрі).
  • Обмеження частоти запитів і CAPTCHA/honeypot проти спаму.

Взаємодія

З react-hook-form (+ zodResolver) або серверними діями (useActionState) ви отримуєте форми з відображенням помилок по полях. Доступність: пов’язуйте помилки з полем (aria-describedby, aria-invalid), мітки, фокус на першому хибному полі. Конфіденційність: збирайте лише необхідні поля. Перевіряйте валідацію модульними тестами (правильні й хибні приклади, крайні випадки).

Див. також: SQL-ін’єкція, XSS, Обмеження частоти запитів, CAPTCHA, TypeScript

Зворотні посилання