NextJS

Tip

AWS हैकिंग सीखें और अभ्यास करें:HackTricks Training AWS Red Team Expert (ARTE)
GCP हैकिंग सीखें और अभ्यास करें: HackTricks Training GCP Red Team Expert (GRTE) Azure हैकिंग सीखें और अभ्यास करें: HackTricks Training Azure Red Team Expert (AzRTE)

HackTricks का समर्थन करें

• सदस्यता योजनाओं की जांच करें!
• हमारे 💬 Discord समूह या टेलीग्राम समूह में शामिल हों या हमें Twitter 🐦 @hacktricks_live** पर फॉलो करें।**
• हैकिंग ट्रिक्स साझा करें और HackTricks और HackTricks Cloud गिटहब रिपोजिटरी में PRs सबमिट करें।

Next.js एप्लिकेशन की सामान्य संरचना

सामान्य फ़ाइल संरचना

एक मानक Next.js प्रोजेक्ट एक विशिष्ट फ़ाइल और डायरेक्टरी संरचना का पालन करता है जो routing, API endpoints और static asset management जैसी सुविधाओं को सुलभ बनाती है। यहाँ एक सामान्य लेआउट है:

my-nextjs-app/
├── node_modules/
├── public/
│   ├── images/
│   │   └── logo.png
│   └── favicon.ico
├── app/
│   ├── api/
│   │   └── hello/
│   │       └── route.ts
│   ├── layout.tsx
│   ├── page.tsx
│   ├── about/
│   │   └── page.tsx
│   ├── dashboard/
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/
│   │   ├── Header.tsx
│   │   └── Footer.tsx
│   ├── styles/
│   │   ├── globals.css
│   │   └── Home.module.css
│   └── utils/
│       └── api.ts
├── .env.local
├── next.config.js
├── tsconfig.json
├── package.json
├── README.md
└── yarn.lock / package-lock.json

मुख्य Directories और Files

• public/: images, fonts, और अन्य फ़ाइलों जैसे static assets को होस्ट करता है। Files यहाँ root path (/) पर उपलब्ध होते हैं।
• app/: आपके application के pages, layouts, components, और API routes के लिए केंद्रीय डायरेक्टरी। यह App Router पैरेडाइम को अपनाता है, जिससे उन्नत routing फीचर और server-client component पृथकीकरण संभव होता है।
• app/layout.tsx: आपके एप्लिकेशन के लिए root layout को परिभाषित करता है, जो सभी pages को घेरता है और headers, footers, और navigation bars जैसे स्थिर UI तत्व प्रदान करता है।
• app/page.tsx: root route / के लिए entry point के रूप में कार्य करता है, और home page को render करता है।
• app/[route]/page.tsx: static और dynamic routes को हैंडल करता है। app/ के अंदर हर फ़ोल्डर एक route segment का प्रतिनिधित्व करता है, और उन फ़ोल्डरों के भीतर page.tsx उस route के component के अनुरूप होता है।
• app/api/: API routes को रखता है, जिससे आप HTTP requests को हैंडल करने वाले serverless functions बना सकते हैं। ये routes पारंपरिक pages/api डायरेक्टरी की जगह लेते हैं।
• app/components/: reusable React components को रखता है जिन्हें विभिन्न pages और layouts में उपयोग किया जा सकता है।
• app/styles/: global CSS फ़ाइलें और component-scoped styling के लिए CSS Modules रखता है।
• app/utils/: utility functions, helper modules, और अन्य non-UI लॉजिक शामिल हैं जिन्हें application के विभिन्न भागों में साझा किया जा सकता है।
• .env.local: local development environment के लिए विशिष्ट environment variables को स्टोर करता है। ये variables version control में not commit किए जाते हैं।
• next.config.js: Next.js के व्यवहार को customize करता है, जिसमें webpack configurations, environment variables, और security settings शामिल हैं।
• tsconfig.json: प्रोजेक्ट के लिए TypeScript सेटिंग्स को कॉन्फ़िगर करता है, जिससे type checking और अन्य TypeScript फीचर्स सक्षम होते हैं।
• package.json: प्रोजेक्ट dependencies, scripts, और metadata का प्रबंधन करता है।
• README.md: प्रोजेक्ट के बारे में documentation और जानकारी प्रदान करता है, जिसमें setup निर्देश, उपयोग मार्गदर्शन, और अन्य प्रासंगिक विवरण शामिल हैं।
• yarn.lock / package-lock.json: प्रोजेक्ट की dependencies को विशिष्ट वर्शन पर लॉक करते हैं, जिससे विभिन्न environments में installations consistent रहती हैं।

