الهدف
بنهاية الدرس تقدر تشرح ليش البراوزر يبلوك الـ request من مصدر مختلف (origin)، تصلح خطأ مشاركة الموارد بين المصادر (CORS) في Next.js، وتعرف الخمس قواعد اللي تحمي الـ app من أشهر طرق الاختراق.
ليش هذا الحين؟
ترى لو بنيت app بدون ما تفهم CORS والأمان، أول ما تـ deploy راح تشوف errors غريبة في الـ console — أو أسوأ، حساب مستخدم يتسرّق. CORS error هي أكثر error تواجهها الـ founders في أول deploy. والأمان مو موضوع "نرجع له بعدين" — أشهر الاختراقات على الـ solo apps تستهدف نفس الثغرات البسيطة. هالدرس يغطي الاثنين في وقت واحد.
الفكرة
CORS = Cross-Origin Resource Sharing.
القاعدة الأساسية: البراوزر يمنع الـ frontend من إرسال requests لـ backend على origin مختلف، إلا لو الـ backend يقول صراحة إنه يسمح. "Origin" = protocol + domain + port — مثلا http://localhost:3000 و http://localhost:8000 يعتبرون origins مختلفة حتى لو على نفس الجهاز.
Origin الطلب: http://localhost:3000
Origin الـ API: http://localhost:8000
النتيجة: CORS error — البراوزر يبلوك
الـ CORS error تطلع في البراوزر — مو في الـ server. الـ server استقبل الطلب وردّ، بس البراوزر رفض يسلّم الـ response للـ JavaScript لأن ماكو CORS headers.
الحل: الـ backend يرسل header يقول "أسمح لهالـ origin":
Access-Control-Allow-Origin: https://my-app.com
الخمس قواعد الأمان للـ solo founder:
1. التحقق من المدخلات (Input validation): أي شي يجيك من المستخدم = بيانات مشبوهة. تأكد منها قبل ما تستخدمها.
2. استعلامات بمعاملات (Parameterized queries): ما تحطّ user input مباشرة في استعلام (SQL query). Prisma يحميك تلقائيا لأنه يستخدم prepared statements — هذا من أهم أسباب استخدامه.
3. HTTPS دايما: Vercel يفعّله تلقائيا. ما تنشر app على HTTP في production أبدا.
4. تحديد المعدّل (Rate limiting): تحدّد عدد الـ requests لكل IP في وقت محدد. يمنع brute force attacks على login والـ API.
5. Secrets في متغيرات البيئة (env vars): API keys و database URLs ما تدخل الكود أبد. تروح في .env.local بس، ومو على GitHub.