React Site - CVE-2025-55182

README: 취약한 Next.js 프로젝트 (React RSC 랜딩 페이지)

이 저장소는 Next.js 15.0.0 + React 19.0.0으로 구축된 다중 페이지 기업 랜딩 페이지의 예시입니다. 사이트는 t1.ru와 유사한 구조(홈, 제품, 사례, 미디어, 회사 소개, 연락처)를 모방합니다. React Server Components(RSC), Tailwind CSS, 애니메이션용 Framer Motion, 아이콘용 lucide-react, 배지용 shadcn/ui, 데이터베이스용 Prisma 및 SQLite(연락처 양식이 메시지를 저장)를 사용합니다.

이 프로젝트는 PT-2025-48817 데모를 위해 의도적으로 취약하게 만들어졌습니다. 연락처 양식을 통한 JSON 인젝션으로, react-server-dom-webpack의 안전하지 않은 역직렬화로 인해 RCE/SSRF로 이어질 수 있습니다.

요구 사항

• Node.js 20.x 이상 (Prisma 때문). 이전 버전이면 업데이트하세요(아래 참조).
• npm (yarn 아님, npm 기반 프로젝트).

설치

1. 저장소를 클론합니다:

   git clone <url-репы>
   cd <директория>
   

2. 종속성을 설치합니다:

   npm install
   

   버전 문제(예: 빌드 오류)가 있으면 다음을 시도하세요:

   npm install --legacy-peer-deps
   

   또는 Node.js를 업데이트하세요:

   • Debian/Ubuntu에서:

     sudo apt remove --purge nodejs npm -y
     curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
     sudo apt update
     sudo apt install -y nodejs
     node -v  # должно быть v20.x.x
     

   • 그런 다음 정리하고 재설치:

     rm -rf node_modules package-lock.json
     npm install
     

3. Prisma 초기화 (필요시 다시):

   npx prisma init
   npx prisma migrate dev --name init
   

   .env 파일에 다음이 있어야 합니다: DATABASE_URL="file:./prisma/dev.db".

실행

• 개발 모드:

  npm run dev
  

  http://localhost:3000을 엽니다.

• 빌드 및 프로덕션:

  npm run build
  npm run start
  

• 데이터베이스 보기:

  npx prisma studio
  

프로젝트 구조

• app/: 메인 폴더.
  • components/: 공통 컴포넌트 (Header.tsx, Footer.tsx, ProductCard.tsx, NewsItem.tsx).
  • products/: 제품 목록 페이지 + slug별 동적 페이지 ([slug]/page.tsx).
  • cases/, media/, about/, contacts/: 개별 페이지.
  • layout.tsx: Header/Footer가 포함된 공통 레이아웃.
  • page.tsx: 메인 페이지.
  • globals.css: 스타일.
• public/: 이미지 (logo.png, images/cases/rimi.jpg 등). 자신의 이미지를 추가하거나 placeholder.svg를 사용하세요.
• prisma/: 데이터베이스 스키마 (schema.prisma, dev.db).
• actions.ts: 연락처 양식의 취약한 saveMessage를 포함한 Server Actions.

• 애니메이션: 케이스에 Framer Motion 적용 (fade-in, scale, 3D-hover). 필요한 곳에 'use client'를 추가하세요.
• 연락처 양식: contacts/page.tsx에 있음. 유효성 검사 및 로딩 상태가 있는 Server Action(saveMessage) 사용. SQLite에 저장.
• 컴포넌트:
  • ProductCard: 이미지, 배지, 가격, 상태, 기능, 그라데이션, 호버 효과 포함.
  • NewsItem: 간단한 뉴스 카드.
• 취약점: actions.ts에서 확인 없이 메시지를 JSON으로 파싱함. 만약 { "type": "system", "payload": { "action": "ls" } }와 같은 조작된 페이로드를 보내면 exec가 명령을 실행합니다. 이는 RSC의 역직렬화 공격 시뮬레이션입니다.