لوحة المتصدرين

السلام عليكم، في تطبيقات React.js، موضوع الحماية دائمًا من الأمور الحساسة والمهمة، وفي الغالب يكون الأسلوب المستخدم كالتالي: بعد تسجيل الدخول أو إنشاء مستخدم جديد، نقوم بالحصول على Token ثم نخزنه في الذاكرة المحلية مثل localStorage أو cookies. لكن للأسف، هذه الطريقة ضعيفة من ناحية الحماية، لأنها معرضة لهجمات مثل XSS (Cross-Site Scripting). الطريقة الثانية هي حفظ بيانات المستخدم في الذاكرة المؤقتة (in-memory) داخل كائنات React، مما يوفر حماية أكبر لأن البيانات لا تُخزن في المتصفح بشكل دائم، ولكن المشكلة هنا أن هذه البيانات تُفقد بمجرد تحديث الصفحة أو إعادة تحميلها. الحل الوسط الذي وجدته هو التالي: في النظم الخلفية (Backend)، ننشئ Token محمي باستخدام httpOnly cookie، بحيث لا يمكن الوصول إليه من جافاسكريبت في المتصفح، مما يقلل خطر هجمات XSS. مثال على إنشاء Token وتخزينه كـ httpOnly cookie: const generateToken = (res, userId) => { const token = jwt.sign({ userId }, process.env.JWT_SECRET, { expiresIn: '30d', }); // تعيين الـ JWT كـ httpOnly cookie res.cookie('jwt', token, { httpOnly: true, secure: process.env.NODE_ENV !== 'development', // لتأمين الكوكيز في بيئة الإنتاج sameSite: 'strict', // لمنع هجمات CSRF maxAge: 30 * 24 * 60 * 60 * 1000, // مدة 30 يومًا }); return token; }; ثم ننشئ نقطة نهاية (endpoint) لاسترجاع بيانات المستخدم مع بعض المعلومات الضرورية، مثل: const getMe = asyncHandler(async (req, res) => { const user = await User.findById(req.user._id).select('-password'); // استرجاع التوكن من الكوكيز const token = req.cookies.jwt; res.json({ _id: user._id, name: user.name, email: user.email, isAdmin: user.isAdmin, token, // نُرسل التوكن أيضاً للواجهة الأمامية }); }); في الواجهة الأمامية، سأستخدم مكتبة tanstack query، التي توفر طريقة مرنة وفعالة للتعامل مع الـ API، مع دعم مدمج للـ caching. سأقوم بجلب بيانات المستخدم من نقطة النهاية getMe وأحتفظ بها في الذاكرة (in-memory) داخل React. بهذه الطريقة نحقق التوازن بين: حماية البيانات لأن التوكن مخزن كـ httpOnly cookie غير قابل للوصول من جافاسكريبت مباشرةً. سهولة الوصول المستمر للبيانات في الواجهة الأمامية بدون فقدانها عند تحديث الصفحة. يسعدني جداً سماع آرائكم وملاحظاتكم، فهذه الطريقة نابعة من فكرة محلية، وبالتالي فكل ملاحظة منكم قيمة وستفيدني كثيرًا في تحسين الأمان والأداء. شكرًا لكم!

اشتركت في كورس بايثون والذكاء الاصطناعي فهل عليها شهادة بعد الاتمام ولا ؟

وعليكم السلام ورحمة الله وبركاته، الفكرة التي طرحتها جيدة وتجمع بين الأمان وسهولة الاستخدام، لأن تخزين التوكن في httpOnly cookie يحميه من هجمات XSS، وفي نفس الوقت الاحتفاظ ببيانات المستخدم في الذاكرة باستخدام tanstack query يمنع فقدانها أثناء العمل. يمكن ايضاً التأكد من حماية الـ API من هجمات CSRF باستخدام إعدادات sameSite أو إضافة CSRF token. بالتوفيق