Client-Side in Next.js

File-Based Routing in the app Directory

app directory नवीनतम Next.js वर्शन में routing का cornerstone है। यह filesystem का उपयोग करके routes को परिभाषित करता है, जिससे route प्रबंधन सहज और स्केलेबल बन जाता है।

my-nextjs-app/
├── app/
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

tsxCopy code// app/page.tsx

export default function HomePage() {
return (
<div>
<h1>Welcome to the Home Page!</h1>
<p>This is the root route.</p>
</div>
);
}

arduinoCopy codemy-nextjs-app/
├── app/
│   ├── about/
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

// app/about/page.tsx

export default function AboutPage() {
return (
<div>
<h1>About Us</h1>
<p>Learn more about our mission and values.</p>
</div>
)
}

arduinoCopy codemy-nextjs-app/
├── app/
│   ├── posts/
│   │   └── [id]/
│   │       └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

tsxCopy code// app/posts/[id]/page.tsx

import { useRouter } from 'next/navigation';

interface PostProps {
params: { id: string };
}

export default function PostPage({ params }: PostProps) {
const { id } = params;
// Fetch post data based on 'id'

return (
<div>
<h1>Post #{id}</h1>
<p>This is the content of post {id}.</p>
</div>
);
}

arduinoCopy codemy-nextjs-app/
├── app/
│   ├── dashboard/
│   │   ├── settings/
│   │   │   └── profile/
│   │   │       └── page.tsx
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

tsxCopy code// app/dashboard/settings/profile/page.tsx

export default function ProfileSettingsPage() {
return (
<div>
<h1>Profile Settings</h1>
<p>Manage your profile information here.</p>
</div>
);
}

my-nextjs-app/
├── app/
│   ├── [...slug]/
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

// app/[...slug]/page.tsx

interface CatchAllProps {
params: { slug: string[] }
}

export default function CatchAllPage({ params }: CatchAllProps) {
const { slug } = params
const fullPath = `/${slug.join("/")}`

return (
<div>
<h1>Catch-All Route</h1>
<p>You have navigated to: {fullPath}</p>
</div>
)
}

संभावित Client-Side Vulnerabilities

हालाँकि Next.js एक सुरक्षित आधार प्रदान करता है, अनुचित कोडिंग प्रथाएँ vulnerabilities ला सकती हैं। प्रमुख client-side vulnerabilities में शामिल हैं:

// Dangerous: Injecting user input directly into HTML
function Comment({ userInput }) {
return <div dangerouslySetInnerHTML={{ __html: userInput }} />
}

import React from "react"
import ejs from "ejs"

function RenderTemplate({ template, data }) {
const html = ejs.render(template, data)
return <div dangerouslySetInnerHTML={{ __html: html }} />
}

// pages/download.js
import { useState } from "react"

export default function DownloadPage() {
const [filePath, setFilePath] = useState("")

const handleDownload = () => {
fetch(`/api/files/${filePath}`)
.then((response) => response.blob())
.then((blob) => {
const url = window.URL.createObjectURL(blob)
const a = document.createElement("a")
a.href = url
a.download = filePath
a.click()
})
}

return (
<div>
<h1>Download File</h1>
<input
type="text"
value={filePath}
onChange={(e) => setFilePath(e.target.value)}
placeholder="Enter file path"
/>
<button onClick={handleDownload}>Download</button>
</div>
)
}

Server-Side in Next.js

Server-Side Rendering (SSR)

Pages प्रत्येक अनुरोध पर सर्वर पर render होते हैं, जिससे उपयोगकर्ता को पूरी तरह rendered HTML प्राप्त होता है। इस स्थिति में आपको अनुरोधों को प्रोसेस करने के लिए अपना custom server बनाना चाहिए।

उपयोग के मामले:

• उन dynamic कंटेंट के लिए जो अक्सर बदलती हैं।
• SEO optimization, क्योंकि search engines पूरी तरह rendered पेज को crawl कर सकते हैं।

इम्प्लीमेंटेशन:

// pages/index.js
export async function getServerSideProps(context) {
const res = await fetch("https://api.example.com/data")
const data = await res.json()
return { props: { data } }
}

function HomePage({ data }) {
return <div>{data.title}</div>
}

export default HomePage

स्टैटिक साइट जेनरेशन (SSG)

पृष्ठ बिल्ड समय पर पूर्व-रेंडर किए जाते हैं, जिससे लोड समय तेज़ होता है और सर्वर पर लोड कम होता है।

उपयोग के मामले:

