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 शामिल है।

• एनिमेशन: केसों पर Framer Motion (fade-in, scale, 3D-hover)। जहाँ आवश्यक हो 'use client' जोड़ें।
• संपर्क फ़ॉर्म: contacts/page.tsx में। सर्वर एक्शन (saveMessage) का उपयोग करता है जिसमें सत्यापन और लोडिंग स्थिति होती है। SQLite में सहेजता है।
• घटक:
  • ProductCard: चित्र, टैग (Badge), मूल्य, स्थिति, सुविधाएँ, ग्रेडिएंट और hover के साथ।
  • NewsItem: सरल समाचार कार्ड।
• कमजोरी: actions.ts में — संदेश को बिना जाँच के JSON के रूप में पार्स करते हैं। यदि आप { "type": "system", "payload": { "action": "ls" } } जैसा crafted payload भेजते हैं, तो exec कमांड निष्पादित करेगा। यह RSC के लिए deserialization attack का सिमुलेशन है।