لما تستقبل بيانات من المستخدم فيه أكتر من سؤال هل البيانات مقبولة وهل فيها تنسيق مسموح وإزاي هتعرضها بعدين كل سؤال له دور مختلف وخلط الأدوار ممكن يغير بيانات المستخدم أو يسيب مشكلة أمنية
ال 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 والقيم الطويلة والقيم الناقصة حسب الحقل بدل اختبار نص طبيعي بس