React Site - CVE-2025-55182

README: Proyecto Next.js vulnerable (landing React RSC)

Este repositorio contiene un ejemplo de un landing corporativo multi-página en Next.js 15.0.0 + React 19.0.0. El sitio simula una estructura como t1.ru: inicio, productos, casos, medios, sobre la empresa, contacto. Usamos React Server Components (RSC), Tailwind CSS, Framer Motion para animaciones, lucide-react para iconos, shadcn/ui para badges y Prisma con SQLite para la base de datos (el formulario de contacto guarda mensajes).

El proyecto está hecho intencionalmente vulnerable para demostrar PT-2025-48817 — inyección JSON a través del formulario de contacto, que puede llevar a RCE/SSRF debido a una deserialización insegura en react-server-dom-webpack.

Requisitos

• Node.js 20.x o superior (por Prisma). Si tienes una versión antigua, actualiza (ver más abajo).
• npm (no yarn, el proyecto usa npm).

Instalación

1. Clona el repo:

   git clone <url-del-repo>
   cd <directorio>
   

2. Instala las dependencias:

   npm install
   

   Si hay problemas con versiones (por ejemplo, errores de compilación), intenta:

   npm install --legacy-peer-deps
   

   O actualiza Node.js:

   • En 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  # debe ser v20.x.x
     

   • Luego limpia y reinstala:

     rm -rf node_modules package-lock.json
     npm install
     

3. Inicializa Prisma (si es necesario reiniciar):

   npx prisma init
   npx prisma migrate dev --name init
   

   En .env debe estar: DATABASE_URL="file:./prisma/dev.db".

Inicio

• Modo desarrollo:

  npm run dev
  

  Abre http://localhost:3000.

• Compilación y producción:

  npm run build
  npm run start
  

• Ver la BD:

  npx prisma studio
  

Estructura del proyecto

• app/: Carpeta principal.
  • components/: Componentes comunes (Header.tsx, Footer.tsx, ProductCard.tsx, NewsItem.tsx).
  • products/: Página de lista de productos + páginas dinámicas por slug ([slug]/page.tsx).
  • cases/, media/, about/, contacts/: Páginas individuales.
  • layout.tsx: Layout común con Header/Footer.
  • page.tsx: Página de inicio.
  • globals.css: Estilos.
• public/: Imágenes (logo.png, images/cases/rimi.jpg, etc.). Añade las tuyas o usa placeholder.svg.
• prisma/: Esquema de BD (schema.prisma, dev.db).
• actions.ts: Server Actions, incluyendo el vulnerable saveMessage para el formulario de contacto.

• Animaciones: Framer Motion en casos (fade-in, scale, 3D-hover). Añade 'use client' donde sea necesario.
• Formulario de contacto: En contacts/page.tsx. Usa Server Action (saveMessage) con validación y estado de carga. Guarda en SQLite.
• Componentes:
  • ProductCard: Con imagen, etiquetas (Badge), precio, estado, características, gradientes y hover.
  • NewsItem: Tarjeta de noticia simple.
• Vulnerabilidad: En actions.ts — parseamos el mensaje como JSON sin comprobaciones. Si envías un payload manipulado como { "type": "system", "payload": { "action": "ls" } }, entonces exec ejecutará el comando. Es una simulación de ataque de deserialización para RSC.