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.

Muundo wa Jumla wa Programu ya Next.js

Muundo wa Faili wa Kawaida

Mradi wa kawaida wa Next.js unafuata muundo maalum wa faili na saraka unaorahisisha vipengele vyake kama routing, API endpoints, na usimamizi wa mali statiki. Hapa kuna muundo 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

Core Directories and Files

• public/: Inahifadhi mali statiki kama picha, fonti, na faili nyingine. Faili hapa zinafikika kwenye path ya mzizi (/).
• app/: Directory kuu kwa pages, layouts, components, na API routes za application yako. Inatumia paradiamu ya App Router, ikiruhusu vipengele vya routing vya hali ya juu na utofauti wa component kati ya server na client.
• app/layout.tsx: Hufafanua root layout kwa application yako, ikizunguka pages zote na kutoa vipengele vya UI vinavyolingana kama headers, footers, na navigation bars.
• app/page.tsx: Inatumikia kama entry point kwa route ya mzizi /, ikitoa home page.
• app/[route]/page.tsx: Inashughulikia static na dynamic routes. Kila folda ndani ya app/ inawakilisha segment ya route, na page.tsx ndani ya folda hizo inalingana na component ya route.
• app/api/: Inajumuisha API routes, ikikuwezesha kuunda serverless functions zinazoshughulikia HTTP requests. Routes hizi zinachukua nafasi ya directory ya jadi pages/api.
• app/components/: Inabeba reusable React components zinazoweza kutumika katika pages na layouts mbalimbali.
• app/styles/: Ina mafaili ya global CSS na CSS Modules kwa styling inayolenga components.
• app/utils/: Inajumuisha utility functions, helper modules, na logic nyingine zisizo za UI ambazo zinaweza kushirikiwa kwenye application.
• .env.local: Inahifadhi environment variables maalum kwa mazingira ya maendeleo ya local. Variables hizi hazijumuishwi katika version control.
• next.config.js: Inabinafsisha tabia ya Next.js, ikijumuisha webpack configurations, environment variables, na settings za usalama.
• tsconfig.json: Inabainisha TypeScript settings za project, ikiruhusu type checking na vipengele vingine vya TypeScript.
• package.json: Inasimamia project dependencies, scripts, na metadata.
• README.md: Inatoa nyaraka na taarifa kuhusu project, ikijumuisha maagizo ya setup, miongozo ya matumizi, na maelezo mengine muhimu.
• yarn.lock / package-lock.json: Hufunga dependencies za project kwa versions maalum, kuhakikisha installations zinabaki thabiti kati ya mazingira tofauti.

Client-Side in Next.js

File-Based Routing in the app Directory

Directory ya app ni nguzo kuu ya routing katika toleo za hivi karibuni za Next.js. Inatumia filesystem kutangaza routes, na kufanya usimamizi wa routes kuwa wa asili 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>
)
}

Potential Client-Side Vulnerabilities

Ingawa Next.js inatoa msingi salama, mbinu mbaya za uandishi wa msimbo zinaweza kuingiza udhaifu. Udhaifu muhimu 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

Uwasilishaji Upande wa Seva (SSR)

Kurasa zinatengenezwa kwenye server kila ombi, kuhakikisha kwamba mtumiaji anapata HTML iliyotengenezwa kabisa. Katika kesi hii unapaswa kuunda server yako maalum ili kushughulikia maombi.

Matumizi:

• Yaliyomo yanayobadilika mara kwa mara.
• Uboreshaji wa SEO, kwani mashine za utafutaji zinaweza kusoma ukurasa uliotengenezwa kabisa.

Utekelezaji:

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

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

export default HomePage

Uundaji wa Tovuti zisizobadilika (SSG)

Kurasa zinatayarishwa awali wakati wa kujenga, zikisababisha upakiaji wa haraka na kupunguza mzigo kwenye seva.

Matumizi:

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

Utekelezaji:

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

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

export default HomePage

Funsi za Serverless (API Routes)

Next.js inaruhusu uundaji wa endpoints za API kama funsi za serverless. Funsi hizi zinaendesha kwa mahitaji bila hitaji la server iliyojitolea.

Use Cases:

