volksrat71/react2shellexploitvisualizedReact2Shell(CVE-2025-55182) RCE 취약점의 인터랙티브 시각화와 세 가지 대상(전문가, 실무자, 이해관계자)을 위한 나레이션 애니메이션. 오디오는 ElevenLabs + Whisper를 통해 동기화되었습니다.
React2Shell 취약점을 설명하는 대화형 교육 시각화 도구입니다. 이는 React Server Components에서 발생하는 CVSS 10.0의 심각한 원격 코드 실행 결함입니다.
5단계로 구성된 내레이션 기반의 안내서로, 다음을 설명합니다:
hasOwnProperty 검사각 단계는 다음 기능을 제공합니다:
이 시각화 도구는 완전히 반응형이며 모바일에 최적화된 경험을 제공합니다:
이 시각화 도구는 세 가지 청중 수준을 지원하며, 각각 맞춤형 내레이션을 제공합니다:
| 수준 | 청중 | 스타일 |
|---|---|---|
| 전문가 | 보안 엔지니어, 시니어 개발자 | 정확한 용어, 깊이 있는 메커니즘 |
| 실무자 | 개발자, IT 전문가 | 실용적인 예제를 포함한 개념 |
| 이해관계자 | 리더십, PM | 비즈니스 영향, 핵심 시사점 |
사용자는 비디오 컨트롤의 '대상 청중' 드롭다운을 통해 실시간으로 수준을 전환할 수 있습니다.
├── scripts/ # 내레이션 스크립트 (기준 데이터)
│ ├── expert/
│ │ ├── ssr-narration.txt
│ │ ├── rsc-narration.txt
│ │ ├── exploit-narration.txt
│ │ ├── fix-narration.txt
│ │ └── lessons-narration.txt
│ ├── practitioner/
│ │ └── ... (동일한 파일들)
│ └── stakeholder/
│ └── ... (동일한 파일들)
├── static/audio/ # 생성된 MP3 파일
│ ├── expert/
│ │ ├── ssr.mp3
│ │ ├── rsc.mp3
│ │ ├── exploit.mp3
│ │ ├── fix.mp3
│ │ └── lessons.mp3
│ ├── practitioner/
│ │ └── ... (동일한 파일들)
│ └── stakeholder/
│ └── ... (동일한 파일들)
├── src/lib/data/ # Whisper JSON 출력 (단어 타임스탬프)
│ ├── expert/
│ │ ├── ssr-whisper.json
│ │ └── ...
│ ├── practitioner/
│ │ └── ...
│ └── stakeholder/
│ └── ...
└── src/lib/utils/triggers/ # 수준별 애니메이션 트리거 구문
├── 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
교육 목적입니다. 보안 인식 제고를 위해 제작되었습니다.