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 Klasörler ve Dosyalar

• public/: Görseller, fontlar ve diğer dosyalar gibi statik varlıkları barındırır. Buradaki dosyalara kök yolundan (/) erişilebilir.
• app/: Uygulamanızın sayfaları, layout’ları, bileşenleri ve API route’ları için merkezi dizindir. App Router paradigmasını benimser; gelişmiş yönlendirme özellikleri ve sunucu-istemci bileşen ayrımını sağlar.
• app/layout.tsx: Uygulamanız için kök layout’u tanımlar; tüm sayfaları sarar ve header, footer ve navigasyon çubukları gibi tutarlı UI öğelerini sağlar.
• app/page.tsx: Kök rota / için giriş noktası olarak hizmet eder ve ana sayfayı render eder.
• app/[route]/page.tsx: Statik ve dinamik rotaları ele alır. app/ içindeki her klasör bir rota segmentini temsil eder ve bu klasörlerdeki page.tsx o rotanın bileşenine karşılık gelir.
• app/api/: HTTP isteklerini işleyen serverless fonksiyonları oluşturmanıza olanak tanıyan API route’larını içerir. Bu route’lar geleneksel pages/api dizininin yerini alır.
• app/components/: Farklı sayfalar ve layout’lar arasında kullanılabilecek yeniden kullanılabilir React bileşenlerini barındırır.
• app/styles/: Küresel CSS dosyalarını ve bileşen bazlı stil için CSS Modules’ları içerir.
• app/utils/: Uygulama genelinde paylaşılabilecek yardımcı fonksiyonlar, yardımcı modüller ve diğer UI dışı mantıkları içerir.
• .env.local: Yerel geliştirme ortamına özgü environment değişkenlerini depolar. Bu değişkenler versiyon kontrolüne eklenmez.
• next.config.js: webpack yapılandırmaları, environment 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: Proje bağımlılıklarını, script’leri ve metadata’yı yönetir.
• README.md: Kurulum talimatları, kullanım yönergeleri ve diğer ilgili detaylar dahil olmak üzere proje hakkında dokümantasyon ve bilgi sağlar.
• yarn.lock / package-lock.json: Projenin bağımlılıklarını belirli sürümlere kilitler, farklı ortamlar arasında tutarlı kurulumları sağlar.

Next.js’de İstemci Tarafı

app Dizininin Dosya Tabanlı Yönlendirmesi

app dizini, en son Next.js sürümlerinde yönlendirmenin temel taşını oluşturur. Rotaları tanımlamak için dosya sisteminden yararlanı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ı Zayıflıkları

Next.js güvenli bir temel sağlasa da, yanlış kodlama uygulamaları zayıflıkların ortaya çıkmasına neden olabilir. Önemli istemci tarafı zayıflı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>
)
}

Next.js’te Sunucu Tarafı

Sunucu Tarafı Rendering (SSR)

Sayfalar her istekte sunucuda render edilir; bu, kullanıcının tam render edilmiş HTML almasını sağlar. Bu durumda istekleri işlemek için kendi özel sunucunu oluşturmalısın.

Kullanım Durumları:

• Sık değişen dinamik içerikler.
• SEO optimizasyonu; çünkü 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 build zamanında önceden render edilir; bu da daha hızlı yükleme süreleri ve azalan sunucu yükü sağlar.

Kullanım Alanları:

• 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

Serverless Fonksiyonlar (API Routes)

Next.js, serverless fonksiyonlar olarak API uç noktaları oluşturulmasına izin verir. Bu fonksiyonlar talep üzerine çalışır ve özel bir sunucuya ihtiyaç duymaz.

Kullanım Durumları:

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

Uygulama:

Next.js 13’te app dizininin tanıtılmasıyla, routing ve API işlemleri daha esnek ve güçlü hale geldi. Bu modern yaklaşım dosya tabanlı routing sistemiyle yakından uyumlu olmakla birlikte, server ve client komponentlerini 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 rotaları app/api/ dizini altında yer alır.
• Dosya Adlandırma: Her API endpoint’i kendi klasöründe bulunur ve içinde route.js veya route.ts dosyası bulunur.
• Dışa Aktarılan Fonksiyonlar: Tek bir default export yerine, belirli HTTP yöntemlerini (ör. GET, POST) tanımlayan fonksiyonlar export edilir.
• Yanıt İşleme: Yanıtları döndürmek için Response constructor’ını kullanın; bu başlıklar ve durum 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 originlerin erişebileceğini kontrol ederek Cross-Origin Resource Sharing (CORS) güvenlik 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; potansiyel olarak kötü amaçlı sitelerin API’nizle sınırlama olmadan etkileşim kurmasına olanak tanır.
• Geniş Yöntem İzni: Tüm yöntemlere izin vermek, saldırganların istenmeyen eylemler gerçekleştirmesine olanak sağlayabilir.

