React2Shell (CVE-2025-55182) विज़ुअलाइज़ेशन

React2Shell भेद्यता को समझाने वाला एक इंटरैक्टिव शैक्षिक विज़ुअलाइज़ेशन - React सर्वर कंपोनेंट्स में एक गंभीर CVSS 10.0 रिमोट कोड निष्पादन दोष।

यह क्या है

एक 5-चरणीय वर्णित वॉकथ्रू जो निम्नलिखित समझाता है:

1. पारंपरिक SSR - सर्वर-साइड रेंडरिंग कैसे काम करती है और "JSON बाधा" समस्या
2. RSC स्ट्रीमिंग - React सर्वर कंपोनेंट्स स्ट्रीमिंग के माध्यम से इसे कैसे हल करते हैं
3. एक्सप्लॉइट - प्रोटोटाइप प्रदूषण + गैजेट चेन RCE को कैसे सक्षम बनाती हैं
4. फिक्स - एक-पंक्ति hasOwnProperty जाँच जो हमले को रोकती है
5. मुख्य निष्कर्ष - सुरक्षित आर्किटेक्चर के लिए सीखे गए सबक

प्रत्येक चरण में शामिल हैं:

• शब्द-दर-शब्द कैप्शन के साथ तुल्यकालित ऑडियो वर्णन
• वर्णन के समय के अनुसार कीफ्रेम-आधारित एनिमेशन
• वीडियो प्लेयर नियंत्रण (प्ले/पॉज़, सीक, स्पीड, कैप्शन)
• मुख्य अवधारणाओं का दृश्य हाइलाइटिंग

मोबाइल सपोर्ट

यह विज़ुअलाइज़ेशन पूरी तरह से रिस्पॉन्सिव है और मोबाइल-अनुकूलित अनुभव प्रदान करता है:

• ऑटो-स्क्रॉलिंग: मोबाइल व्यूपोर्ट (≤1000px) पर, पेज एनिमेशन का अनुसरण करने के लिए स्वचालित रूप से स्क्रॉल करता है। स्क्रॉल लक्ष्य Whisper टाइमस्टैम्प डेटा द्वारा संचालित होते हैं, जिससे वर्णन आगे बढ़ने पर फोकल पॉइंट (ब्राउज़र → नेटवर्क → सर्वर → स्पष्टीकरण) दृश्य में बना रहता है।
• स्टिकी वीडियो नियंत्रण: प्ले/पॉज़ और टाइमलाइन नियंत्रण स्क्रॉल करते समय आसान पहुँच के लिए नीचे स्थिर रहते हैं।
• मोबाइल कैप्शन: मोबाइल पर वीडियो नियंत्रण क्षेत्र में शब्द-दर-शब्द कैप्शन दिखाई देते हैं।
• रिस्पॉन्सिव लेआउट: ग्रिड वर्टिकल रूप से स्टैक होते हैं, फ़ॉन्ट आकार उचित रूप से स्केल होते हैं, और टच-फ्रेंडली नियंत्रण।

बहु-श्रोता सपोर्ट

यह विज़ुअलाइज़ेशन तीन श्रोता स्तरों का समर्थन करता है, प्रत्येक के लिए अनुकूलित वर्णन:

उपयोगकर्ता वीडियो नियंत्रण में 'लक्षित श्रोता (Target Audience)' ड्रॉपडाउन के माध्यम से वास्तविक समय में स्तरों के बीच स्विच कर सकते हैं।

तकनीकी स्टैक

• SvelteKit — Svelte 5 रन्स के साथ
• ElevenLabs — AI आवाज़ जनरेशन के लिए
• OpenAI Whisper — ऑडियो ट्रांसक्रिप्शन और टाइमस्टैम्प निष्कर्षण के लिए
• TypeScript — पूरी परियोजना में

परियोजना संरचना

├── 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

आवाज़ / वर्णन बदलना

1. स्क्रिप्ट संपादित करें

स्क्रिप्ट्स scripts/{level}/ में हैं:

• ssr-narration.txt
• rsc-narration.txt
• exploit-narration.txt
• fix-narration.txt
• lessons-narration.txt

प्रत्येक स्क्रिप्ट में एनिमेशन सिंक के लिए नीचे ट्रिगर फ्रेज़ कमेंट शामिल हैं।

2. ElevenLabs से ऑडियो जनरेट करें

स्क्रिप्ट को ElevenLabs पर अपलोड करें और MP3 डाउनलोड करें।

3. ऑडियो फ़ाइल रखें

MP3 को चरण नाम के साथ static/audio/{level}/ में डालें (उदा., static/audio/expert/ssr.mp3)।

4. Whisper से ट्रांसक्राइब करें

एकल फ़ाइल:

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}/ में आउटपुट करती है।

5. ट्रिगर फ्रेज़ अपडेट करें (यदि आवश्यक हो)

यदि वर्णन का शब्दांकन महत्वपूर्ण रूप से बदल गया है, तो नई स्क्रिप्ट से मेल खाने के लिए src/lib/utils/triggers/{level}/ में ट्रिगर फ्रेज़ अपडेट करें।

एनिमेशन सिस्टम कैसे काम करता है

1. Whisper JSON प्रत्येक श्रोता स्तर के लिए शब्द-स्तरीय टाइमस्टैम्प रखता है
2. ट्रिगर निष्कर्षण (src/lib/utils/triggers/) प्रति स्तर मुख्य फ्रेज़ ढूँढता है
3. कीफ्रेम टाइमस्टैम्प को एनिमेशन अवस्थाओं से मैप करते हैं
4. टाइमलाइन नियंत्रक (src/lib/stores/timeline.svelte.ts) ऑडियो को एनिमेशन के साथ सिंक करता है
5. कंपोनेंट्स getAnimationState() का उपयोग करके currentTime से दृश्य स्थिति प्राप्त करते हैं
6. लेज़ी लोडिंग whisper डेटा को आवश्यकता पर लाता है और उसे कैश करता है

प्रोडक्शन के लिए बिल्ड करना

npm run build
npm run preview

संसाधन

• react2shell.com - मूल खुलासा
• Wiz Deep Dive
• Datadog Security Labs

लाइसेंस

शैक्षिक उद्देश्यों के लिए। सुरक्षा जागरूकता के लिए निर्मित।