الهدف
بنهاية الدرس تقدر تشرح ليش البراوزر يبلوك الـ request من origin مختلف، تصلح CORS error في 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.