Saldırganların bunu suistimal etme şekli:

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

CORS - Misconfigurations & Bypass

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

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

import "server-only"

Ana Dosyalar ve Roller

middleware.ts / middleware.js

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

Amaç: İstek işlenmeden önce sunucu tarafında serverless fonksiyon içinde kod çalıştırır; kimlik doğrulama, yönlendirmeler veya yanıtları değiştirme gibi görevleri gerçekleştirmeye izin verir.

Çalışma Akışı:

1. Gelen İstek: middleware isteği yakalar.
2. İşleme: İstek bazlı işlemler gerçekleştirir (ör. kimlik doğrulamasını kontrol etme).
3. Yanıtın Değiştirilmesi: Yanıtı değiştirebilir veya kontrolü sonraki işleyiciye aktarabilir.

Örnek Kullanım Durumları:

• Yetkilendirilmemiş kullanıcıları yönlendirme.
• Özel header’lar 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*"],
}

next.config.js

Location: Projenin kökü.

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

pages/_app.js

Amacı: Varsayılan App bileşenini geçersiz kılar; global state, stiller ve layout bileşenlerine izin verir.

Kullanım Durumları:

• Küresel CSS ekleme.
• Layout sarmalayıcıları ekleme.
• Durum yönetimi (state management) 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ılar, <html> ve <body> etiketlerinin özelleştirilmesine izin verir.

Kullanım Senaryoları:

• <html> veya <body> etiketlerini değiştirmek.
• Meta etiketleri veya özel scriptler eklemek.
• Üçüncü taraf yazı tiplerini entegre etmek.

Ö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 yerleşik bir sunucuyla gelirken, özel yönlendirme veya mevcut backend servisleriyle entegrasyon gibi gelişmiş kullanım senaryoları 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 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 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ç).
• Değişkenlere Güvenli Erişim: Ortam değişkenlerine erişmek için process.env.VARIABLE_NAME kullanın.
• Gizli Bilgileri İstemci Tarafında 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.

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ıyla (ör. Google, GitHub) entegre edin.

Güvenlik Uygulamaları:

• Güvenli Çerezler: HttpOnly, Secure ve SameSite özniteliklerini ayarlayın.
• Parola Hashleme: Parolaları depolamadan önce her zaman hashleyin.
• Girdi Doğrulama: Girdileri doğrulayarak ve temizleyerek enjeksiyon 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 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 uses “Server Actions” that execute on the server but are invoked from the client. In production these invocations are opaque: all POSTs land on a common endpoint and are distinguished by a build-specific hash sent in the Next-Action header. Örnek:

POST /
Next-Action: a9f8e2b4c7d1...

productionBrowserSourceMaps etkinleştirildiğinde, minified JS parçaları createServerReference(...) çağrılarını içerir; bunlar action hash ile orijinal fonksiyon adı arasındaki eşlemeyi geri kazanmak için yeterli yapı (ve ilişkili source map’ler) leak eder. Bu, Next-Action’ta gözlemlenen hash’leri deleteUserAccount() veya exportFinancialData() gibi somut hedeflere çevirmenizi sağlar.

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

İndirilen JS parçalarında createServerReference arayın ve hash ile fonksiyon/kaynak sembolünü çıkarın. İki kullanışlı 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: sembol veya, source map mevcutsa orijinal fonksiyon adına çözülebilen 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: istekleri Next-Action header’ları ve JS chunk URL’leri ile yakalayın.
• Başvurulan JS bundle’larını ve beraberindeki *.map dosyalarını (varsa) çekin.
• Yukarıdaki regex’i çalıştırarak bir hash↔isim sözlüğü oluşturun.
• Test hedeflemede sözlüğü kullanın:
  • İsim tabanlı triage (ör. transferFunds, exportFinancialData).
  • Fonksiyon ismine göre build’ler arası kapsamı takip edin (hash’ler build’ler arasında döner).

Gizli actions’ları çalıştırma (şablon-temelli istek)

Proxy’de 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 takdirde erişilemeyen eylemlerin yetkilendirmesini, giriş doğrulamasını ve iş mantığını test edin.

Burp otomasyonu

• NextjsServerActionAnalyzer (Burp uzantısı) yukarıdakileri Burp içinde otomatikleştirir:
• JS chunk’ları 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 yinelenenleri kaldırır.
• Geçerli bir template POST’u bulup hedef action’ın hash’i yerleştirilmiş, gönderilmeye hazır bir Repeater sekmesi açabilir.
• Repo: https://github.com/Adversis/NextjsServerActionAnalyzer

Notlar ve sınırlamalar

