ال Web security

ليه المرحلة دي مهمة

الفرونت إند هو المكان اللي input اليوزر بيدخل منه للسيستم، والمكان اللي ال Tokens عايشة فيه. XSS bug واحد ممكن يسرّب Session كل اليوزرز. وأدوات ال AI بتطلّع كود مش آمن كتير، فلازم تعرف تكتشفه.

تتعلم إيه

1. لازم تعرفه

   XSS و CSRF وال Injection

   علّم إنه خلص

   ال XSS بيحصل إزاي، وليه ال Frameworks بتعمل escape لوحدها، وخطورة APIs زي innerHTML، وإزاي SameSite cookies بتوقف CSRF.

   تبقى خلصته لما

   • عمرك ما تعرض HTML جاي من يوزر من غير Sanitize (زي DOMPurify).
   • تقدر تشرح XSS و CSRF لحد في الفريق.

   المصادر

   • OWASP Top 10Docs
   • OWASP Cheat Sheet SeriesDocs
2. لازم تعرفه

   CORS و CSP و HTTPS

   علّم إنه خلص

   ليه ال Browser بيمنع ال Cross-origin requests (وليه الحل على ال Server)، و Content Security Policy، وال Security headers.

   تبقى خلصته لما

   • تقدر تقرا CORS error وتقول بالظبط أنهي Header ناقص.
   • حطيت CSP في مشروع.

   المصادر

   • MDN — CORSDocs
   • MDN — CSPDocs
3. لازم تعرفه

   ال Authentication في الفرونت إند

   علّم إنه خلص

   Sessions مقابل JWTs، وتخزّن ال Tokens فين (httpOnly cookies أحسن من localStorage)، وال Refresh flows، و OAuth وال Social login، وإنك عمرك ما تثق في ال Client.

   تبقى خلصته لما

   • تقدر تشرح ليه ال Access tokens في localStorage خطر.
   • عارف إن إخفاء زرار مش Authorization، وال Server لازم يتأكد.

   المصادر

   • OWASP — Authentication Cheat SheetDocs
4. اتعلمه بعدين

   ال Dependencies وال Secrets

   علّم إنه خلص

   هجمات ال Supply chain على npm، ومراجعة ال Dependencies، وإنك تخلي ال Secrets بعيد عن ال Client bundle، وأنهي Environment variables بتبقى public.

   تبقى خلصته لما

   • عمرك ما تحط Secret key في متغير NEXT_PUBLIC_ أو VITE_.

أخطاء شائعة

• إنك 'تصلح' CORS إنك تقفله من ال Browser أو ب Proxy عشوائي.
• إنك تعتمد على ال Validation اللي في ال Client كحماية.