المصادقة الآمنة في JavaScript: كيف لا تحرق كلمات المرور

كلمة المرور "qwerty123" لم تعد صالحة: لماذا الأمان ليس مملاً

تخيل: لقد كتبت تطبيق ويب رائع. واجهة جميلة، كود تفاعلي، كل شيء يعمل بسرعة. تقوم بتشغيله، وتسجيل أول مستخدم - وبعد ساعة تتسرب قاعدة البيانات الخاصة بك إلى العلن. قصة مألوفة؟ لسوء الحظ، المصادقة الآمنة في JavaScript هي موضوع يؤجله العديد من المطورين إلى وقت لاحق. وهذا خطأ.

في هذه المقالة، سنشرح كيفية حماية تطبيقك من الهجمات الأكثر شيوعًا: اعتراض الرموز، XSS، CSRF، وتسرب كلمات المرور. لن نلقي محاضرات عن "يجب أن تفعل الأمور بشكل صحيح" - بل سنعرض كودًا يمكنك استخدامه الآن.

هل أنت مستعد؟ هيا بنا.

المصادقة في JavaScript: لماذا العميل هو ساحة المعركة

عندما نتحدث عن المصادقة في الويب، غالبًا ما نفكر في الباك إند: قواعد البيانات، الجلسات، التجزئة. لكن مصادقة JavaScript تبدأ من جانب العميل. وهنا تكمن الفخاخ.

كل ما يعمل في المتصفح يمكن قراءته أو تعديله أو سرقته. كود JavaScript الخاص بك هو كتاب مفتوح للمهاجم إذا وجد ثغرة. لذلك، القاعدة الأولى لـ المصادقة الآمنة: لا تثق أبدًا بالعميل. أبدًا.

التهديدات الرئيسية من جانب العميل

\n
• XSS (Cross-Site Scripting) - يقوم المهاجم بإدخال سكريبت يسرق الرموز من localStorage.
\n
• CSRF (Cross-Site Request Forgery) - المستخدم مصرح له، ويقوم موقع ضار بإرسال طلبات نيابة عنه.
\n
• Man-in-the-Middle - اعتراض حركة المرور إذا لم يتم استخدام HTTPS.
\n
• تسرب كلمات المرور - إرسال كلمة المرور بنص واضح أو تخزينها في الكود.
\n

يبدو مخيفًا؟ في الواقع، الحماية من هذا ليست صعبة. الشيء الرئيسي هو معرفة الأدوات التي يجب استخدامها.

JWT: مريح ولكن مع مفاجأة

JWT (JSON Web Token) هو معيار لإنشاء رموز الوصول. إنه خفيف، ولا يتطلب تخزينًا على الخادم، ومناسب تمامًا لتطبيقات SPA. لكن شعبيته تجعله هدفًا.

يقوم العديد من المطورين بتخزين JWT في localStorage. هذا خطأ. localStorage متاح من أي كود JavaScript على الصفحة. إذا كان لديك ثغرة XSS واحدة على الأقل - فقد تمت سرقة الرمز.

كيفية تخزين JWT بشكل صحيح

أفضل طريقة هي httpOnly cookie. الكوكيز مع العلم httpOnly غير متاحة لـ JavaScript. لن تسرقها XSS. لكن هناك فارق بسيط: يتم إرسال الكوكيز تلقائيًا مع كل طلب، مما يجعل التطبيق عرضة لـ CSRF. الحل هو استخدام SameSite و رموز CSRF.

إليك مثال على تعيين httpOnly cookie على الباك إند (Node.js مع Express):

// الخادم (Node.js / Express)\nres.cookie('token', jwtToken, {\n  httpOnly: true,       // غير متاح لـ JavaScript\n  secure: true,         // فقط عبر HTTPS\n  sameSite: 'strict',   // حماية من CSRF\n  maxAge: 3600000       // ساعة واحدة\n});

على العميل، تقوم ببساطة بإرسال الطلبات - سيتم إرفاق الكوكيز تلقائيًا:

// العميل (JavaScript)\nfetch('/api/profile', {\n  method: 'GET',\n  credentials: 'include' // إلزامي!\n})\n.then(res => res.json())\n.then(data => console.log(data));

لاحظ: credentials: 'include' - بدون هذا، لن يتم إرسال الكوكيز إلى origin آخر.

تجزئة كلمات المرور: bcrypt لمساعدتك

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

bcrypt هو خوارزمية تجزئة مصممة خصيصًا لتكون بطيئة. لأن تجزئة كلمة المرور للمستخدم تستغرق أجزاء من الثانية، بينما يستغرق تخمينها سنوات. في JavaScript (Node.js) استخدم المكتبة b