React-Website – CVE-2025-55182

README: Angreifbares Next.js-Projekt (React RSC Landingpage)

Dieses Repository enthält ein Beispiel einer mehrseitigen Corporate-Landingpage mit Next.js 15.0.0 + React 19.0.0. Die Seite simuliert eine Struktur ähnlich wie t1.ru: Startseite, Produkte, Fallstudien, Medien, Über uns, Kontakt. Wir verwenden React Server Components (RSC), Tailwind CSS, Framer Motion für Animationen, lucide-react für Symbole, shadcn/ui für Badges und Prisma mit SQLite für die Datenbank (das Kontaktformular speichert Nachrichten).

Das Projekt wurde absichtlich anfällig gemacht, um PT-2025-48817 zu demonstrieren – eine JSON-Injection über das Kontaktformular, die aufgrund unsicherer Deserialisierung in react-server-dom-webpack zu RCE/SSRF führen kann.

Voraussetzungen

• Node.js 20.x oder höher (wegen Prisma). Wenn Sie eine alte Version haben, aktualisieren Sie (siehe unten).
• npm (nicht yarn, Projekt ist auf npm).

Installation

1. Klonen Sie das Repository:

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

2. Installieren Sie die Abhängigkeiten:

   npm install
   

   Bei Versionsproblemen (z. B. Build-Fehler) versuchen Sie:

   npm install --legacy-peer-deps
   

   Oder aktualisieren Sie Node.js:

   • Auf 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  # sollte v20.x.x sein
     

   • Dann bereinigen Sie und installieren Sie neu:

     rm -rf node_modules package-lock.json
     npm install
     

3. Initialisieren Sie Prisma (falls erneut erforderlich):

   npx prisma init
   npx prisma migrate dev --name init
   

   In .env sollte stehen: DATABASE_URL="file:./prisma/dev.db".

Starten

• Entwicklungsmodus:

  npm run dev
  

  Öffnen Sie http://localhost:3000.

• Build und Produktion:

  npm run build
  npm run start
  

• Datenbank anzeigen:

  npx prisma studio
  

Projektstruktur

• app/: Hauptordner.
  • components/: Gemeinsame Komponenten (Header.tsx, Footer.tsx, ProductCard.tsx, NewsItem.tsx).
  • products/: Produktlisten-Seite + dynamische Seiten per Slug ([slug]/page.tsx).
  • cases/, media/, about/, contacts/: Einzelne Seiten.
  • layout.tsx: Gemeinsames Layout mit Header/Footer.
  • page.tsx: Startseite.
  • globals.css: Stile.
• public/: Bilder (logo.png, images/cases/rimi.jpg usw.). Fügen Sie eigene hinzu oder verwenden Sie placeholder.svg.
• prisma/: Datenbankschema (schema.prisma, dev.db).
• actions.ts: Server Actions, einschließlich der anfälligen saveMessage für das Kontaktformular.

• Animationen: Framer Motion bei Fallstudien (fade-in, scale, 3D-hover). Fügen Sie 'use client' hinzu, wo nötig.
• Kontaktformular: In contacts/page.tsx. Verwendet eine Server Action (saveMessage) mit Validierung und Ladezustand. Speichert in SQLite.
• Komponenten:
  • ProductCard: Mit Bild, Tags (Badge), Preis, Status, Funktionen, Verläufen und Hover.
  • NewsItem: Einfache Nachrichtenkarte.
• Sicherheitslücke: In actions.ts – wir parsen die Nachricht als JSON ohne Prüfung. Wenn Sie einen konstruierten Payload wie { "type": "system", "payload": { "action": "ls" } } senden, führt exec den Befehl aus. Dies simuliert einen Deserialisierungsangriff auf RSC.