• Kushughulikia uwasilishaji wa fomu.
• Kuingiliana na hifadhidata.
• Kuchakata data au kuunganisha na APIs za wahusika wa tatu.

Implementation:

Kwa kuanzishwa kwa saraka ya app katika Next.js 13, routing na usimamizi wa API vimekuwa vya kubadilika zaidi na vyenye nguvu zaidi. Mbinu hii ya kisasa inaendana kwa karibu na mfumo wa routing unaotegemea faili, lakini inaleta uwezo ulioboreshwa, ikiwa ni pamoja na msaada kwa komponenti za server na client.

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 ndani ya saraka app/api/.
• Majina ya Faili: Kila endpoint ya API iko katika folda yake yenye faili route.js au route.ts.
• Functions Zilizotolewa: Badala ya export chaguo-msingi moja, functions maalum za HTTP method (kwa mfano, GET, POST) zinatolewa.
• Ushughulikiaji wa Response: Tumia constructor ya Response kurejesha responses, ikiruhusu udhibiti zaidi wa headers na status codes.

Jinsi ya kushughulikia njia 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 ni origins zipi zinaweza kufikia API routes zako, kupunguza udhaifu wa Cross-Origin Resource Sharing (CORS).

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 API routes zote ndani ya faili ya middleware.ts:

// app/middleware.ts

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

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

const response = NextResponse.next()

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

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

return response
}

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

Tatizo:

• Access-Control-Allow-Origin: '*': Inaruhusu tovuti yoyote kufikia API, na kwa hivyo inaweza kumruhusu tovuti zenye nia mbaya kuingiliana na API yako bila vikwazo.
• Kuruhusu Methods Zote: Kuruhusu methods zote kunaweza kumuwezesha washambuliaji kufanya vitendo visivyotakikana.

Jinsi washambuliaji wanavyovitumia:

Washambuliaji wanaweza kutengeneza tovuti zenye nia mbaya ambazo zinafanya ombi kwa API yako, zikitumia vibaya huduma kama vile kupata data, uhariri wa data, au kusababisha vitendo visivyotakikana kwa niaba ya watumiaji waliothibitishwa.

CORS - Misconfigurations & Bypass

Kufichuliwa kwa code ya server upande wa client

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

import "server-only"

Faili Muhimu na Majukumu Yao

middleware.ts / middleware.js

Mahali: Mzizi wa mradi au ndani ya src/.

Madhumuni: Inatekeleza code katika server-side serverless function kabla request ishughulikiwe, ikiruhusu kazi kama authentication, redirects, au modifying responses.

Mtiririko wa utekelezaji:

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

Mifano ya Matumizi:

• Redirecting watumiaji wasiothibitishwa.
• Kuongeza headers za custom.
• Kurekodi requests.

Mfano wa Configuration:

// middleware.ts
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"

export function middleware(req: NextRequest) {
const url = req.nextUrl.clone()
if (!req.cookies.has("token")) {
url.pathname = "/login"
return NextResponse.redirect(url)
}
return NextResponse.next()
}

export const config = {
matcher: ["/protected/:path*"],
}

next.config.js

Location: Mzizi wa mradi.

Madhumuni: Inaseti tabia za Next.js, kuwezesha au kuzima vipengele, kubinafsisha webpack configurations, kuweka environment variables, 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 default App component, ikiruhusu global state, styles, na layout components.

Matumizi:

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

Mfano:

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

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

export default MyApp

pages/_document.js

Kusudi: Inapindua Document ya chaguo-msingi, ikiruhusu kubinafsisha tagi za <html> na <body>.

Matumizi:

• Kurekebisha tagi za <html> au <body>.
• Kuongeza meta tagi au scripts maalum.
• Kuunganisha fonti za wahusika wa tatu.

Mfano:

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

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

export default MyDocument

Seva Maalum (Hiari)

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

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

Mfano:

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

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

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

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

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

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

Mambo ya Ziada ya Miundo na Usalama

Variables za Mazingira na Usanidi

Madhumuni: Simamia taarifa nyeti na mipangilio ya usanidi nje ya msimbo.

Miongozo Bora:

