الحماية من CSRF في React وإعدادات API

تزوير الطلبات عبر المواقع (CSRF) هو هجوم يخدع فيه موقع خبيث متصفح المستخدم لإرسال طلب مصادق عليه إلى واجهة API الخاصة بكم. وبما أن المتصفح يرفق ملفات تعريف الارتباط بالطلبات تلقائيًا، فلا يستطيع الخادم التمييز بين طلب مشروع صادر من تطبيقكم وطلب مزوّر صادر من موقع المهاجم.

تُعدّ ملفات تعريف الارتباط السبب الجذري لثغرة CSRF. فعندما يسجّل المستخدم الدخول إلى تطبيقكم، يُخزّن ملف جلسة تعريف الارتباط الخاص به في المتصفح. وعند زيارة صفحة المهاجم، يستطيع المهاجم تشغيل إرسال نموذج أو طلب fetch إلى واجهة API الخاصة بكم، فيُدرج المتصفح ملف جلسة تعريف الارتباط تلقائيًا، وبذلك يصادق على الطلب الخبيث.

تُخبر سمة SameSite في ملف تعريف الارتباط المتصفحات بموعد تضمين ملفات تعريف الارتباط في الطلبات بين المواقع. ولها ثلاث قيم: Lax (القيمة الافتراضية في المتصفحات الحديثة — تحظر POST بين المواقع وتسمح بـ GET)، وStrict (تحظر جميع الطلبات بين المواقع، بما في ذلك عمليات التنقل عبر GET)، وNone (تسمح بالطلبات بين المواقع، وتتطلب علامة Secure مع HTTPS).

تحظر SameSite=Lax طلبات POST وPUT وDELETE وPATCH بين المواقع — وهي الأساليب المستخدمة للتعديلات. إذا كانت واجهة API الخاصة بكم تستخدم GET للقراءة فقط وPOST لجميع التعديلات، فإن SameSite=Lax تمنع CSRF بفعالية في تطبيقات SPA ضمن المتصفحات الحديثة. وهذا هو الإجراء الأساسي للتخفيف الذي تعتمد عليه معظم التطبيقات اليوم.

نمط ملف تعريف الارتباط ذي الإرسال المزدوج هو إجراء للتخفيف من CSRF، يضع فيه الخادم رمز CSRF عشوائيًا في ملف تعريف ارتباط غير مميز بـ HttpOnly. يقرأ العميل قيمة ملف تعريف الارتباط هذه ويضمّنها في ترويسة طلب مخصصة، مثل X-CSRF-Token. ويتحقق الخادم من تطابق قيمة الترويسة مع قيمة ملف تعريف الارتباط. ولا يستطيع المهاجم قراءة ملف تعريف الارتباط من مصدر مختلف، لذلك لا يمكنه ضبط الترويسة الصحيحة.

ينشئ نمط رمز المزامنة رمز CSRF فريدًا لكل جلسة مستخدم على الخادم. وبالنسبة إلى نماذج HTML، يُضمَّن الرمز في حقل مخفي. أما بالنسبة إلى استدعاءات SPA لـ API، فيُوفَّر الرمز عبر نقطة نهاية أو وسم meta، ويُرسل في ترويسة مخصصة. ويتحقق الخادم من الرمز في كل طلب يغيّر الحالة.

لا تكون React SPA التي تخزّن JWT في الذاكرة أو في localStorage وترسله في ترويسة Authorization: Bearer عرضةً لـ CSRF التقليدي. تستغل هجمات CSRF المصادقة المعتمدة على ملفات تعريف الارتباط — إذ لا يمكن لصفحة المهاجم ضبط ترويسات مخصصة في الطلبات بين المصادر بسبب قيود CORS، ولذلك لا يمكنها تزوير ترويسة Authorization.

لا تسمح الطلبات البسيطة بين المصادر، مثل POST عبر نموذج أو تحميل صورة، بالترويسات المخصصة. ولا يمكن أن تتضمن الترويسات المخصصة إلا الطلبات التي تمر بعملية الفحص المسبق لـ CORS — وتتطلب الطلبات التي تخضع للفحص المسبق إذنًا صريحًا من الخادم. وتكون واجهة API التي تتطلب ترويسة مخصصة، مثل X-Requested-With: XMLHttpRequest، لجميع التعديلات محمية بطبيعتها من هجمات CSRF البسيطة.

يتحكم CORS في الأصول التي يمكنها قراءة الاستجابة من طلب عابر لأصل مختلف. أما CSRF فيتعلق بالأصول التي يمكنها إرسال طلبات تغيّر الحالة. لا يمنع ضبط CORS لتقييد الأصول هجمات CSRF؛ فما زال المتصفح يرسل الطلب وملف تعريف الارتباط، إذ يتحكم CORS فقط في ما إذا كانت الاستجابة مرئية لـ JavaScript. ولا يحتاج هجوم CSRF إلى قراءة الاستجابة.

اضبط ملفات تعريف ارتباط الجلسة باستخدام: HttpOnly: true (يمنع JavaScript من قراءة ملف تعريف الارتباط، مما يوقف سرقة الرموز المستندة إلى XSS)، وSecure: true (لا يُرسل إلا عبر HTTPS)، وSameSite: Lax أو Strict (يمنع CSRF)، وقيمة مناسبة لـ Max-Age أو تاريخ انتهاء مناسب. تعمل هذه السمات الأربع معًا على تعزيز إدارة الجلسات بدرجة كبيرة.

يستخدم Next.js App Router إجراءات الخادم، وهي طلبات POST. يطبّق Next.js حماية من CSRF من خلال التحقق من ترويسة Origin ومقارنتها بالمضيف؛ إذ تُرفض الطلبات الواردة من أصول غير متوقعة. ويوفر هذا التحقق المضمّن، إلى جانب ملفات تعريف ارتباط الجلسة ذات SameSite=Lax، حماية قوية من CSRF لعمليات التغيير المستندة إلى إجراءات الخادم.

ما قيمة ملف تعريف الارتباط SameSite التي تمنع طلبات POST من مواقع مختلفة، لكنها تسمح بعمليات التنقل عبر GET من مواقع مختلفة؟

تستغل CSRF المصادقة المستندة إلى ملفات تعريف الارتباط بخداع المتصفح لإرسال طلبات موثّقة من مواقع مختلفة. تُعد SameSite=Lax خط الدفاع الأساسي في المتصفحات الحديثة. ويوفر نمطا Double Submit Cookie وSynchronizer Token حماية إضافية. تكون تطبيقات React أحادية الصفحة التي تستخدم JWT في ترويسات Authorization محصّنة بطبيعتها ضد CSRF. كما تخفف الترويسات المخصّصة المطلوبة وتهيئة CORS المسبقة من CSRF. احرص دائمًا على الجمع بين HttpOnly + Secure + SameSite في ملفات تعريف ارتباط الجلسة.