لعبة جوجل لتعليم XSS: تدريب أمن الويب العملي!

موقع جوجل للتدريب على ثغرات XSS - إيه هو وليه مهم؟ ​

جوجل عملت لعبة/منصة تعليمية اسمها XSS Game علشان تساعد المطوّرين والباحثين إنهم يتعلّموا يكتشفوا ثغرات XSS بطريقة آمنة ومُنظّمة. المنصة عبارة عن مستويات (levels)، كل مستوى بيعلّم نوع أو تقنية مختلفة مرتبطة بـ XSS، من الأساسيات لحد حالات متقدمة. الفكرة إنك تتدرّب على أمثلة محصورة ومسموح بيها بدل ما تجرب على مواقع حقيقية - وده مهم جدًا أخلاقيًا وقانونيًا.

ليه تستخدم المنصة دي؟ فوائدها العملية ​

• تدريب عملي ومرح بدل الشرح النظري.
• تتدرّب على سيناريوهات حقيقية مُبسّطة من غير مخاطرة.
• لو اكتشفت ثغرة في منتجات جوجل الحقيقية ممكن تدخل ضمن برامج المكافآت (bug bounty) - جوجل سبق وأعلنت مبالغ جائزة على بعض التقارير.
• مناسبة لطلبة الأمن، مطوّري الويب، والمدرّبين اللي عايزين ينبّهو طلابهم لممارسات الوقاية.

ازاي تبدأ وتلعب بذكاء (وبأمان)؟ ​

1. افتح الموقع الرسمي للتدريب (ابحث عن "XSS Game" أو استخدم الرابط الرسمي من جوجل).
2. ابدأ بالمستوى الأول واقرأ وصف التحدّي كويس - كل مستوى بيقول لك إيه المطلوب.
3. استخدم المتصفح (Console, Inspector) للتعلّم ولا تستخدم أدوات أو طرق على مواقع مش مملوكة لك.
4. لما تفهم كل مستوى، راجع سبب نجاح الـpayload وازاي ممكن تمنع النوع ده من XSS في برمجتك.

نصايح تعليميّة علشان تستفيد أكتر من اللعبة ​

• اقرأ مصادر عن أنواع XSS (Stored, Reflected, DOM) قبل اللعب.
• سجّل ملاحظات: أي نقطة بتخلي مدخل يتحوّل لكود؟ إزاي تمّت المعالجة؟
• جرّب كتابة حل برمجي لإصلاح الثغرة بدل بس اكتشافها - دايمًا الهدف تعلّم الوقاية.
• استخدم أدوات تحليل آمنة (مثل OWASP ZAP أو Burp Suite Community) لو كنت بتدرّب في بيئة محلية.

أمثلة كودية دفاعية تدرّب عليها بعد كل مستوى ​

مثال: ترميز مخرجات HTML في PHP (Output Encoding)​

<?php
// قيمة جايه من الداتابيز أو مدخلات اليوزر
$comment = $row['comment'];
// عرض آمن: مانع تنفيذ HTML/JS
echo htmlspecialchars($comment, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
?>

الشرح: htmlspecialchars بتحول الأحرف الخاصة (<, >, ", ') لصيغ آمنة فتمنع تنفيذ سكريبتات محقونة.

مثال: تنظيف HTML آمن على جهة العميل باستخدام DOMPurify​

<script src="https://unpkg.com/dompurify@latest/dist/purify.min.js"></script>
<script>
  const dirty = '<img src=x onerror=alert(1)> <b>نص آمن</b>';
  const clean = DOMPurify.sanitize(dirty);
  document.getElementById('content').innerHTML = clean;
</script>

الشرح: لو فعلاً محتاج تسمح ببعض الـHTML من المستخدم (مثل محرّرات WYSIWYG)، استخدم مكتبة مُعتمدة زي DOMPurify بدل محاولة كتابة فلترة بنفسك.

مثال: تفضيل innerText بدل innerHTML عند عرض نصوص​

// آمن:
someElement.innerText = userInput;
// غير آمن:
someElement.innerHTML = userInput;

لو النص بس للعرض، innerText بتمنع تفسير أي HTML داخله.

إزاي تدّرس المنصة في كورس أمني أو درس عملي؟ ​

• قسّم الطلبة لمجموعات صغيرة وادي كل مجموعة مستوى مختلف عشان يبحثوا سبب نجاح الـXSS.
• اطلب منهم كتابة تقرير صغير يشرح: فين نقطة الضعف؟ إزاي تمنعها؟ وفر مثال كود للإصلاح.
• انهي الدرس بمراجعة مفاهيم: Output Encoding، CSP، HttpOnly للكوكيز، وValidation بالـserver.

أخلاقيات العمل ومسار التبليغ (Responsible Disclosure) ​

لو أثناء التدريب أو البحث لقيت ثغرة حقيقية في منتج تابع لشركة - اتبع سياسة التبليغ المسؤلة (Responsible Disclosure) للشركة. جوجل وغيرها عندهم برامج مكافآت وتحكّم واضح للتبليغ والاختبارات الآمنة - اتبع التعليمات، وما تعملش نشر عام قبل التنسيق معهم.

موارد مفيدة للمتابعة بعد اللعب ​

• اقرأ مستندات OWASP عن XSS.
• جرّب أدوات تحليل آمن في بيئة محلية.
• تابع دروس عن Content Security Policy وطرق تهيئة الكوكيز (HttpOnly, Secure, SameSite).
  (روابط وأدوات تقدر تضيفها على صفحة الموارد في موقعك التعليمي.)

الخلاصة - العب واتعلّم بحرص ​

منصة جوجل لـ XSS Game مكان ممتاز تتعلّم منه النظريات وتطبّقها عمليًا من غير مخاطرة. استخدمها لتقوية فهمك، جرّب تصحيح الكود بعد اكتشاف الثغرة، وخلّي هدفك دايمًا هو الحماية والتوعية لا الاستغلال.

 

هيا نتقدم مع بعض مستويات اللعبة
وانا أعتقد ان أول مستوى من اللعبة يتحل بهذا الكود فقط

<script>alert('xss')</script>

 

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