React2Shell Detector

웹 애플리케이션에서 React2Shell 취약점(CVE-2025-55182 및 CVE-2025-66478)을 탐지하기 위한 Chrome 확장 프로그램입니다.

개요

React2Shell Detector는 보안 연구자와 웹 개발자가 웹 애플리케이션에서 잠재적인 React2Shell 취약점을 식별할 수 있도록 도와주는 브라우저 확장 프로그램입니다. 이 확장 프로그램은 안전한 탐지 페이로드를 대상 URL로 전송하고 응답을 분석하여 애플리케이션이 취약한지 여부를 판단합니다.

이 프로젝트는 Assetnote의 react2shell-scanner Python 스크립트에서 영감을 받아 브라우저 기반 스캐닝을 더 쉽게 하기 위해 Chrome 확장 프로그램으로 재구현한 것입니다.

기능

원클릭 스캔: 한 번의 클릭으로 현재 탭 또는 모든 URL을 스캔합니다.
안전한 탐지: 비파괴적 페이로드를 사용하여 취약점을 탐지합니다.
상세 결과: HTTP 헤더, 응답 본문 및 요청 세부 정보를 확인합니다.
다크 모드: 편안한 보기를 위한 내장 테마 전환 기능
현대적인 UI: React 및 Tailwind CSS로 구축된 깔끔하고 반응형 인터페이스
개인정보 보호 중심: 모든 스캔은 로컬에서 수행되며 외부 서버로 데이터가 전송되지 않습니다.

스크린샷

설치

옵션 1: Chrome 웹 스토어에서 설치 (출시 예정)

이 확장 프로그램은 곧 Chrome 웹 스토어에서 제공될 예정입니다.

옵션 2: 소스 코드로 설치 (개발자 모드)

사전 요구사항

Node.js (v20 이상)
pnpm (v10.19.0 이상)
Google Chrome 브라우저

빌드 단계

저장소 복제

git clone https://github.com/xiaopeng-ye/react2shell-detector.git
cd react2shell-detector

의존성 설치
```
pnpm install
```
확장 프로그램 빌드

개발용 (핫 리로드 포함):
```
pnpm dev
```
배포용:
```
pnpm build
```
Chrome에 확장 프로그램 로드
1. Chrome을 열고 chrome://extensions/로 이동합니다.
2. 개발자 모드를 활성화합니다 (오른쪽 상단의 토글).
3. 압축 해제된 확장 프로그램 로드를 클릭합니다.
4. 빌드 디렉토리를 선택합니다:
  - 개발 빌드: build/chrome-mv3-dev
  - 배포 빌드: build/chrome-mv3-prod
5. 이제 React2Shell Detector 확장 프로그램이 확장 프로그램 목록에 나타납니다.
핀 고정 (선택 사항)
- Chrome 도구 모음에서 퍼즐 아이콘을 클릭합니다.
- "React2Shell Detector"를 찾아 핀 아이콘을 클릭합니다.
- 확장 프로그램 아이콘이 도구 모음에 나타납니다.

사용 방법

확장 프로그램 열기
- Chrome 도구 모음에서 React2Shell Detector 아이콘을 클릭합니다.
- 또는 키보드 단축키를 사용합니다 (설정된 경우).
URL 스캔
- 현재 탭의 URL이 자동으로 로드됩니다.
- URL을 편집하거나 다른 URL을 입력할 수 있습니다.
- 스캔 버튼을 클릭합니다.
결과 검토
- 취약함: 애플리케이션이 React2Shell 공격에 취약할 수 있습니다.
- 안전함: 취약점이 감지되지 않았습니다.
- 오류: 스캔 중 오류가 발생했습니다 (네트워크 문제, 시간 초과 등).
세부 정보 확인
- 요청 또는 응답 탭을 클릭하여 자세한 정보를 확인합니다.
- HTTP 헤더, 상태 코드 및 응답 본문을 검토합니다.

기술 스택

프레임워크: Plasmo - 최신 브라우저 확장 프레임워크
UI: React 18 + TypeScript
스타일링: Tailwind CSS 4
컴포넌트: Radix UI 프리미티브
아이콘: Lucide React
테마: next-themes (다크 모드 지원)

개발

프로젝트 구조

react2shell-detector/
├── components/         # React 컴포넌트
│   ├── ui/            # 재사용 가능한 UI 컴포넌트
│   ├── ScanForm.tsx   # URL 입력 및 스캔 버튼
│   ├── ScanResult.tsx # 결과 표시
│   └── ...
├── lib/               # 핵심 로직
│   ├── detector.ts    # 취약점 탐지 로직
│   ├── payload.ts     # 페이로드 생성
│   ├── types.ts       # TypeScript 타입 정의
│   └── utils.ts       # 헬퍼 함수
├── styles/            # 전역 스타일
├── popup.tsx          # 확장 프로그램 팝업 진입점
├── background.ts      # 백그라운드 서비스 워커
└── package.json       # 프로젝트 설정

사용 가능한 명령어

# 핫 리로드가 포함된 개발 모드
pnpm dev

# 배포 빌드
pnpm build

# 배포용 패키징
pnpm package

# 코드 포맷팅
pnpm prettier --write .

코드 스타일

이 프로젝트는 다음 규칙과 함께 Prettier를 사용합니다:

세미콜론 없음
쌍따옴표
2칸 들여쓰기
정렬된 import (Node.js → 서드파티 → Plasmo → 로컬 → 상대)

커밋 전에 항상 코드를 포맷팅하세요:

pnpm prettier --write .

보안 및 윤리

중요: 이 도구는 다음 용도로 설계되었습니다:

보안 연구 및 승인된 침투 테스트
적절한 권한이 있는 취약점 평가
교육 목적
방어적 보안 조치

다음 용도로는 사용할 수 없습니다:

소유하거나 테스트 권한이 없는 시스템에 대한 승인되지 않은 테스트 또는 스캔
악의적인 활동 또는 악용
모든 불법 활동

웹 애플리케이션을 스캔하기 전에 항상 적절한 승인을 받으세요.

기여

기여는 언제나 환영합니다! 자유롭게 Pull Request를 제출해 주세요.

저장소를 포크합니다.
기능 브랜치를 만듭니다 (git checkout -b feature/amazing-feature).
변경 사항을 커밋합니다 (git commit -m 'Add some amazing feature').
브랜치에 푸시합니다 (git push origin feature/amazing-feature).
Pull Request를 엽니다.

참고 자료

React2Shell Scanner - Assetnote의 원본 Python 스크립트 (이 프로젝트는 그들의 작업을 기반으로 함)
CVE-2025-55182
CVE-2025-66478

감사의 말

이 프로젝트는 Assetnote의 훌륭한 연구와 작업을 기반으로 구축되었습니다. 핵심 탐지 로직은 그들의 react2shell-scanner Python 스크립트에서 적용되었습니다.

라이선스

이 프로젝트는 MIT 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.

면책 조항

이 도구는 교육 및 승인된 보안 테스트 목적으로만 제공됩니다. 작성자와 기여자는 이 도구의 오용이나 손해에 대해 책임을 지지 않습니다. 웹 애플리케이션을 스캔하기 전에 항상 적절한 권한이 있는지 확인하세요.

지원

문제가 발생하거나 질문이 있는 경우:

이슈를 열어주세요.

react2shell-detector

인기