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 hulpbronne 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-lêergidse en lêers

• public/: Huisves statiese hulpbronne soos beelde, lettertipes en ander lêers. Lêers hier is toeganklik by die root-pad (/).
• app/: Sentraal gids vir jou toepassing se bladsye, layouts, komponente en API routes. Omhels die App Router-paradigma, wat gevorderde routeringsfunksies en skeiding tussen server- en kliëntkomponente moontlik maak.
• app/layout.tsx: Bepaal die root-layout vir jou toepassing, draai om alle bladsye en verskaf konsekwente UI-elemente soos headers, footers, en navigasiebalks.
• app/page.tsx: Dien as die toegangspunt vir die root-roete /, en rendreer die tuisblad.
• app/[route]/page.tsx: Hanteer statiese en dinamiese roetes. Elke gids binne app/ verteenwoordig ’n roete-segment, en page.tsx binne daardie vouers kom ooreen met die roete se komponent.
• app/api/: Bevat API routes, 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 nuttige funksies, helper-modules en ander nie-UI logika in wat gedeel kan word oor die toepassing.
• .env.local: Stoor omgewingveranderlikes spesifiek vir die plaaslike ontwikkelingsomgewing. Hierdie veranderlikes word nie in weergawebeheer toegevoeg 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: Beheer projek-afhanklikhede, 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 konsekente installasies oor verskillende omgewings verseker.

Kliënt-side in Next.js

Lêer-gebaseerde routering in die app gids

Die app gids is die hoeksteen van routering in die nuutste Next.js-weergawes. Dit maak gebruik van 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 invoer. Sleutel 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>
)
}

Server-Side in Next.js

Server-Side Rendering (SSR)

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

Gebruikstoepassings:

• Dynamiese inhoud wat gereeld verander.
• SEO-optimalisering, aangesien 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 build-tyd, 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 Funksies (API Routes)

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

Gebruikgevalle:

• Handel vorminskrywings af.
• Interaksie met databases.
• Verwerking van data of integrasie met derdeparty-APIs.

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 pas nou binne die file-based routing-stelsel, maar bied uitgebreide vermoëns, insluitend ondersteuning vir server- en client-komponente.

Basiese 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/ directory.
• Bestandsbenaming: Elke API-endpoint woon in sy eie vouer wat ’n route.js of route.ts file bevat.
• Geëksporteerde funksies: In plaas van ’n enkele default export, word spesifieke HTTP-metode funksies (bv. GET, POST) geëksporteer.
• Responshantering: Gebruik die Response constructor om responses terug te stuur, 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 oorspronge toegang tot jou API-roetes kan kry, en verminder Cross-Origin Resource Sharing (CORS)-kwesbaarhede.

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

Neem kennis 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: Die toelaat van alle metodes kan attackers in staat stel om ongewenste aksies uit te voer.

Hoe attackers dit uitbuit:

Attackers kan kwaadwillige webwerwe skep wat versoeke na jou API stuur, moontlik funksionaliteit misbruik soos data retrieval, data manipulation, of die ontlokking van ongewenste aksies namens authenticated users.

CORS - Misconfigurations & Bypass

Bedienerkode blootstelling aan die kliëntkant

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

import "server-only"

Sleutellêers en hul Rolle

middleware.ts / middleware.js

Location: Root van die projek of binne src/.

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

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 oordra na die volgende handler.

Voorbeelde van gebruik:

• Herlei nie-geverifieerde gebruikers.
• Voeg aangepaste headers by.
• Registreer 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*"],
}

next.config.js

Ligging: Wortel van die projek.

Doel: Konfigureer die gedrag van Next.js, skakel funksies aan of af, pas webpack-konfigurasies aan, stel omgewing-variabeles 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, // 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 en pages/_document.js

pages/_app.js

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

Gebruiksscenario’s:

• Invoeging 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:

• Wysig die <html> of <body>-tags.
• Voeg meta-tags of pasgemaakte scripts by.
• Integrasie van derdeparty-lettertipes.

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

Aangepaste bediener (Opsioneel)

Doel: Terwyl Next.js met ’n ingeboude bediener kom, kan jy ’n aangepaste bediener skep vir gevorderde gebruiksgevalle soos aangepaste routering of integrasie met bestaande backend-dienste.

Nota: Die gebruik van ’n aangepaste bediener kan ontplooiingsopsies 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: Bestuur sensitiewe inligting en konfigurasie-instellings buite die kodebasis.