• ऐसी सामग्री जो अक्सर बदलती नहीं है।
• ब्लॉग, दस्तावेज़ीकरण, मार्केटिंग पेज।

क्रियान्वयन:

// pages/index.js
export async function getStaticProps() {
const res = await fetch("https://api.example.com/data")
const data = await res.json()
return { props: { data }, revalidate: 60 } // Revalidate every 60 seconds
}

function HomePage({ data }) {
return <div>{data.title}</div>
}

export default HomePage

सर्वरलेस फ़ंक्शन्स (API Routes)

Next.js API endpoints को serverless functions के रूप में बनाने की अनुमति देता है। ये functions on-demand चलते हैं और dedicated server की आवश्यकता नहीं होती।

उपयोग के मामले:

• फ़ॉर्म सबमिशन को हैंडल करना।
• डेटाबेस के साथ इंटरैक्ट करना।
• डेटा प्रोसेस करना या third-party APIs के साथ इंटीग्रेट करना।

इम्प्लीमेंटेशन:

Next.js 13 के app directory के परिचय के साथ, routing और API handling अधिक लचीले और शक्तिशाली हो गए हैं। यह आधुनिक तरीका file-based routing system के अनुरूप है लेकिन इसमें अतिरिक्त क्षमताएँ शामिल हैं, जिनमें server और client components के लिए सपोर्ट भी शामिल है।

Basic Route Handler

File Structure:

my-nextjs-app/
├── app/
│   └── api/
│       └── hello/
│           └── route.js
├── package.json
└── ...

कार्यान्वयन:

// app/api/hello/route.js

export async function POST(request) {
return new Response(JSON.stringify({ message: "Hello from App Router!" }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

// Client-side fetch to access the API endpoint
fetch("/api/submit", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: "John Doe" }),
})
.then((res) => res.json())
.then((data) => console.log(data))

व्याख्या:

• Location: API routes app/api/ डायरेक्टरी के अंतर्गत रखे जाते हैं।
• File Naming: प्रत्येक API endpoint अपना अलग फ़ोल्डर रखता है जिसमें route.js या route.ts फ़ाइल होती है।
• Exported Functions: एक single default export की बजाय, विशिष्ट HTTP method functions (उदा., GET, POST) export किए जाते हैं।
• Response Handling: responses लौटाने के लिए Response constructor का उपयोग करें, जिससे headers और status codes पर अधिक नियंत्रण मिलता है।

अन्य paths और methods को कैसे handle करें:

// app/api/users/[id]/route.js

