volksrat71/react2shellexploitvisualizedتصوّر تفاعلي لثغرة RCE في React2Shell (CVE-2025-55182) مع رسوم متحركة بتعليق صوتي لثلاث فئات: الخبير، والممارس، وصاحب المصلحة. الصوت متزامن عبر ElevenLabs + Whisper.
تصور تعليمي تفاعلي يشرح ثغرة React2Shell - وهي ثغرة حرجة بتقييم CVSS 10.0 تسمح بتنفيذ التعليمات البرمجية عن بُعد في مكونات خادم React (React Server Components).
جولة مشروحة صوتيًا من 5 خطوات تشرح:
hasOwnProperty المكون من سطر واحد والذي يمنع الهجومتتميز كل خطوة بما يلي:
التصور متجاوب بالكامل مع تجربة محسّنة للجوال:
يدعم التصور ثلاثة مستويات للجمهور، ولكل منها سرد مخصص:
| المستوى | الجمهور | الأسلوب |
|---|---|---|
| خبير | مهندسو الأمن، مطورون كبار | مصطلحات دقيقة، آليات معمقة |
| ممارس | المطورون، محترفو تقنية المعلومات | مفاهيم مع أمثلة عملية |
| أصحاب المصلحة | القيادة، مدراء المنتجات | الأثر التجاري، خلاصات رئيسية |
يمكن للمستخدمين التبديل بين المستويات في الوقت الفعلي عبر القائمة المنسدلة "الجمهور المستهدف" في عناصر تحكم الفيديو.
├── scripts/ # Narration scripts (source of truth)
│ ├── expert/
│ │ ├── ssr-narration.txt
│ │ ├── rsc-narration.txt
│ │ ├── exploit-narration.txt
│ │ ├── fix-narration.txt
│ │ └── lessons-narration.txt
│ ├── practitioner/
│ │ └── ... (same files)
│ ├── stakeholder/
│ │ └── ... (same files)
│ └── transcribe.py # Whisper transcription script
├── static/audio/ # Generated MP3 files
│ ├── expert/
│ │ ├── ssr.mp3
│ │ ├── rsc.mp3
│ │ ├── exploit.mp3
│ │ ├── fix.mp3
│ │ └── lessons.mp3
│ ├── practitioner/
│ │ └── ... (same files)
│ └── stakeholder/
│ └── ... (same files)
├── src/lib/data/ # Whisper JSON output (word timestamps)
│ ├── expert/
│ │ ├── ssr-whisper.json
│ │ └── ...
│ ├── practitioner/
│ │ └── ...
│ └── stakeholder/
│ └── ...
└── src/lib/utils/triggers/ # Animation trigger phrases per level
├── expert/
├── practitioner/
└── stakeholder/
npm install
npm run dev
النصوص موجودة في scripts/{level}/:
ssr-narration.txtrsc-narration.txtexploit-narration.txtfix-narration.txtlessons-narration.txtيتضمن كل نص تعليقات عبارات التشغيل (trigger phrases) في الأسفل لمزامنة الرسوم المتحركة.
ارفع النص إلى ElevenLabs وقم بتنزيل ملف MP3.
ضع ملف MP3 في static/audio/{level}/ مع اسم الخطوة (مثل: static/audio/expert/ssr.mp3).
ملف واحد:
python scripts/transcribe.py ssr expert
python scripts/transcribe.py rsc practitioner
الوضع الدفعي (جميع الملفات لمستوى واحد):
python scripts/transcribe.py --batch expert
python scripts/transcribe.py --batch practitioner
python scripts/transcribe.py --batch stakeholder
python scripts/transcribe.py --batch all # All 15 files
الخيارات:
--model small - استخدام نموذج Whisper أكبر للحصول على دقة أفضل--dry-run - معاينة ما سيتم نسخه دون تنفيذيُخرج السكربت ملفات JSON إلى src/lib/data/{level}/ مع طوابع زمنية على مستوى الكلمات.
إذا تغيرت صياغة السرد بشكل كبير، قم بتحديث عبارات التشغيل في src/lib/utils/triggers/{level}/ لتتوافق مع النص الجديد.
src/lib/utils/triggers/) يجد العبارات الأساسية لكل مستوىsrc/lib/stores/timeline.svelte.ts) تزامن الصوت مع الرسوم المتحركةcurrentTime باستخدام getAnimationState()npm run build
npm run preview
لأغراض تعليمية. أُنشئ لغرض التوعية الأمنية.