• İsimleri bundle/source map’lerinden kurtarmak için production’da productionBrowserSourceMaps etkin olmasını gerektirir.
• Function-name disclosure tek başına bir güvenlik açığı değildir; bunu keşfi yönlendirmek ve her action’ın yetkilendirmesini 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 açığa çıkarıyorsa, Flight chunk deserialization sırasında kritik bir server-side prototype pollution içerir. Bir Flight payload’u içinde $ referansları oluşturarak bir saldırgan, kirlenmiş prototiplerden rastgele JavaScript yürütmeye ve ardından Node.js sürecinde OS komut yürütmeye pivot yapabilir.

NodeJS - proto & prototype Pollution

Flight chunk’larındaki saldırı zinciri

1. Prototype pollution primitive: Set "then": "$1:__proto__:then" so that the resolver writes a then function on Object.prototype. Sonrasında işlenen herhangi bir düz nesne thenable hâline gelir ve saldırganın RSC iç mantığındaki async kontrol akışını etkilemesine izin verir.
2. Rebinding to the global Function constructor: Point _response._formData.get at "$1:constructor:constructor". Çözümleme sırasında, object.constructor → Object, ve Object.constructor → Function olacağından, gelecekte _formData.get() çağrıları aslında Function(...) çalıştırır.
3. Code execution via _prefix: Place JavaScript source in _response._prefix. Kirlenmiş _formData.get çağrıldığında framework Function(_prefix)(...) değerlendirmesini yapar, bu yüzden enjekte edilen JS require('child_process').exec() veya başka herhangi bir Node ilkelini ç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 maruziyetinin haritalanması

React Server Functions (RSF), ‘use server’; yönergesini içeren herhangi bir fonksiyondur. Bu fonksiyonlardan birine bağlı her form action, mutation veya fetch helper, attacker-supplied 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: Yönergeyi arayın; framework tarafından otomatik olarak kaç RSF’nin açığa çıktığını anlamak için.

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, her route’u sessizce bir RSC-yetkin endpoint’e çevirir. App Router varlıkları (ör. /_next/static/chunks/app/) veya text/x-component üzerinden Flight chunk’larını stream eden yanıtlar güçlü Internet-facing parmak izleridir.
• Implicitly vulnerable RSC deployments: React’in kendi bildirimi, RSC runtime’ını taşıyan uygulamaların açık RSFs olmadan bile sömürülebilir olabileceğini not eder; bu yüzden react-server-dom-* 19.0.0–19.2.0 kullanan herhangi bir build’i şüpheli sayın.
• Other frameworks bundling RSC: Vite RSC, Parcel RSC, React Router RSC preview, RedwoodSDK, Waku, vb. aynı serializer’ı yeniden kullanır ve düzeltilmiş React build’lerini embed edene kadar aynı uzak saldırı yüzeyini miras alırlar.

Sürüm kapsamı (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; sırasıyla düzeltilmiş sürümler 19.0.1, 19.1.2 ve 19.2.1.
• Next.js stable: App Router sürümleri 15.0.0–16.0.6 zayıf RSC yığınını embed eder. Patch trenleri 15.0.5 / 15.1.9 / 15.2.6 / 15.3.6 / 15.4.8 / 15.5.7 / 16.0.7 düzeltilmiş bağımlılıkları içerir; bu nedenle bu sürümlerin altındaki herhangi bir build yüksek değer taşır.
• Next.js canary: 14.3.0-canary.77+ ayrıca hatalı runtime’ı içerir ve şu anda düzeltilmiş canary drops yok, bu yüzden bu parmak izleri güçlü exploitation adaylarıdır.

Remote detection oracle

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

• Default mode deterministik bir RCE payload’u çalıştırır (matematiksel işlem X-Action-Redirect aracılığıyla yansıtılır) ve kod çalıştırmayı kanıtlar.
• --safe-check mode kasıtlı olarak Flight mesajını bozar; böylece yamalanmış sunucular 200/400 dönerken, zayıf hedefler gövdede E{"digest" alt dizisini içeren HTTP/500 yanıtları verir. Bu (500 + digest) çifti şu anda savunucular tarafından yayımlanan en güvenilir remote oracle’dır.
• Dahili --waf-bypass, --vercel-waf-bypass ve --windows anahtarları payload düzenini ayarlar, çöp verisi önekler ekler veya işletim sistemi komutlarını değiştirir; böylece gerçek Internet varlıklarını sorgulayabilirsiniz.

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

Referanslar

• Pentesting Next.js Server Actions — Hash-to-Function Mapping için Bir Burp eklentisi
• NextjsServerActionAnalyzer (Burp eklentisi)
• CVE-2025-55182 React Server Components Remote Code Execution Exploit Tool
• CVE-2025-55182 & CVE-2025-66478 React2Shell – Bilmeniz Gereken Her Şey
• assetnote/react2shell-scanner

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.