export async function GET(request, { params }) {
const { id } = params
// Fetch user data based on 'id'
return new Response(JSON.stringify({ userId: id, name: "Jane Doe" }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

export async function PUT(request, { params }) {
const { id } = params
// Update user data based on 'id'
return new Response(JSON.stringify({ message: `User ${id} updated.` }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

export async function DELETE(request, { params }) {
const { id } = params
// Delete user based on 'id'
return new Response(JSON.stringify({ message: `User ${id} deleted.` }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

// app/api/[...slug]/route.js

export async function GET(request, { params }) {
const { slug } = params
// Handle dynamic nested routes
return new Response(JSON.stringify({ slug }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

// app/api/posts/[postId]/comments/[commentId]/route.js

export async function GET(request, { params }) {
const { postId, commentId } = params
// Fetch specific comment for a post
return new Response(
JSON.stringify({ postId, commentId, comment: "Great post!" }),
{
status: 200,
headers: { "Content-Type": "application/json" },
}
)
}

goCopy codemy-nextjs-app/
├── pages/
│   └── api/
│       └── hello.js
├── package.json
└── ...

javascriptCopy code// pages/api/hello.js

export default function handler(req, res) {
res.status(200).json({ message: 'Hello, World!' });
}

bashCopy codemy-nextjs-app/
├── pages/
│   └── api/
│       └── users/
│           └── [id].js
├── package.json
└── ...

javascriptCopy code// pages/api/users/[id].js

export default function handler(req, res) {
const {
query: { id },
method,
} = req;

switch (method) {
case 'GET':
// Fetch user data based on 'id'
res.status(200).json({ userId: id, name: 'John Doe' });
break;
case 'PUT':
// Update user data based on 'id'
res.status(200).json({ message: `User ${id} updated.` });
break;
case 'DELETE':
// Delete user based on 'id'
res.status(200).json({ message: `User ${id} deleted.` });
break;
default:
res.setHeader('Allow', ['GET', 'PUT', 'DELETE']);
res.status(405).end(`Method ${method} Not Allowed`);
}
}

javascriptCopy code// pages/api/posts.js

export default async function handler(req, res) {
const { method } = req;

switch (method) {
case 'GET':
// Handle GET request
res.status(200).json({ message: 'Fetching posts.' });
break;
case 'POST':
// Handle POST request
res.status(201).json({ message: 'Post created.' });
break;
default:
res.setHeader('Allow', ['GET', 'POST']);
res.status(405).end(`Method ${method} Not Allowed`);
}
}

CORS कॉन्फ़िगरेशन

नियंत्रित करें कि कौन से origins आपके API routes तक पहुँच सकते हैं, जिससे Cross-Origin Resource Sharing (CORS) कमजोरियाँ कम हों।

खराब कॉन्फ़िगरेशन उदाहरण:

// app/api/data/route.js

export async function GET(request) {
return new Response(JSON.stringify({ data: "Public Data" }), {
status: 200,
headers: {
"Access-Control-Allow-Origin": "*", // Allows any origin
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE",
},
})
}

ध्यान दें कि CORS को सभी API routes में भी कॉन्फ़िगर किया जा सकता है middleware.ts फ़ाइल के अंदर:

// app/middleware.ts

import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"

export function middleware(request: NextRequest) {
const allowedOrigins = [
"https://yourdomain.com",
"https://sub.yourdomain.com",
]
const origin = request.headers.get("Origin")

const response = NextResponse.next()

if (allowedOrigins.includes(origin || "")) {
response.headers.set("Access-Control-Allow-Origin", origin || "")
response.headers.set(
"Access-Control-Allow-Methods",
"GET, POST, PUT, DELETE, OPTIONS"
)
response.headers.set(
"Access-Control-Allow-Headers",
"Content-Type, Authorization"
)
// If credentials are needed:
// response.headers.set('Access-Control-Allow-Credentials', 'true');
}

// Handle preflight requests
if (request.method === "OPTIONS") {
return new Response(null, {
status: 204,
headers: response.headers,
})
}

return response
}

export const config = {
matcher: "/api/:path*", // Apply to all API routes
}

समस्या:

• Access-Control-Allow-Origin: '*': किसी भी वेबसाइट को API तक पहुँचने की अनुमति देता है, जिससे संभावित रूप से हानिकारक साइटें बिना प्रतिबंध के आपके API के साथ इंटरैक्ट कर सकती हैं।
• विधियों की व्यापक अनुमति: सभी HTTP विधियों की अनुमति देने से हमलावर अवांछित क्रियाएँ कर सकते हैं।

हमलावर इसका दुरुपयोग कैसे करते हैं:

हमलावर हानिकारक वेबसाइटें तैयार कर सकते हैं जो आपके API को अनुरोध भेजती हैं, और संभावित रूप से डेटा पुनर्प्राप्ति, डेटा संशोधन, या प्रमाणीकरण प्राप्त उपयोगकर्ताओं की ओर से अवांछित क्रियाएँ ट्रिगर करने जैसी सुविधाओं का दुरुपयोग कर सकती हैं।

CORS - Misconfigurations & Bypass

Server code exposure in Client Side

यह आसानी से हो सकता है कि use code used by the server also in code exposed and used by the client side, इसलिए किसी कोड फ़ाइल को कभी client side में expose न होने देने का सबसे अच्छा तरीका है कि फ़ाइल की शुरुआत में इस import का उपयोग किया जाए:

import "server-only"

प्रमुख फ़ाइलें और उनकी भूमिकाएँ

middleware.ts / middleware.js

Location: प्रोजेक्ट की root में या src/ के भीतर।

Purpose: अनुरोध प्रोसेस होने से पहले server-side serverless फ़ंक्शन में कोड निष्पादित करता है, जिससे authentication, redirects, या responses को संशोधित करने जैसे कार्य किए जा सकते हैं।

निष्पादन प्रवाह:

1. Incoming Request: middleware अनुरोध को इंटरसेप्ट करता है।
2. Processing: अनुरोध के आधार पर ऑपरेशन करता है (उदा., authentication की जाँच)।
3. Response Modification: प्रतिक्रिया को बदल सकता है या अगले हैंडलर को नियंत्रण दे सकता है।

उदाहरण उपयोग के मामले:

• अनप्रमाणित उपयोगकर्ताओं को रीडायरेक्ट करना।
• कस्टम हेडर्स जोड़ना।
• अनुरोधों को लॉग करना।

नमूना कॉन्फ़िगरेशन:

// middleware.ts
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"

export function middleware(req: NextRequest) {
const url = req.nextUrl.clone()
if (!req.cookies.has("token")) {
url.pathname = "/login"
return NextResponse.redirect(url)
}
return NextResponse.next()
}

export const config = {
matcher: ["/protected/:path*"],
}

next.config.js

स्थान: प्रोजेक्ट की रूट निर्देशिका।

उद्देश्य: Next.js के व्यवहार को configure करता है — features को सक्षम/अक्षम करना, webpack configurations को customize करना, environment variables सेट करना, और कई security features को configure करना।

मुख्य सुरक्षा कॉन्फ़िगरेशन:

// next.config.js

module.exports = {
async headers() {
return [
{
source: "/(.*)", // Apply to all routes
headers: [
{
key: "X-Frame-Options",
value: "DENY",
},
{
key: "Content-Security-Policy",
value:
"default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval';",
},
{
key: "X-Content-Type-Options",
value: "nosniff",
},
{
key: "Strict-Transport-Security",
value: "max-age=63072000; includeSubDomains; preload", // Enforces HTTPS
},
{
key: "Referrer-Policy",
value: "no-referrer", // Completely hides referrer
},
// Additional headers...
],
},
]
},
}

// next.config.js

module.exports = {
images: {
domains: ["*"], // Allows images from any domain
},
}

// next.config.js

module.exports = {
env: {
SECRET_API_KEY: process.env.SECRET_API_KEY, // Exposed to the client
NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL, // Correctly prefixed for client
},
}

// next.config.js

module.exports = {
async redirects() {
return [
{
source: "/redirect",
destination: (req) => req.query.url, // Dynamically redirects based on query parameter
permanent: false,
},
]
},
}

https://yourdomain.com/redirect?url=https://malicious-site.com

// next.config.js

module.exports = {
webpack: (config, { isServer }) => {
if (!isServer) {
config.resolve.alias["@sensitive"] = path.join(__dirname, "secret-folder")
}
return config
},
}

pages/_app.js and pages/_document.js

pages/_app.js

Purpose: यह default App component को override करता है, जिससे global state, styles, और layout components जोड़ना संभव होता है।

Use Cases:

• global CSS inject करना।
• layout wrappers जोड़ना।
• state management libraries को integrate करना।

Example:

// pages/_app.js
import "../styles/globals.css"

function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}

export default MyApp

pages/_document.js

Purpose: डिफ़ॉल्ट Document को ओवरराइड करता है, HTML और Body टैग्स को कस्टमाइज़ करने में सक्षम बनाता है।

Use Cases:

• <html> या <body> टैग्स को संशोधित करना।
• meta टैग्स या custom scripts जोड़ना।
• third-party fonts को integrate करना।

Example:

// pages/_document.js
import Document, { Html, Head, Main, NextScript } from "next/document"

class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head>{/* Custom fonts or meta tags */}</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}

export default MyDocument

कस्टम सर्वर (वैकल्पिक)

उद्देश्य: Next.js के साथ built-in server आता है, लेकिन आप उन्नत उपयोग मामलों के लिए custom server बना सकते हैं — जैसे custom routing या existing backend services के साथ integrate करना।

नोट: एक custom server इस्तेमाल करने से deployment विकल्प सीमित हो सकते हैं, खासकर उन प्लेटफ़ॉर्म्स पर जैसे Vercel जो Next.js के built-in server के लिए optimize करते हैं।

उदाहरण:

// server.js
const express = require("express")
const next = require("next")

const dev = process.env.NODE_ENV !== "production"
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
const server = express()

// Custom route
server.get("/a", (req, res) => {
return app.render(req, res, "/a")
})

// Default handler
server.all("*", (req, res) => {
return handle(req, res)
})

server.listen(3000, (err) => {
if (err) throw err
console.log("> Ready on http://localhost:3000")
})
})

अतिरिक्त आर्किटेक्चरल और सुरक्षा विचार

पर्यावरण वेरिएबल्स और कॉन्फ़िगरेशन

उद्देश्य: कोडबेस के बाहर संवेदनशील जानकारी और कॉन्फ़िगरेशन सेटिंग्स का प्रबंधन करना।

सर्वोत्तम प्रथाएँ:

• .env फाइलों का उपयोग करें: API keys जैसे वेरिएबल्स को .env.local में स्टोर करें (संस्करण नियंत्रण से बाहर)।
• वैरिएबल्स को सुरक्षित रूप से एक्सेस करें: पर्यावरण वेरिएबल्स तक पहुँचने के लिए process.env.VARIABLE_NAME का उपयोग करें।
• कभी भी क्लाइंट पर गुप्त जानकारी उजागर न करें: सुनिश्चित करें कि संवेदनशील वेरिएबल केवल server-side पर उपयोग हों।

उदाहरण:

// next.config.js
module.exports = {
env: {
API_KEY: process.env.API_KEY, // Accessible on both client and server
SECRET_KEY: process.env.SECRET_KEY, // Be cautious if accessible on the client
},
}

नोट: सिर्फ सर्वर-साइड तक वेरिएबल्स सीमित करने के लिए, उन्हें env ऑब्जेक्ट से हटा दें या क्लाइंट एक्सपोज़र के लिए NEXT_PUBLIC_ से प्रीफिक्स करें।

प्रमाणीकरण और प्राधिकरण

दृष्टिकोण:

• Session-Based Authentication: उपयोगकर्ता सत्रों को प्रबंधित करने के लिए cookies का उपयोग करें।
• Token-Based Authentication: स्टेटलेस प्रमाणीकरण के लिए JWTs लागू करें।
• Third-Party Providers: OAuth providers (e.g., Google, GitHub) के साथ next-auth जैसी लाइब्रेरी का उपयोग करके इंटीग्रेट करें।

सुरक्षा प्रथाएँ:

• Secure Cookies: HttpOnly, Secure, और SameSite एट्रिब्यूट्स सेट करें।
• Password Hashing: स्टोर करने से पहले हमेशा पासवर्ड को हैश करें।
• Input Validation: इनपुट्स को मान्य (validate) और sanitize करके injection attacks से बचाएँ।

उदाहरण:

// pages/api/login.js
import { sign } from "jsonwebtoken"
import { serialize } from "cookie"

export default async function handler(req, res) {
const { username, password } = req.body

// Validate user credentials
if (username === "admin" && password === "password") {
const token = sign({ username }, process.env.JWT_SECRET, {
expiresIn: "1h",
})
res.setHeader(
"Set-Cookie",
serialize("auth", token, {
path: "/",
httpOnly: true,
secure: true,
sameSite: "strict",
})
)
res.status(200).json({ message: "Logged in" })
} else {
res.status(401).json({ error: "Invalid credentials" })
}
}

प्रदर्शन अनुकूलन

रणनीतियाँ:

• छवि अनुकूलन: Next.js के next/image component का उपयोग स्वचालित छवि अनुकूलन के लिए करें।
• कोड विभाजन: dynamic imports का उपयोग करके कोड विभाजित करें और प्रारम्भिक लोड समय कम करें।
• कैशिंग: API responses और static assets के लिए कैशिंग रणनीतियाँ लागू करें।
• आलसी लोडिंग: आवश्यक होने पर ही components या assets लोड करें।

उदाहरण:

// Dynamic Import with Code Splitting
import dynamic from "next/dynamic"

const HeavyComponent = dynamic(() => import("../components/HeavyComponent"), {
loading: () => <p>Loading...</p>,
})

Next.js Server Actions Enumeration (hash to function name via source maps)

आधुनिक Next.js “Server Actions” का उपयोग करता है जो server पर चलते हैं लेकिन client से invoke किए जाते हैं। Production में ये invocations अस्पष्ट होते हैं: सभी POSTs एक सामान्य endpoint पर पहुँचते हैं और इन्हें build-specific hash द्वारा अलग किया जाता है जो Next-Action header में भेजा जाता है। उदाहरण:

POST /
Next-Action: a9f8e2b4c7d1...

जब productionBrowserSourceMaps सक्षम होता है, minified JS chunks में createServerReference(...) कॉल्स होते हैं जो पर्याप्त structure (साथ ही associated source maps) को leak करते हैं ताकि action hash और मूल function name के बीच मैपिंग recover की जा सके। इससे आप Next-Action में देखे गए hashes को concrete targets जैसे deleteUserAccount() या exportFinancialData() में translate कर सकते हैं।

निकालने का तरीका (regex on minified JS + optional source maps)

डाउनलोड किए गए JS chunks में createServerReference खोजें और hash तथा function/source symbol निकालें। दो उपयोगी पैटर्न:

# Strict pattern for standard minification
createServerReference\)"([a-f0-9]{40,})",\w+\.callServer,void 0,\w+\.findSourceMapURL,"([^"]+)"\)

# Flexible pattern handling various minification styles
createServerReference[^\"]*"([a-f0-9]{40,})"[^\"]*"([^"]+)"\s*\)

• Group 1: सर्वर-एक्शन हैश (40+ hex chars)
• Group 2: ऐसा symbol या path जिसे source map मौजूद होने पर मूल फ़ंक्शन नाम में resolve किया जा सके

If the script advertises a source map (trailer comment //# sourceMappingURL=<...>.map), fetch it and resolve the symbol/path to the original function name.

व्यावहारिक कार्यप्रवाह

• ब्राउज़ करते समय निस्क्रिय खोज: Next-Action headers और JS chunk URLs वाले requests को capture करें।
• संदर्भित JS bundles और साथ के *.map files (जब मौजूद हों) को फ़ेच करें।
• ऊपर दिए गए regex को चलाकर एक hash↔name dictionary बनाएं।
• परीक्षण लक्षित करने के लिए dictionary का उपयोग करें:
  • नाम-आधारित triage (उदा., transferFunds, exportFinancialData).
  • फ़ंक्शन नाम के आधार पर builds में कवरेज ट्रैक करें (hashes विभिन्न builds के साथ बदलते रहते हैं)।

छिपे हुए actions का अभ्यास (template-based request)

proxy में देखे गए एक valid POST को टेम्पलेट के रूप में लें और किसी दूसरे पाए गए action को लक्ष्य बनाने के लिए Next-Action मान बदल दें:

# Before
Next-Action: a9f8e2b4c7d1

# After
Next-Action: b7e3f9a2d8c5

Repeater में रिप्ले करके उन otherwise unreachable actions की authorization, input validation और business logic की जाँच करें।

Burp automation

• NextjsServerActionAnalyzer (Burp extension) ऊपर बताए गए कार्यों को Burp में स्वचालित करता है:
• proxy history को स्कैन करके JS chunks ढूँढता है, createServerReference(...) एंट्रियाँ एक्स्ट्रैक्ट करता है, और उपलब्ध होने पर source maps को पार्स करता है।
• searchable hash↔function-name dictionary रखता है और function name के आधार पर builds में de-duplicate करता है।
• एक valid template POST locate कर सकता है और target action’s hash swap करके भेजने के लिए तैयार Repeater tab खोल सकता है।
• Repo: https://github.com/Adversis/NextjsServerActionAnalyzer

Notes and limitations

• नामों को bundles/source maps से recover करने के लिए production में productionBrowserSourceMaps enabled होना चाहिए।
• Function-name disclosure अपने आप किसी vulnerability के बराबर नहीं है; इसका उपयोग discovery में मार्गदर्शन करने और प्रत्येक action की authorization को टेस्ट करने के लिए करें।

React Server Components Flight protocol deserialization RCE (CVE-2025-55182)

Next.js App Router deployments जो Server Actions को react-server-dom-webpack 19.0.0–19.2.0 (Next.js 15.x/16.x) पर expose करते हैं, उनमें Flight chunk deserialization के दौरान एक critical server-side prototype pollution होता है। Flight payload के अंदर $ references को craft करके attacker polluted prototypes से arbitrary JavaScript execution और फिर Node.js process के अंदर OS command execution तक पहुँच सकता है।

NodeJS - proto & prototype Pollution

Attack chain in Flight chunks

1. Prototype pollution primitive: Set "then": "$1:__proto__:then" ताकि resolver Object.prototype पर एक then function लिख दे। इसके बाद कोई भी plain object जो process होगा thenable बन जाएगा, जिससे attacker RSC internals के async control flow को प्रभावित कर सकता है।
2. Rebinding to the global Function constructor: _response._formData.get को "$1:constructor:constructor" पर पॉइंट करें। resolution के दौरान, object.constructor → Object, और Object.constructor → Function, इसलिए भविष्य में _formData.get() कॉल्स वास्तव में Function(...) को execute करेंगे।
3. Code execution via _prefix: _response._prefix में JavaScript source डालें। जब polluted _formData.get invoke होगा, framework Function(_prefix)(...) को evaluate करेगा, इसलिए injected JS require('child_process').exec() या किसी भी अन्य Node primitive को चला सकता है।

Payload skeleton

{
"then": "$1:__proto__:then",
"status": "resolved_model",
"reason": -1,
"value": "{\"then\":\"$B1337\"}",
"_response": {
"_prefix": "require('child_process').exec('id')",
"_chunks": "$Q2",
"_formData": { "get": "$1:constructor:constructor" }
}
}

React Server Function exposure का मानचित्रण

React Server Functions (RSF) वे फ़ंक्शन हैं जिनमें 'use server'; directive शामिल होता है। उन फ़ंक्शन्स से बाउंड हर form action, mutation, या fetch helper एक RSC Flight endpoint बन जाता है जो attacker-supplied payloads को आसानी से deserialize कर लेता है। React2Shell assessments से निकाले गए उपयोगी recon कदम:

• Static inventory: directive को ढूंढें ताकि समझ सकें कि framework द्वारा कितने RSFs स्वतः expose हो रहे हैं।

rg -n "'use server';" -g"*.{js,ts,jsx,tsx}" app/

• App Router डिफ़ॉल्ट: create-next-app डिफ़ॉल्ट रूप से App Router + app/ डायरेक्टरी को सक्षम करता है, जो चुपचाप हर route को RSC-capable endpoint में बदल देता है। App Router assets जैसे /_next/static/chunks/app/ या वे responses जो Flight chunks को text/x-component पर stream करते हैं, मजबूत इंटरनेट-फेसिंग फिंगरप्रिंट्स हैं।
• Implicitly vulnerable RSC deployments: React की advisory में कहा गया है कि RSC runtime भेजने वाली apps exploitable हो सकती हैं यहाँ तक कि explicit RSFs के बिना भी, इसलिए react-server-dom-* 19.0.0–19.2.0 का उपयोग करने वाले किसी भी build को संदिग्ध मानें।
• Other frameworks bundling RSC: Vite RSC, Parcel RSC, React Router RSC preview, RedwoodSDK, Waku, आदि वही serializer दोबारा उपयोग करते हैं और patched React builds शामिल करने तक समान remote attack surface विरासत में लेते हैं।

संस्करण कवरेज (React2Shell)

• react-server-dom-webpack, react-server-dom-parcel, react-server-dom-turbopack: vulnerable in 19.0.0, 19.1.0–19.1.1 and 19.2.0; patched in 19.0.1, 19.1.2 and 19.2.1 respectively.
• Next.js stable: App Router releases 15.0.0–16.0.6 में vulnerable RSC stack embedded है। Patch trains 15.0.5 / 15.1.9 / 15.2.6 / 15.3.6 / 15.4.8 / 15.5.7 / 16.0.7 में fixed deps शामिल हैं, इसलिए उन संस्करणों से नीचे कोई भी build high-value है।
• Next.js canary: 14.3.0-canary.77+ भी buggy runtime भेजता है और वर्तमान में patched canary drops का अभाव है, जिससे वे fingerprints मजबूत exploitation candidates बनते हैं।

रिमोट डिटेक्शन ओरेकल

Assetnote का react2shell-scanner candidate paths पर एक crafted multipart Flight request भेजता है और server-side व्यवहार का निरीक्षण करता है:

• Default mode एक deterministic RCE payload निष्पादित करता है (math operation जो X-Action-Redirect के माध्यम से प्रतिबिंबित होता है) जो code execution को साबित करता है।
• --safe-check mode जानबूझकर Flight message को malformed बनाता है ताकि patched servers 200/400 लौटाएँ, जबकि vulnerable targets HTTP/500 responses भेजते हैं जिनके body में E{"digest" substring मौजूद होता है। वह (500 + digest) pair वर्तमान में defenders द्वारा प्रकाशित सबसे भरोसेमंद remote oracle है।
• Built-in --waf-bypass, --vercel-waf-bypass, and --windows switches payload layout समायोजित करते हैं, junk prepend करते हैं, या OS commands को swap करते हैं ताकि आप वास्तविक Internet assets को probe कर सकें।

python3 scanner.py -u https://target.tld --path /app/api/submit --safe-check
python3 scanner.py -l hosts.txt -t 20 --waf-bypass -o vulnerable.json

संदर्भ

• Pentesting Next.js Server Actions — A Burp Extension for Hash-to-Function Mapping
• NextjsServerActionAnalyzer (Burp extension)
• CVE-2025-55182 React Server Components Remote Code Execution Exploit Tool
• CVE-2025-55182 & CVE-2025-66478 React2Shell – All You Need to Know
• assetnote/react2shell-scanner

Tip

AWS हैकिंग सीखें और अभ्यास करें:HackTricks Training AWS Red Team Expert (ARTE)
GCP हैकिंग सीखें और अभ्यास करें: HackTricks Training GCP Red Team Expert (GRTE) Azure हैकिंग सीखें और अभ्यास करें: HackTricks Training Azure Red Team Expert (AzRTE)

HackTricks का समर्थन करें

• सदस्यता योजनाओं की जांच करें!
• हमारे 💬 Discord समूह या टेलीग्राम समूह में शामिल हों या हमें Twitter 🐦 @hacktricks_live** पर फॉलो करें।**
• हैकिंग ट्रिक्स साझा करें और HackTricks और HackTricks Cloud गिटहब रिपोजिटरी में PRs सबमिट करें।