• Tumia .env Files: Hifadhi vigezo kama API keys katika .env.local (imeachwa nje ya udhibiti wa toleo).
• Pata Vigezo kwa Usalama: Tumia process.env.VARIABLE_NAME kupata environment variables.
• Usiwafichue Siri kwa Client: Hakikisha 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 ziwe upande wa server pekee, ziache kutoka kwenye env object au ziweke na kiambishi awali NEXT_PUBLIC_ kwa kuonyesha kwa client.

Uthibitishaji na Idhini

Mbinu:

• Session-Based Authentication: Tumia cookies kusimamia vikao vya watumiaji.
• Token-Based Authentication: Tekeleza JWTs kwa uthibitishaji usio na state.
• Third-Party Providers: Unganisha na OAuth providers (mfano, Google, GitHub) ukitumia maktaba kama next-auth.

Mbinu za Usalama:

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

Mfano:

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

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

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

Uboreshaji wa Utendaji

Mikakati:

• Uboreshaji wa Picha: Tumia Next.js’s next/image component kwa uboreshaji wa picha kiotomatiki.
• Ugawaji wa Msimbo: Tumia dynamic imports kugawanya msimbo na kupunguza nyakati za mzigo wa awali.
• Caching: Tekeleza mikakati ya caching kwa majibu ya API na assets za statiki.
• Kupakia kwa kuchelewesha: Pakia components au assets tu wakati zinahitajika.

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” ambazo zinaendeshwa kwenye server lakini zinaitwa kutoka kwa client. Katika production miito hii ni isiyo wazi: POSTs zote zinaenda kwenye endpoint ya pamoja na zinatofautishwa kwa hash maalum ya build inayotumwa kwenye header Next-Action. Mfano:

POST /
Next-Action: a9f8e2b4c7d1...

Wakati productionBrowserSourceMaps imewezeshwa, vipande vya minified JS hujumuisha wito kwa createServerReference(...) ambavyo leak muundo wa kutosha (pamoja na source maps zinazohusiana) ili kupata mapping kati ya action hash na jina la function asilia. Hii inakuwezesha kutafsiri hashes zinazoonekana katika Next-Action kuwa malengo maalum kama deleteUserAccount() au exportFinancialData().

Njia ya uondoaji (regex kwenye minified JS + source maps za hiari)

Tafuta vipande vya JS vilivyopakuliwa kwa createServerReference na tooa hash pamoja na function/source symbol. Mifumo miwili muhimu:

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

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

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

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

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

Chukua valid POST observed in-proxy kama template na swap thamani ya Next-Action ili target another discovered action:

# Before
Next-Action: a9f8e2b4c7d1

# After
Next-Action: b7e3f9a2d8c5

Rudisha katika Repeater na test authorization, input validation, na business logic ya actions ambazo vingine haviwezi kufikiwa.

Burp automation

• NextjsServerActionAnalyzer (Burp extension) automates the above in Burp:
• Inachimba historia ya proxy kwa JS chunks, inachukua entries za createServerReference(...), na inachambua source maps inapopatikana.
• Inatunza kamusi inayoweza kutafutwa ya hash↔function-name na ina-de-duplicate across builds kwa function name.
• Inaweza kutafuta POST ya template halali na kufungua tab ya Repeater tayari-kutumwa yenye hash ya target action imebadilishwa.
• Repo: https://github.com/Adversis/NextjsServerActionAnalyzer

Notes and limitations

• Requires productionBrowserSourceMaps enabled in production to recover names from bundles/source maps.
• Function-name disclosure is not a vulnerability by itself; use it to guide discovery and test each action’s authorization.

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

Next.js App Router deployments ambazo zina expose Server Actions kwenye react-server-dom-webpack 19.0.0–19.2.0 (Next.js 15.x/16.x) zina prototype pollution kali upande wa server wakati wa deserialization ya Flight chunk. Kwa kutengeneza marejeo ya $ ndani ya Flight payload attacker anaweza kupindua kutoka polluted prototypes kwenda arbitrary JavaScript execution na kisha kwa OS command execution ndani ya Node.js process.

NodeJS - proto & prototype Pollution

Attack chain in Flight chunks

