Formları Zod ve şemalarla doğrulamak: girdileri güvenle denetlemek

Kısaca: Kullanıcı girdisine asla güvenilmez; Zod gibi şema kütüphaneleriyle biçimi, türü ve sınırları bir kez merkezî olarak denetlersin: kolaylık için tarayıcıda, güvenlik için sunucuda.

Biraz daha ayrıntılı: Dışarıdan gelen her şey (formlar, URL parametreleri, API istekleri, çerezler) yanlış veya kötü niyetli olabilir. Doğrulama, verilerin program tarafından kullanılmadan önce beklentiyle uyuştuğundan emin olur. TypeScript yalnızca geliştirme zamanında denetler; çalışma zamanında denetim koduna ihtiyaç vardır.

Ayrıntılı

Kısaca 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; // temiz biçimde tiplenmiş

Şema gerçeğin kaynağıdır: type Signup = z.infer<typeof Signup> TypeScript türünü üretir. Benzerleri: Valibot, Yup, ArkType, Joi, JSON Schema.

Nerede denetlemeli?

• Tarayıcıda: hızlı geri bildirim (HTML nitelikleri required, type=email, pattern, artı şema). Yalnızca kolaylık, kolayca atlatılabilir.
• Her zaman sunucuda da (API rotası, sunucu eylemi): güvenlik buradadır. Tarayıcının denetlediğine asla güvenme.
• Veri tabanı: son savunma olarak kısıtlamalar (NOT NULL, UNIQUE, CHECK, yabancı anahtarlar).
• Çıktı: gösterirken kaçışla (XSS), “temizle ve umut et” değil.

İyi kurallar

• Yasaklı liste yerine izin listesi: kötüyü aramak yerine bilinen iyi değerlere izin ver (enum, desen).
• Sınırlar koy (uzunluk, boyut, sayı, değer aralığı), dosya yüklemeleri için de (tür, boyut, içerik kontrolü).
• Türleri bilerek dönüştür (coerce), boşlukları kırp.
• Hata mesajları yararlı ama iç ayrıntı içermeden.
• Bilinmeyen alanları reddet/kaldır (toplu atamayı önle: kullanıcı isAdmin: true gönderememeli).
• Karakter kodlaması ve normalleştirme (küçük harfli e-posta).
• Spam’e karşı hız sınırlama ve CAPTCHA/honeypot.

Etkileşim

react-hook-form (+ zodResolver) veya sunucu eylemleri (useActionState) ile alan başına hata gösterimli formlar elde edersin. Erişilebilirlik: hataları alana bağla (aria-describedby, aria-invalid), etiketler, odak ilk hatalı alanda. Gizlilik: yalnızca gerekli alanları topla. Doğrulamayı birim testleriyle sına (geçerli ve geçersiz örnekler, uç durumlar).

Ayrıca bak: SQL enjeksiyonu, XSS, Hız sınırlama, CAPTCHA, TypeScript