لما تستقبل بيانات من المستخدم فيه أكتر من سؤال هل البيانات مقبولة وهل فيها تنسيق مسموح وإزاي هتعرضها بعدين كل سؤال له دور مختلف وخلط الأدوار ممكن يغير بيانات المستخدم أو يسيب مشكلة أمنية

ال Validation بتحدد البيانات مقبولة ولا لأ

لو الكمية المطلوبة عدد صحيح من 1 إلى 10 يبقى صفر وكسور ونص عشوائي مرفوضين التحقق على الواجهة مفيد لتجربة المستخدم لكن لازم يتكرر على الخادم لأنه هو اللي بينفذ العملية

function isValidQuantity(value) {
  return Number.isInteger(value) && value >= 1 && value <= 10;
}

console.log(isValidQuantity(3));
console.log(isValidQuantity(0));
console.log(isValidQuantity(2.5));
console.log(isValidQuantity("3"));
true
false
false
false

المثال بيقبل أرقام فقط مدخلات النماذج غالبا بتوصل كنصوص فحدد قواعد التحويل والتحقق بوضوح بدل تحويل أي حاجة لرقم وافتراض إنها سليمة

ال Sanitization بتعدل المحتوى حسب سياسة واضحة

لو عندك محرر يسمح ب HTML ممكن تسمح بالفقرات والخط العريض وتمنع عناصر أو خصائص خطرة استخدم مكتبة متخصصة بقائمة سماح بدل Regular Expression تحاول تفهم كل HTML

التنظيف مش معناه حذف أي حرف شكله غريب من اسم المستخدم أو كلامه لازم تعرف إيه المحتوى المسموح وليه بتغيره علشان متبوظش المعنى

ال Escaping بتجهز النص لسياق العرض

لو هتعرض نص عادي داخل HTML فأنت محتاج تمنع تفسير علاماته كوسوم المثال باستخدام PHP بيحول العلامات لتمثيل نصي مناسب للسياق

<?php
$title = '<strong>Book</strong>';
echo htmlspecialchars($title, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');

المتصفح هيعرض <strong>Book</strong> كنص بدل كلمة بخط عريض ده مناسب لما المدخل عنوان نصي لكنه مش الطريقة المطلوبة لعرض مقال غني بتنسيق HTML مسموح

في المتصفح استخدم طريقة عرض تناسب النص

لو المطلوب كتابة اسم داخل عنصر استخدم textContent بدل بناء innerHTML من نص المستخدم الكود التالي محتاج عنصر موجود بالمعرف الموضح

<p id="book-title"></p>
const title = "<strong>Book</strong>";
document.querySelector("#book-title").textContent = title;

سياق مختلف يعني قواعد مختلفة

الهروب المناسب لنص HTML مش حل تلقائي لقيمة داخل JavaScript أو عنوان URL وبالنسبة لقاعدة البيانات استخدم الاستعلامات ذات المعاملات بدل جمع النصوص في SQL

متخزنش النص بعد تحويله لعرض HTML لمجرد إنك هتعرضه مرة احتفظ بالصيغة المناسبة لبياناتك وطبق الهروب عند العرض علشان نفس القيمة ممكن تستخدمها في بريد أو JSON بعدين

مثال لاختيار المسار الصحيح

عنوان الكتاب نص عادي نتحقق من طوله ثم نعرضه كنص أما محتوى المقال الغني فله سياسة HTML مسموح وبيمر على Sanitizer موثوق والعمر له تحقق من النوع والمدى

كل طبقة ليها مهمة ومفيش خطوة واحدة اسمها تنظيف البيانات تصلح لكل الأنواع اختبر علامات HTML والقيم الطويلة والقيم الناقصة حسب الحقل بدل اختبار نص طبيعي بس

مصادر للتوسع