شرح صفوف ومحتوى الفقرة
بعد أن تعرّفنا في الدرس السابق على كيفية تواصل الواجهة الأمامية () مع الواجهة الخلفية () عبر وصيغة ، ننتقل الآن إلى ركيزتين هندسيتين لا غنى عنهما لكل طالب يتجه نحو تطوير الويب أو الأمن السيبراني: أمان الواجهة الأمامية () وسرعة الأداء (). ولأن جميع ملفات الواجهة الأمامية ( و و) تنزل وتعمل مباشرة على جهاز الزائر، يجب أن تدرك بدقة حدود الثقة بين المتصفح والخادم، ولماذا يُمنع وضع أي أسرار داخل كود الواجهة، وكيف تبني واجهة سريعة ومهيأة لمحركات البحث ().
قبل الغوص في تفاصيل هذا الدرس، استعرض جدول المصطلحات الأساسية التالية:
| المصطلح بالعربية | المصطلح بالإنجليزية | النطق التقني | المعنى المبسط |
|---|---|---|---|
| التحقق في المتصفح | كلاينت سايد فاليديشن | فحص سريع أولي لمدخلات النماذج داخل المتصفح لتنبيه المستخدم فوراً وتحسين تجربته قبل إرسال الطلب. | |
| التحقق في الخادم | سيرفر سايد فاليديشن | الفحص الأمني الإلزامي والنهائي للبيانات والصلاحيات داخل الواجهة الخلفية لأنه لا يمكن تجاوزه من المتصفح. | |
| حقن النصوص العابرة للمواقع | كروس سايت سكريبتنج | ثغرة أمنية تحدث عندما يعرض الموقع مدخلات نصية غير منقّاة فتعمل ككود جافاسكريبت داخل متصفح الزائر. | |
| تزوير الطلبات عبر المواقع | كروس سايت ريكويست فورجري | خداع متصفح المستخدم المسجّل دخوله لإرسال طلب غير مقصود إلى موقع آخر يثق بجلسته النشطة. | |
| أداء وسرعة الويب | ويب بيرفورمانس | مدى سرعة تحميل صفحة الويب واستجابتها السلسة لتفاعل المستخدم عبر ضغط الصور وتقليل حجم الملفات. | |
| تحسين محركات البحث التقني | تكنيكال إس إي أو | تنظيم وسوم الصفحة الدلالية وعناوينها وسرعتها لمساعدة محركات البحث مثل Google على فهمها وفهرستها. |
القاعدة الذهبية الأولى لطلاب تطوير الويب والأمن السيبراني هي حقيقة معمارية بسيطة وحاسمة: كل سطر كود في الواجهة الأمامية مكشوف وعام بنسبة 100%. فلكي يتمكن المتصفح من رسم أي صفحة ويب على شاشتك، لا بد أن يرسل الخادم ملفات و و عبر الإنترنت إلى جهازك الشخصي.
وبمجرد وصول هذه الملفات إلى حاسوب الزائر أو هاتفه، يصبح الزائر مالكاً كاملاً للنسخة المعروضة داخل متصفحه:
- استعراض مصدر الصفحة (): يستطيع أي زائر النقر بزر الفأرة الأيمن أو الضغط على لقراءة كود الكامل والروابط والملفات المرفقة بالصفحة.
- فحص وتعديل العناصر الحية (): عبر الضغط على لفتح أدوات المطورين، يمكن لأي شخص إظهار عنصر أُخفي بتنسيق ، أو تفعيل زر معطّل محلياً داخل متصفحه.
- مراقبة طلبات الشبكة والسكربتات (): يمكن للزائر مشاهدة جميع طلبات الخارجة من متصفحه وقراءة ملفات المحمّلة على جهازه.
<!-- WARNING: Hiding an admin button with CSS is NOT security! -->
<!-- Anyone can open F12 DevTools and remove style="display: none" -->
<button id="delete-btn" style="display: none;">
Delete User Account
</button>