Vue Academy · درس

الحماية من CSRF في تطبيقات Vue SPA

ملفات تعريف الارتباط SameSite، ورموز CSRF في Axios، ونمط ملف تعريف الارتباط ذي الإرسال المزدوج

الحماية من CSRF في تطبيقات Vue SPA درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

ما هو CSRF

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

لماذا تتيح ملفات تعريف الارتباط ذلك

إذا كانت المصادقة تعتمد على ملف تعريف ارتباط للجلسة، فإن المتصفح يرفقه بكل طلب إلى نطاقك، بما في ذلك الطلبات التي يبدأها موقع ضار. ولا يستطيع الخادم التمييز بين الطلب المزور والطلب المشروع من دون وسائل دفاع إضافية.

سمة SameSite لملف تعريف الارتباط

يخبر ضبط SameSite في ملف تعريف الارتباط المتصفح بموعد إرساله بين المواقع. وتحجب SameSite=Strict ملف تعريف الارتباط في أي طلب بين المواقع، مما يمنع معظم هجمات CSRF مباشرةً.

Set-Cookie: session=...; SameSite=Strict; Secure; HttpOnly

Strict مقابل Lax

يُعد Strict الخيار الأكثر أمانًا، لكنه قد يتسبب في تسجيل خروج المستخدمين عند وصولهم من روابط خارجية. أما Lax فيرسل ملف تعريف الارتباط عند عمليات التنقل GET ذات المستوى الأعلى فقط، وهو حل وسط شائع.

نمط رمز المزامنة

يضيف الدفاع متعدد الطبقات رمز CSRF لا يستطيع المهاجم معرفته. يُصدر الخادم رمزًا، ويجب على العميل إعادته في الطلبات التي تغيّر الحالة.

ملف تعريف ارتباط الإرسال المزدوج

نهج شائع في تطبيقات SPA: يضع الخادم رمز CSRF في ملف تعريف ارتباط قابل للقراءة (غير مضبوط بخيار HttpOnly). يقرأه العميل ويعيد إرساله في ترويسة. ويتحقق الخادم من تطابق القيمتين.

Set-Cookie: XSRF-TOKEN=abc123; SameSite=Strict; Secure

قراءة الرمز من ملف تعريف الارتباط

اقرأ قيمة ملف تعريف ارتباط CSRF باستخدام دالة مساعدة صغيرة في تطبيق Vue.

function getCookie(name) {
  const match = document.cookie.match(
    new RegExp("(^| )" + name + "=([^;]+)")
  );
  return match ? decodeURIComponent(match[2]) : null;
}
const token = getCookie("XSRF-TOKEN");

ضبط الترويسة في الطلبات

أرسل الرمز في ترويسة مخصصة مثل X-CSRF-Token مع كل طلب يغيّر الحالة (POST وPUT وPATCH وDELETE).

await fetch("/api/transfer", {
  method: "POST",
  headers: { "X-CSRF-Token": token },
  body: JSON.stringify(payload)
});

الترويسات الافتراضية في Axios

باستخدام Axios، اضبط الترويسة مرة واحدة كقيمة افتراضية، بحيث يتضمنها كل طلب تلقائيًا.

import axios from "axios";

axios.defaults.headers.common["X-CSRF-Token"] = getCookie("XSRF-TOKEN");

دعم xsrf المدمج في Axios

يمكن لـ Axios تنفيذ ذلك تلقائيًا: اضبط اسمي ملف تعريف الارتباط والترويسة، وسيقرأ ملف تعريف الارتباط ويضبط الترويسة نيابةً عنك.

const api = axios.create({
  xsrfCookieName: "XSRF-TOKEN",
  xsrfHeaderName: "X-CSRF-Token",
  withCredentials: true
});

لماذا تساعد الترويسة المخصصة

تحظر المتصفحات مواقع المصادر المختلفة من ضبط ترويسات مخصصة من دون اجتياز طلب CORS تمهيدي. ويعني اشتراط X-CSRF-Token أن الطلب المزور بين المواقع لا يمكنه تضمينه، فيرفضه الخادم.

تحقق سريع

ما سمة ملف تعريف الارتباط التي تحد من CSRF بحد ذاتها على نحو مباشر أكثر؟

ملخص

تستغل CSRF ملفات تعريف الارتباط المرسلة تلقائيًا لتزوير الطلبات التي تغيّر الحالة. اضبط SameSite=Strict في ملفات تعريف ارتباط المصادقة كدفاع أساسي، وأضف رمز CSRF: اقرأه من ملف تعريف ارتباط وأرسله مع كل طلب تغييري عبر ترويسة X-CSRF-Token، واضبطه مرة واحدة كقيمة افتراضية في Axios أو من خلال خيارات xsrf المدمجة في Axios.

الأسئلة الشائعة

هل درس «الحماية من CSRF في تطبيقات Vue SPA» مجاني؟

نعم — نص درس «الحماية من CSRF في تطبيقات Vue SPA» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «الحماية من CSRF في تطبيقات Vue SPA»؟

ملفات تعريف الارتباط SameSite، ورموز CSRF في Axios، ونمط ملف تعريف الارتباط ذي الإرسال المزدوج تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «الحماية من CSRF في تطبيقات Vue SPA»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy