volksrat71/react2shellexploitvisualizedReact2Shell (CVE-2025-55182) RCE भेद्यता का इंटरैक्टिव विज़ुअलाइज़ेशन, तीन दर्शकों के लिए नैरेटेड एनिमेशन के साथ: विशेषज्ञ, अभ्यासकर्ता और हितधारक। ऑडियो ElevenLabs + Whisper के माध्यम से सिंक किया गया।
React2Shell भेद्यता को समझाने वाला एक इंटरैक्टिव शैक्षिक विज़ुअलाइज़ेशन - React सर्वर कंपोनेंट्स में एक गंभीर CVSS 10.0 रिमोट कोड निष्पादन दोष।
एक 5-चरणीय वर्णित वॉकथ्रू जो निम्नलिखित समझाता है:
hasOwnProperty जाँच जो हमले को रोकती हैप्रत्येक चरण में शामिल हैं:
यह विज़ुअलाइज़ेशन पूरी तरह से रिस्पॉन्सिव है और मोबाइल-अनुकूलित अनुभव प्रदान करता है:
यह विज़ुअलाइज़ेशन तीन श्रोता स्तरों का समर्थन करता है, प्रत्येक के लिए अनुकूलित वर्णन:
| स्तर | श्रोता | शैली |
|---|---|---|
| विशेषज्ञ | सुरक्षा इंजीनियर, वरिष्ठ डेवलपर | सटीक शब्दावली, गहन कार्यप्रणाली |
| प्रैक्टिशनर | डेवलपर, आईटी पेशेवर | व्यावहारिक उदाहरणों के साथ अवधारणाएँ |
| हितधारक | नेतृत्व, प्रोजेक्ट मैनेजर | व्यावसायिक प्रभाव, मुख्य निष्कर्ष |
उपयोगकर्ता वीडियो नियंत्रण में 'लक्षित श्रोता (Target Audience)' ड्रॉपडाउन के माध्यम से वास्तविक समय में स्तरों के बीच स्विच कर सकते हैं।
├── 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प्रत्येक स्क्रिप्ट में एनिमेशन सिंक के लिए नीचे ट्रिगर फ्रेज़ कमेंट शामिल हैं।
स्क्रिप्ट को 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) ऑडियो को एनिमेशन के साथ सिंक करता हैgetAnimationState() का उपयोग करके currentTime से दृश्य स्थिति प्राप्त करते हैंnpm run build
npm run preview
शैक्षिक उद्देश्यों के लिए। सुरक्षा जागरूकता के लिए निर्मित।