1. Prototype pollution primitive: Weka "then": "$1:__proto__:then" ili resolver iandike function ya then kwenye Object.prototype. Kila plain object iliyosindika baadaye itageuka kuwa thenable, ikimruhusu attacker kuathiri async control flow ndani ya RSC internals.
2. Rebinding to the global Function constructor: Point _response._formData.get at "$1:constructor:constructor". Wakati wa resolution, object.constructor → Object, na Object.constructor → Function, hivyo simu za baadaye kwa _formData.get() kwa kweli zinaendesha Function(...).
3. Code execution via _prefix: Weka JavaScript source katika _response._prefix. Wakati polluted _formData.get itakapoitwa, framework itatekeleza Function(_prefix)(...), hivyo JS iliyowekwa inaweza kuendesha require('child_process').exec() au primitive nyingine yoyote ya Node.

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

Ramani ya ufichaji wa React Server Function

React Server Functions (RSF) ni aina yoyote ya function inayojumuisha directive 'use server';. Kila form action, mutation, au fetch helper iliyounganishwa na moja ya function hizo inakuwa RSC Flight endpoint ambayo itafurahia ku-deserialize attacker-supplied payloads. Hatua za recon zenye manufaa zilizo tokana na React2Shell assessments:

• Orodha ya static: angalia directive ili kuelewa ni RSFs ngapi zinazo exposewa kiotomatiki na framework.

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

• App Router defaults: create-next-app inawezasha App Router + app/ directory kama chaguo-msingi, ambayo kwa kimya inabadilisha kila route kuwa endpoint inayoweza RSC. App Router assets such as /_next/static/chunks/app/ or responses that stream Flight chunks over text/x-component are strong Internet-facing fingerprints.
• Implicitly vulnerable RSC deployments: React’s own advisory notes that apps shipping the RSC runtime can be exploitable even without explicit RSFs, so treat any build using react-server-dom-* 19.0.0–19.2.0 as suspect.
• Other frameworks bundling RSC: Vite RSC, Parcel RSC, React Router RSC preview, RedwoodSDK, Waku, etc. reuse the same serializer and inherit the identical remote attack surface until they embed patched React builds.

Ufuniko wa matoleo (React2Shell)

• react-server-dom-webpack, react-server-dom-parcel, react-server-dom-turbopack: inayoweza kushambuliwa in 19.0.0, 19.1.0–19.1.1 and 19.2.0; imerekebishwa in 19.0.1, 19.1.2 and 19.2.1 respectively.
• Next.js stable: App Router releases 15.0.0–16.0.6 embed the vulnerable RSC stack. Patch trains 15.0.5 / 15.1.9 / 15.2.6 / 15.3.6 / 15.4.8 / 15.5.7 / 16.0.7 include fixed deps, so any build below those versions is high-value.
• Next.js canary: 14.3.0-canary.77+ pia husafirisha buggy runtime na kwa sasa haijaambatana na patched canary drops, ikifanya fingerprints hizo kuwa wagombea wa exploitation wenye nguvu.

Oracle ya utambuzi ya mbali

Assetnote’s react2shell-scanner inatuma ombi la Flight la multipart lililotengenezwa kwa candidate paths na inafuatilia tabia upande wa server:

• Default mode inatekeleza deterministic RCE payload (math operation reflected via X-Action-Redirect) inayoonyesha code execution.
• --safe-check mode kwa kusudi huraribisha Flight message ili patched servers zirudishe 200/400, wakati vulnerable targets zinarudisha HTTP/500 responses zenye substring E{"digest" ndani ya body. Yayo (500 + digest) pair ni sasa remote oracle yenye kuaminika zaidi iliyochapishwa na defenders.
• Built-in --waf-bypass, --vercel-waf-bypass, and --windows switches hupangilia layout ya payload, huongeza junk mbele, au hubadilisha OS commands ili uweze kuchunguza real Internet assets.

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

Marejeo

• Pentesting Next.js Server Actions — A Burp Extension for Hash-to-Function Mapping
• NextjsServerActionAnalyzer (Burp extension)
• CVE-2025-55182 React Server Components Remote Code Execution Exploit Tool
• CVE-2025-55182 & CVE-2025-66478 React2Shell – All You Need to Know
• assetnote/react2shell-scanner

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.