Beste praktyke:

• Gebruik .env-lêers: Bêre veranderlikes soos API-sleutels in .env.local (uitgesluit van weergawebeheer).
• Toegang tot veranderlikes veilig: Gebruik process.env.VARIABLE_NAME om omgewingsveranderlikes te kry.
• Maak geheime nooit aan die kliënt sigbaar 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 server te beperk, laat hulle uit die env-objek weg of voorsien hulle van die voorvoegsel NEXT_PUBLIC_ vir kliënt-eksposisie.

Verifikasie en autorisering

Benadering:

• Sessiegebaseerde verifikasie: Gebruik cookies om gebruiker-sessies te bestuur.
• Token-gebaseerde verifikasie: Implementeer JWTs vir staatlose verifikasie.
• Derdeparty-verskaffers: Integreer met OAuth-verskaffers (bv. Google, GitHub) deur biblioteke soos next-auth te gebruik.

Sekuriteitspraktyke:

• Secure Cookies: Stel HttpOnly, Secure, en SameSite eienskappe.
• Wagwoord-hashing: Hash wagwoorde altyd voordat jy dit stoor.
• Invoer-validering: Voorkom injection-aanvalle deur invoer 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 component vir outomatiese beeldoptimalisering.
• Kode-splitsing: Gebruik dinamiese imports om kode te verdeel en aanvanklike laaitye te verminder.
• Caching: Implementeer caching-strategieë vir API-responsies 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 Enumerasie (hash to function name via source maps)

Moderne Next.js gebruik “Server Actions” wat op die bediener uitgevoer word maar vanaf die kliënt aangeroep word. In produksie is hierdie aanroepe ondoorgrondelik: alle POSTs land op ’n gemeenskaplike endpoint en word van mekaar 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 funksienaam te herwin. Dit laat jou toe om hashes wat in Next-Action waargeneem word na konkrete teikens soos deleteUserAccount() of exportFinancialData() te vertaal.

Onttrekkingsbenadering (regex op minified JS + opsionele source maps)

Soek in afgelaaide JS-chunks na 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 karakters)
• Groep 2: simbool of pad wat na die oorspronklike funksie opgelos kan word via die source map wanneer teenwoordig

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

Praktiese werkvloei

• Passiewe ontdekking terwyl jy blaai: vang versoeke met Next-Action headers en JS chunk URLs.
• Haal die verwysde JS-bundels en die vergeselnde *.map-lêers op (wanneer teenwoordig).
• Voer die regex hierbo uit om ’n hash↔naam woordeboek op te bou.
• Gebruik die woordeboek om teikengerigte toetsing:
  • Naamgedrewe triage (bv., transferFunds, exportFinancialData).
  • Volg dekking oor builds volgens funksienaam (hashes roteer tussen builds).

Uitoefen van verborge actions (sjabloon-gebaseerde versoek)

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

# Before
Next-Action: a9f8e2b4c7d1

# After
Next-Action: b7e3f9a2d8c5

Speel dit in Repeater af en toets autorisasie, invoervalidatie en sakelogika van andersins onbereikbare aksies.

Burp automation

• NextjsServerActionAnalyzer (Burp-uitbreiding) automatiseer die bogenoemde in Burp:
• Blaai deur proxy history vir JS chunks, haal createServerReference(...) inskrywings uit, en parse source maps wanneer beskikbaar.
• Onderhou ’n deursoekbare hash↔function-name woordeboek en verwyder duplikate oor builds op grond van function name.
• Kan ’n geldige template POST lokaliseer en ’n gereed-om-te-stuur Repeater-oortjie oopmaak met die teiken-aksie se hash ingegooi.
• Repo: https://github.com/Adversis/NextjsServerActionAnalyzer

Notes and limitations

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

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) contain a critical server-side prototype pollution during Flight chunk deserialisasie. Deur $ verwysings binne ’n Flight payload te konstrueer, kan ’n aanvaller van besoedelde prototypes draai na arbitrêre JavaScript-uitvoering en dan 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 asinchrone beheervloei binne RSC-internes te beïnvloed.
2. Rebinding to the global Function constructor: Wys _response._formData.get na "$1:constructor:constructor". Tydens resolusie word object.constructor → Object, en Object.constructor → Function, so 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 ingespuitde JS require('child_process').exec() of enige ander Node-primitive kan aanroep.

Payload skeleton

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

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

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.