CSRF: ملفات تعريف الارتباط والرموز SameSite
افهم كيف تستغل Cross-Site Request Forgery ملفات تعريف الارتباط، واستخدم SameSite=Strict/Lax لمنعها، وأضف رموز المزامنة لحماية إضافية
CSRF: ملفات تعريف الارتباط والرموز SameSite درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ما هو CSRF؟
تزوير الطلبات عبر المواقع: يخدع المهاجم متصفح مستخدم موثَّق لإرسال طلب إلى موقعك. يُرفق المتصفح ملفات تعريف ارتباط المستخدم، فيعتقد الخادم أن الطلب شرعي وصادر عن المستخدم.
هجوم CSRF تقليدي
يسجّل المستخدم الدخول إلى bank.com، ثم يزور evil.com. يرسل evil.com نموذجًا مخفيًا إلى bank.com/transfer يتضمن رقم حساب المهاجم. يرسل المتصفح ملف تعريف جلسة bank.com تلقائيًا، فيحوّل الخادم الأموال.
مشكلة الثقة
ينجح CSRF لأن المتصفحات تُضمّن ملفات تعريف الارتباط تلقائيًا في الطلبات الواردة من مصادر مختلفة. ولا يستطيع الخادم معرفة أن الطلب جاء من موقع ضار من دون حماية إضافية.
ملفات تعريف الارتباط SameSite — الحل الحديث
تتحكم سمة ملف تعريف الارتباط SameSite في وقت إرسال ملفات تعريف الارتباط في الطلبات الواردة من مصادر مختلفة. Strict: لا تُرسل مطلقًا عبر المصادر المختلفة. Lax (الإعداد الافتراضي في Chrome): تُرسل فقط عند الانتقال GET إلى مستوى الصفحة العلوي. None: تُرسل دائمًا (ويجب استخدام Secure معها أيضًا).
Set-Cookie: session=abc; HttpOnly; Secure; SameSite=Laxالإعداد الافتراضي SameSite=Lax
يضبط Chrome جميع ملفات تعريف الارتباط على Lax افتراضيًا إذا لم تُحدَّد SameSite. يحظر ذلك معظم هجمات CSRF، لكن ينبغي تحديد الإعداد صراحةً على أي حال.
SameSite=Strict لأقصى قدر من الأمان
استخدم Strict لملفات تعريف الارتباط الأكثر حساسية، مثل جلسات المسؤول ومعاملات البنك. أما الجانب السلبي فهو أن المستخدم سيبدو كأنه سجّل الخروج عند وصوله عبر رابط من موقع آخر.
رموز CSRF (النمط المتزامن)
لضمان دعم المتصفحات القديمة أو لإضافة حماية أخرى، استخدم رموز CSRF. ينشئ الخادم رمزًا عشوائيًا، ويُضمّنه في الصفحة، ويطلب إرساله مع كل طلب يغيّر الحالة.
// Server embeds token in HTML or sets it as a non-HttpOnly cookie:
<meta name="csrf-token" content="a1b2c3...">
// Client reads token and sends in header:
const token = document.querySelector('meta[name=csrf-token]').content;
fetch('/transfer', {
method: 'POST',
headers: { 'X-CSRF-Token': token },
body: JSON.stringify({ amount: 100 })
});
// Server verifies the X-CSRF-Token header matches the user's sessionملف تعريف الارتباط Double-Submit
يضبط الخادم ملف تعريف ارتباط CSRF (من دون HttpOnly حتى يتمكن JavaScript من قراءته). يقرأ العميل قيمته ويرسلها في ترويسة. ويتحقق الخادم من تطابق قيمة ملف تعريف الارتباط مع قيمة الترويسة. لا يستطيع المهاجم قراءة ملف تعريف الارتباط عبر مصدر مختلف، ولذلك لا يمكنه إنشاء الترويسة نفسها.
سبب نجاحه
لا يستطيع موقع المهاجم evil.com قراءة ملفات تعريف الارتباط من bank.com بسبب سياسة المصدر نفسه (Same-Origin Policy). لذلك لا يمكنه ضبط ترويسة X-CSRF-Token، ويفشل الطلب في فحص الرمز على الخادم.
CSRF في تطبيقات SPA باستخدام Bearer Tokens
إذا أجريت المصادقة باستخدام Authorization: Bearer <jwt> المخزَّن في الذاكرة (وليس في ملف تعريف ارتباط)، فلا ينطبق CSRF؛ إذ لا ترسل المتصفحات الترويسات تلقائيًا. لكن المقابل هو زيادة التعرض لـ XSS، لأن الرموز التي يستطيع JavaScript الوصول إليها يمكن سرقتها.
حيلة الترويسة المخصصة
بالنسبة إلى واجهات API التي لا تقبل إلا JSON مع ترويسة مخصصة، مثل X-Requested-With، ترسل المتصفحات طلب OPTIONS تمهيديًا، ولا تُضمّن ملفات تعريف الارتباط في هذا الطلب. وهذا يحظر عمليًا هجمات CSRF البسيطة القائمة على النماذج.
نقاط النهاية عديمة الأثر الجانبي مقابل نقاط النهاية المُغيِّرة
يؤثر CSRF غالبًا في الطلبات التي تغيّر الحالة، مثل POST وPUT وDELETE. ينبغي أن تكون نقاط نهاية GET عديمة الأثر الجانبي، بحيث لا يؤدي تنفيذها إلى أي تغيير، ولذلك لا يستطيع طلب GET مُزوَّر إحداث ضرر.
فحص سريع
ما قيمة ملف تعريف الارتباط SameSite التي تمنع إرسال ملفات تعريف الارتباط في معظم الطلبات الواردة من مواقع مختلفة افتراضيًا في المتصفحات الحديثة؟
مراجعة: الوقاية من CSRF
اضبط SameSite=Lax (أو Strict) لملفات تعريف ارتباط الجلسة، فهذا يحظر معظم هجمات CSRF. أضف HttpOnly وSecure. استخدم رموز CSRF (النمط المتزامن أو ملف تعريف ارتباط Double-Submit) لحماية إضافية. تتجنب Bearer Tokens في الترويسات هجمات CSRF، لكنها تزيد خطر XSS. تُجبر حيلة الترويسة المخصصة المتصفح على إرسال طلب تمهيدي. اجعل طلبات GET عديمة الأثر الجانبي.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 41
- الدروس
- 163
الأسئلة الشائعة
هل درس «CSRF: ملفات تعريف الارتباط والرموز SameSite» مجاني؟
نعم — نص درس «CSRF: ملفات تعريف الارتباط والرموز SameSite» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «CSRF: ملفات تعريف الارتباط والرموز SameSite»؟
افهم كيف تستغل Cross-Site Request Forgery ملفات تعريف الارتباط، واستخدم SameSite=Strict/Lax لمنعها، وأضف رموز المزامنة لحماية إضافية تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «CSRF: ملفات تعريف الارتباط والرموز SameSite»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- منع XSS: ترميز المخرجات وCSP
- CSRF: ملفات تعريف الارتباط والرموز SameSite
- Content Security Policy: nonce وhash
- تدفقات OAuth من الواجهة الأمامية