"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "ما-هو-csrf", "hProperties": { "id": "ما-هو-csrf" } }, "depth": 2, "value": "ما هو CSRF؟" }, { "data": { "id": "كيف-يعمل-csrf", "hProperties": { "id": "كيف-يعمل-csrf" } }, "depth": 2, "value": "كيف يعمل CSRF" }, { "data": { "id": "سياسة-نفس-الأصل-للمتصفح", "hProperties": { "id": "سياسة-نفس-الأصل-للمتصفح" } }, "depth": 3, "value": "سياسة نفس الأصل للمتصفح" }, { "data": { "id": "آلية-إرسال-ملفات-تعريف-الارتباط-تلقائيًا", "hProperties": { "id": "آلية-إرسال-ملفات-تعريف-الارتباط-تلقائيًا" } }, "depth": 3, "value": "آلية إرسال ملفات تعريف الارتباط تلقائيًا" }, { "data": { "id": "خطوات-هجوم-csrf", "hProperties": { "id": "خطوات-هجوم-csrf" } }, "depth": 3, "value": "خطوات هجوم CSRF" }, { "data": { "id": "مثال-على-هجوم-csrf", "hProperties": { "id": "مثال-على-هجوم-csrf" } }, "depth": 2, "value": "مثال على هجوم CSRF" }, { "data": { "id": "طرق-شائعة-لمنع-هجمات-csrf", "hProperties": { "id": "طرق-شائعة-لمنع-هجمات-csrf" } }, "depth": 2, "value": "طرق شائعة لمنع هجمات CSRF" }, { "data": { "id": "استخدام-رموز-csrf", "hProperties": { "id": "استخدام-رموز-csrf" } }, "depth": 3, "value": "استخدام رموز CSRF" }, { "data": { "id": "التحقق-من-عنوان-referer", "hProperties": { "id": "التحقق-من-عنوان-referer" } }, "depth": 3, "value": "التحقق من عنوان Referer" }, { "data": { "id": "استخدام-صفة-samesite-لملفات-تعريف-الارتباط", "hProperties": { "id": "استخدام-صفة-samesite-لملفات-تعريف-الارتباط" } }, "depth": 3, "value": "استخدام صفة SameSite لملفات تعريف الارتباط" }, { "data": { "id": "استخدام-رؤوس-طلب-مخصصة", "hProperties": { "id": "استخدام-رؤوس-طلب-مخصصة" } }, "depth": 3, "value": "استخدام رؤوس طلب مخصصة" }, { "data": { "id": "تحقق-مضاعف-لملف-تعريف-الارتباط", "hProperties": { "id": "تحقق-مضاعف-لملف-تعريف-الارتباط" } }, "depth": 3, "value": "تحقق مضاعف لملف تعريف الارتباط" }, { "data": { "id": "استخدام-إعادة-المصادقة-للإجراءات-الحساسة", "hProperties": { "id": "استخدام-إعادة-المصادقة-للإجراءات-الحساسة" } }, "depth": 3, "value": "استخدام إعادة المصادقة للإجراءات الحساسة" }, { "data": { "id": "الخلاصة", "hProperties": { "id": "الخلاصة" } }, "depth": 2, "value": "الخلاصة" }]; const readingTime = { "minutes": 1, "words": 403, "text": "less than a minute read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "عند العمل في تطوير الويب، خاصة مع ملفات تعريف الارتباط، نسمع غالبًا عبارات مثل \"هذا الإعداد يساعد في منع CSRF\". ومع ذلك، فإن الكثير من الناس لديهم فكرة غامضة فقط عن ما يعنيه \"CSRF\" حقًا." }), "\n", _jsx(_components.p, { children: "اليوم، سنقوم بالغوص في عمق CSRF، وهو خلل أمني شائع على الويب. سيساعدنا هذا في التعامل مع القضايا المتعلقة بـ CSRF بشكل أكثر فاعلية." }), "\n", _jsxs(_components.h2, { id: "ما-هو-csrf", children: ["ما هو CSRF؟", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ما-هو-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CSRF (تزوير الطلبات عبر المواقع) هو نوع من الهجمات على الويب حيث يخدع المهاجمون المستخدمين المصادق عليهم لأداء إجراءات غير مقصودة. ببساطة، إنه \"هاكرز يتظاهرون بأنهم مستخدمون لتنفيذ إجراءات غير مصرح بها\"." }), "\n", _jsxs(_components.h2, { id: "كيف-يعمل-csrf", children: ["كيف يعمل CSRF", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#كيف-يعمل-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "لفهم CSRF، نحتاج إلى فهم بعض المفاهيم الرئيسية:" }), "\n", _jsxs(_components.h3, { id: "سياسة-نفس-الأصل-للمتصفح", children: ["سياسة نفس الأصل للمتصفح", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#سياسة-نفس-الأصل-للمتصفح", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "سياسة نفس الأصل هي ميزة أمان في المتصفحات التي تحد من كيفية تفاعل مستند أو سكريبت من أصل واحد مع الموارد من أصل آخر." }), "\n", _jsxs(_components.p, { children: ["يتكون الأصل من بروتوكول (مثل HTTP أو HTTPS)، اسم المجال، ورقم المنفذ. على سبيل المثال، ", _jsx(_components.code, { children: "https://example.com:443" }), " هو أصل واحد، بينما ", _jsx(_components.code, { children: "https://demo.com:80" }), " أصل آخر."] }), "\n", _jsx(_components.p, { children: "تقيّد سياسة نفس الأصل الوصول إلى البيانات بين الصفحات من أصول مختلفة، مما يعني:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "لا يمكن لجافا سكريبت من أصل واحد قراءة DOM لأصل آخر" }), "\n", _jsx(_components.li, { children: "لا يمكن لجافا سكريبت من أصل واحد قراءة Cookie، أو IndexedDB، أو localStorage لأصل آخر" }), "\n", _jsx(_components.li, { children: "لا يمكن لجافا سكريبت من أصل واحد إرسال طلبات AJAX إلى أصل آخر (ما لم يتم استخدام CORS)" }), "\n"] }), "\n", _jsx(_components.p, { children: "ومع ذلك، للحفاظ على الانفتاح وقابلية التشغيل البيني للويب (مثل تحميل الموارد من CDN أو إرسال الطلبات إلى APIs خارجية للتسجيل)، لا تقوم سياسة نفس الأصل بتقييد الطلبات الشبكية عبر الأصول:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "يمكن للصفحات إرسال طلبات GET أو POST إلى أي أصل (مثل تحميل الصور أو إرسال النماذج)" }), "\n", _jsxs(_components.li, { children: ["يمكن تضمين الموارد من أي أصل (مثل علامات ", _jsx(_components.code, { children: "\n \n\n" }) }), "\n", _jsxs(_components.p, { children: ["عندما يضغط المستخدم على رابط ", _jsx(_components.code, { children: "https://evil.com" }), " دون تسجيل الخروج من حسابه البنكي، ولأنه مسجل دخول بالفعل إلى ", _jsx(_components.code, { children: "bank.com" }), "، فإن المتصفح يحتوي على ملف تعريف ", _jsx(_components.code, { children: "session_id" }), " صالح."] }), "\n", _jsxs(_components.p, { children: ["بعد تحميل الصفحة الضارة، ترسل بشكل تلقائي النموذج المخفي، وترسل طلب تحويل إلى ", _jsx(_components.code, { children: "https://bank.com/transfer" }), "."] }), "\n", _jsxs(_components.p, { children: ["يقوم المتصفح تلقائيًا بإرفاق ملف تعريف الارتباط الخاص بـ ", _jsx(_components.code, { children: "bank.com" }), " بهذا الطلب. يتلقى خادم ", _jsx(_components.code, { children: "bank.com" }), " الطلب، يتحقق من صحة ملف تعريف الارتباط، ثم ينفذ هذه العملية الغير المصرح بها."] }), "\n", _jsxs(_components.h2, { id: "طرق-شائعة-لمنع-هجمات-csrf", children: ["طرق شائعة لمنع هجمات CSRF", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#طرق-شائعة-لمنع-هجمات-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "إليكم بعض الطرق الشائعة المستخدمة في الدفاع عن هجمات CSRF. سنشرح بالتفصيل مبدأ كل طريقة وكيف تعمل بفعالية في منع هجمات CSRF:" }), "\n", _jsxs(_components.h3, { id: "استخدام-رموز-csrf", children: ["استخدام رموز CSRF", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#استخدام-رموز-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "تعد رموز CSRF واحدة من أكثر الطرق فعالية للدفاع عن الهجمات. إليكم كيف تعمل:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "يقوم الخادم بتوليد رمز فريد وغير متوقع لكل جلسة." }), "\n", _jsx(_components.li, { children: "يتم تضمين هذا الرمز في جميع النماذج للإجراءات الحساسة." }), "\n", _jsx(_components.li, { children: "عندما يرسل المستخدم نموذجًا، يتحقق الخادم من صحة الرمز." }), "\n"] }), "\n", _jsx(_components.p, { children: "نظرًا لأن رمز CSRF هو قيمة فريدة مرتبطة بجلسة المستخدم، ولا يمكن للمهاجم معرفة أو تخمين هذه القيمة (نظرًا لأنها تختلف لكل جلسة)، حتى لو نجح المهاجم في خداع المستخدم لإرسال طلب، سيتم رفض الطلب بواسطة الخادم بسبب عدم وجود رمز CSRF صالح." }), "\n", _jsx(_components.p, { children: "مثال على التنفيذ:" }), "\n", _jsx(_components.p, { children: "على الجانب الخادم (باستخدام Node.js وExpress):" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "const express = require('express');\nconst crypto = require('crypto');\nconst app = express();\n\n// توليد رمز CSRF\nfunction generateCSRFToken() {\n return crypto.randomBytes(16).toString('hex');\n}\n\n// وسيط حماية CSRF\napp.use((req, res, next) => {\n if (req.method === 'GET') {\n // توليد رمز CSRF جديد لكل طلب GET\n req.session.csrfToken = generateCSRFToken();\n } else if (['POST', 'PUT', 'DELETE'].includes(req.method)) {\n // تحقق من رمز CSRF\n const submittedToken = req.body._csrf || req.headers['x-csrf-token'];\n if (submittedToken !== req.session.csrfToken) {\n return res.status(403).json({ error: 'فشل التحقق من رمز CSRF' });\n }\n }\n next();\n});\n" }) }), "\n", _jsx(_components.p, { children: "في جافا سكريبت الواجهة الأمامية:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "// إرسال طلب مع رمز CSRF\nasync function sendRequestWithCSRFToken(url, method, data) {\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content');\n const response = await fetch(url, {\n method: method,\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': csrfToken\n },\n body: JSON.stringify(data)\n });\n return response.json();\n}\n" }) }), "\n", _jsxs(_components.h3, { id: "التحقق-من-عنوان-referer", children: ["التحقق من عنوان ", _jsx(_components.code, { children: "Referer" }), _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#التحقق-من-عنوان-referer", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["يحتوي عنوان ", _jsx(_components.code, { children: "Referer" }), " على URL الصفحة التي بدأت الطلب. من خلال التحقق من عنوان ", _jsx(_components.code, { children: "Referer" }), "، يمكن للخادم تحديد ما إذا كان الطلب يأتي من مصدر شرعي."] }), "\n", _jsxs(_components.p, { children: ["نظرًا لأن هجمات CSRF تأتي عادةً من نطاقات مختلفة، سيظهر عنوان ", _jsx(_components.code, { children: "Referer" }), " اسم نطاق المهاجم. من خلال التحقق مما إذا كان ", _jsx(_components.code, { children: "Referer" }), " هو القيمة المتوقعة، يمكن حظر الطلبات من مصادر غير معروفة."] }), "\n", _jsxs(_components.p, { children: ["ومع ذلك، من الجدير بالذكر أن هذه الطريقة ليست موثوقة تمامًا، حيث إن بعض المتصفحات قد لا ترسل عنوان ", _jsx(_components.code, { children: "Referer" }), "، ويمكن للمستخدمين تعطيل إرسال عنوان ", _jsx(_components.code, { children: "Referer" }), " من خلال إعدادات المتصفح أو الإضافات."] }), "\n", _jsx(_components.p, { children: "مثال على التنفيذ:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "function checkReferer(req) {\n const referer = req.get('Referer');\n return referer && referer.startsWith('https://yourwebsite.com');\n}\n\napp.use((req, res, next) => {\n if (['POST', 'PUT', 'DELETE'].includes(req.method) && !checkReferer(req)) {\n return res.status(403).json({ error: 'مرجع غير صالح' });\n }\n next();\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "استخدام-صفة-samesite-لملفات-تعريف-الارتباط", children: ["استخدام صفة ", _jsx(_components.code, { children: "SameSite" }), " لملفات تعريف الارتباط", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#استخدام-صفة-samesite-لملفات-تعريف-الارتباط", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "SameSite" }), " هي صفة لملفات تعريف الارتباط تُستخدم للتحكم في ما إذا كانت ملفات تعريف الارتباط تُرسل مع الطلبات عبر المواقع. لديها ثلاث قيم محتملة:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Strict" }), ": تُرسل ملفات تعريف الارتباط فقط في الطلبات من نفس الموقع."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Lax" }), ": تُرسل ملفات تعريف الارتباط في الطلبات من نفس الموقع والتنقل في المستوى الأعلى."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "None" }), ": تُرسل ملفات تعريف الارتباط في جميع الطلبات عبر المواقع (يجب استخدامها مع صفة ", _jsx(_components.code, { children: "Secure" }), ")."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["عندما يتم تعيين ", _jsx(_components.code, { children: "SameSite" }), " إلى ", _jsx(_components.code, { children: "Strict" }), "، يمكن أن تمنع تمامًا المواقع الإلكترونية من إرسال ملفات تعريف الارتباط عبر طرف ثالث، مما يمنع بفعالية هجمات CSRF.\nإذا تم تعيين ", _jsx(_components.code, { children: "SameSite" }), " إلى ", _jsx(_components.code, { children: "Lax" }), "، فإنه يحمي العمليات الحساسة مع السماح ببعض حالات الاستخدام عبر المواقع الشائعة (مثل الدخول إلى موقع من روابط خارجية)."] }), "\n", _jsx(_components.p, { children: "مثال على التنفيذ:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "res.cookie('session_id', 'abc123', {\n httpOnly: true,\n secure: true,\n sameSite: 'strict'\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "استخدام-رؤوس-طلب-مخصصة", children: ["استخدام رؤوس طلب مخصصة", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#استخدام-رؤوس-طلب-مخصصة", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "بالنسبة لطلبات AJAX، يمكن إضافة رؤوس طلب مخصصة. نظرًا لقيود سياسة نفس الأصل، لا يمكن للمهاجمين تعيين رؤوس مخصصة في الطلبات عبر الأصول. يمكن للخادم التحقق من وجود هذا الرأس المخصص للتحقق من صحة الطلب." }), "\n", _jsx(_components.p, { children: "مثال على التنفيذ:" }), "\n", _jsx(_components.p, { children: "على الواجهة الأمامية:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "fetch('/api/data', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-Requested-With': 'XMLHttpRequest'\n },\n body: JSON.stringify(data)\n});\n" }) }), "\n", _jsx(_components.p, { children: "على الجانب الخادم:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "app.use((req, res, next) => {\n if (req.xhr || req.headers['x-requested-with'] === 'XMLHttpRequest') {\n // التعامل مع طلب AJAX\n } else {\n // التعامل مع طلب غير AJAX\n }\n next();\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "تحقق-مضاعف-لملف-تعريف-الارتباط", children: ["تحقق مضاعف لملف تعريف الارتباط", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#تحقق-مضاعف-لملف-تعريف-الارتباط", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "التحقق المضاعف لملف تعريف الارتباط هو تقنية فعالة للدفاع ضد CSRF. مبدأها الرئيسي هو أن يقوم الخادم بتوليد رمز عشوائي، ويقوم بتعيينه كملف تعريف ارتباط ويتضمنه في الصفحة (عادةً كحقل مخفي في النموذج). عندما يرسل المتصفح طلبًا، يتم تضمين ملف تعريف الارتباط تلقائيًا، بينما تقوم جافا سكريبت الخاصة بالصفحة بإرسال الرمز كمعامل طلب. يتحقق الخادم بعد ذلك مما إذا كان الرمز في ملف تعريف الارتباط يتطابق مع الرمز في المعاملات." }), "\n", _jsx(_components.p, { children: "على الرغم من أنه يمكن للمهاجمين تضمين ملف تعريف الارتباط الخاص بموقع الهدف في الطلبات عبر المواقع، إلا أنهم لا يمكنهم قراءة أو تعديل القيمة في ملف تعريف الارتباط، كما لا يمكنهم الوصول إلى أو تعديل قيمة الرمز في الصفحة. عن طريق طلب أن يتضمن الطلب رموزًا من ملف تعريف الارتباط والمعاملات، فإنه يضمن أن الطلب يأتي من مصدر لديه الإذن بقراءة ملف تعريف الارتباط، وبالتالي يدافع بفعالية ضد هجمات CSRF." }), "\n", _jsxs(_components.h3, { id: "استخدام-إعادة-المصادقة-للإجراءات-الحساسة", children: ["استخدام إعادة المصادقة للإجراءات الحساسة", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#استخدام-إعادة-المصادقة-للإجراءات-الحساسة", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "بالنسبة للإجراءات الحساسة بشكل خاص (مثل تغيير كلمات المرور أو إجراء تحويلات كبيرة)، يمكن مطالبة المستخدمين بإعادة المصادقة.\nيوفر هذا نقطة تفتيش أمنية إضافية للمستخدمين. حتى إذا نجح المستخدم في بدء هجوم CSRF، فلن يتمكن من اجتياز خطوة إعادة المصادقة." }), "\n", _jsx(_components.p, { children: "اقتراحات التنفيذ:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "قبل إجراء العمليات الحساسة، إعادة التوجيه إلى صفحة مصادقة منفصلة." }), "\n", _jsx(_components.li, { children: "في هذه الصفحة، مطالبة المستخدم بإدخال كلمة المرور أو معلومات التحقق من الهوية الأخرى." }), "\n", _jsx(_components.li, { children: "بعد اجتياز التحقق، يتم توليد رمز استخدام واحد ويستخدم في الإجراءات الحساسة اللاحقة." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "الخلاصة", children: ["الخلاصة", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#الخلاصة", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "من خلال هذا النقاش المتعمق، نأمل أن يكون لديك الآن فهم أكثر شمولاً لهجمات CSRF.\nلم نتعلم فقط كيف يعمل CSRF، بل استكشفنا أيضًا مجموعة متنوعة من التدابير الدفاعية الفعالة. كل هذه الطرق يمكن أن تعزز بشكل فعال أمان تطبيقات الويب." }), "\n", _jsx(_components.p, { children: "نأمل أن تساعدك هذه المعرفة في التعامل بشكل أفضل مع القضايا ذات الصلة بـ CSRF في تطويرك اليومي وبناء تطبيقات ويب أكثر أمانًا." }), "\n", _jsx(LogtoCloudButton, {})] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }