NextJS

Tip

Μάθετε & εξασκηθείτε στο AWS Hacking:HackTricks Training AWS Red Team Expert (ARTE)
Μάθετε & εξασκηθείτε στο GCP Hacking: HackTricks Training GCP Red Team Expert (GRTE) Μάθετε & εξασκηθείτε στο Azure Hacking: HackTricks Training Azure Red Team Expert (AzRTE)

Υποστηρίξτε το HackTricks

• Ελέγξτε τα σχέδια συνδρομής!
• Εγγραφείτε στην 💬 ομάδα Discord ή στην ομάδα telegram ή ακολουθήστε μας στο Twitter 🐦 @hacktricks_live.
• Μοιραστείτε κόλπα hacking υποβάλλοντας PRs στα HackTricks και HackTricks Cloud github repos.

Γενική Αρχιτεκτονική μιας Εφαρμογής Next.js

Τυπική Δομή Αρχείων

Ένα τυπικό project Next.js ακολουθεί μια συγκεκριμένη δομή αρχείων και φακέλων που διευκολύνει λειτουργίες όπως routing, API endpoints και διαχείριση στατικών πόρων. Ακολουθεί μια τυπική διάταξη:

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/: Φιλοξενεί στατικά assets όπως εικόνες, γραμματοσειρές και άλλα αρχεία. Τα αρχεία εδώ είναι προσβάσιμα στη ρίζα (/).
• app/: Κεντρικός κατάλογος για τις σελίδες της εφαρμογής σας, layouts, components και API routes. Υιοθετεί το παράδειγμα του App Router, επιτρέποντας προηγμένα χαρακτηριστικά δρομολόγησης και τον διαχωρισμό server-client components.
• app/layout.tsx: Ορίζει το root layout για την εφαρμογή σας, περιβάλλοντας όλες τις σελίδες και παρέχοντας συνεπή στοιχεία UI όπως επικεφαλίδες, υποσέλιδα και μπάρες πλοήγησης.
• app/page.tsx: Λειτουργεί ως σημείο εισόδου για τη ρίζα /, αποδίδοντας την αρχική σελίδα.
• app/[route]/page.tsx: Αντιμετωπίζει στατικές και δυναμικές διαδρομές. Κάθε φάκελος εντός του app/ αντιπροσωπεύει ένα segment της διαδρομής, και το page.tsx μέσα σε αυτούς τους φακέλους αντιστοιχεί στο component της διαδρομής.
• app/api/: Περιέχει API routes, επιτρέποντάς σας να δημιουργήσετε serverless functions που χειρίζονται HTTP αιτήματα. Αυτές οι routes αντικαθιστούν τον παραδοσιακό κατάλογο pages/api.
• app/components/: Φιλοξενεί επαναχρησιμοποιήσιμα React components που μπορούν να χρησιμοποιηθούν σε διαφορετικές σελίδες και layouts.
• app/styles/: Περιέχει παγκόσμια αρχεία CSS και CSS Modules για styling σε επίπεδο component.
• app/utils/: Περιλαμβάνει utility functions, helper modules και άλλη μη UI λογική που μπορεί να μοιραστεί σε όλη την εφαρμογή.
• .env.local: Αποθηκεύει μεταβλητές περιβάλλοντος συγκεκριμένες για το τοπικό περιβάλλον ανάπτυξης. Αυτές οι μεταβλητές δεν δεσμεύονται στο version control.
• next.config.js: Προσαρμόζει τη συμπεριφορά του Next.js, συμπεριλαμβανομένων των ρυθμίσεων webpack, μεταβλητών περιβάλλοντος και ρυθμίσεων ασφαλείας.
• tsconfig.json: Ρυθμίζει τις επιλογές TypeScript για το έργο, ενεργοποιώντας τον έλεγχο τύπων και άλλα χαρακτηριστικά TypeScript.
• package.json: Διαχειρίζεται τις εξαρτήσεις του έργου, scripts και μεταδεδομένα.
• README.md: Παρέχει τεκμηρίωση και πληροφορίες για το έργο, συμπεριλαμβανομένων οδηγιών εγκατάστασης, οδηγιών χρήσης και άλλων σχετικών λεπτομερειών.
• yarn.lock / package-lock.json: Κλειδώνουν τις εξαρτήσεις του έργου σε συγκεκριμένες εκδόσεις, εξασφαλίζοντας συνεπείς εγκαταστάσεις σε διαφορετικά περιβάλλοντα.

Client-side στο Next.js

File-Based Routing in the app Directory

Ο κατάλογος app είναι ο ακρογωνιαίος λίθος της δρομολόγησης στις νεότερες εκδόσεις του Next.js. Εκμεταλλεύεται το filesystem για να ορίσει routes, καθιστώντας τη διαχείριση διαδρομών διαισθητική και κλιμακούμενη.

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

Server-Side στο Next.js

Server-Side Rendering (SSR)

Οι σελίδες αποδίδονται στον διακομιστή σε κάθε αίτημα, διασφαλίζοντας ότι ο χρήστης λαμβάνει πλήρως αποδομένη HTML. Σε αυτή την περίπτωση θα πρέπει να δημιουργήσετε τον δικό σας custom server για την επεξεργασία των αιτημάτων.

Περιπτώσεις Χρήσης:

• Δυναμικό περιεχόμενο που αλλάζει συχνά.
• Βελτιστοποίηση SEO, καθώς οι μηχανές αναζήτησης μπορούν να ανιχνεύσουν τη σελίδα με πλήρως αποδομένη HTML.

Υλοποίηση:

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

Serverless Functions (API Routes)

Το Next.js επιτρέπει τη δημιουργία API endpoints ως serverless functions. Αυτές οι συναρτήσεις εκτελούνται κατά απαίτηση χωρίς την ανάγκη για έναν αφιερωμένο server.

Use Cases:

• Διαχείριση υποβολών φορμών.
• Αλληλεπίδραση με βάσεις δεδομένων.
• Επεξεργασία δεδομένων ή ενσωμάτωση με APIs τρίτων.

Implementation:

Με την εισαγωγή του app directory στο Next.js 13, το routing και ο χειρισμός των API έγιναν πιο ευέλικτα και ισχυρά. Αυτή η σύγχρονη προσέγγιση ευθυγραμμίζεται στενά με το file-based routing system αλλά εισάγει βελτιωμένες δυνατότητες, συμπεριλαμβανομένης της υποστήριξης για server και client components.

Basic Route Handler

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 routes τοποθετούνται κάτω από τον κατάλογο app/api/.
• Ονομασία αρχείων: Κάθε API endpoint βρίσκεται σε ξεχωριστό φάκελο που περιέχει ένα αρχείο route.js ή route.ts.
• Εξαγόμενες Συναρτήσεις: Αντί για ένα ενιαίο default export, εξάγονται συγκεκριμένες συναρτήσεις για HTTP μεθόδους (π.χ. GET, POST).
• Επεξεργασία Απαντήσεων: Χρησιμοποιήστε τον constructor Response για να επιστρέψετε απαντήσεις, επιτρέποντας μεγαλύτερο έλεγχο πάνω στα headers και τους κωδικούς κατάστασης.

Πώς να χειριστείτε άλλες διαδρομές και μεθόδους:

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

Ελέγξτε ποιες προελεύσεις (origins) μπορούν να έχουν πρόσβαση στις API routes σας, μετριάζοντας ευπάθειες του 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 μπορεί επίσης να διαμορφωθεί σε όλες τις διαδρομές API μέσα στο αρχείο 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

Server code exposure in Client Side

Είναι εύκολο να use code used by the server also in code exposed and used by the client side, ο καλύτερος τρόπος για να διασφαλίσετε ότι ένα αρχείο code δεν εκτίθεται ποτέ στο client side είναι να χρησιμοποιήσετε αυτό το import στην αρχή του αρχείου:

import "server-only"

Βασικά αρχεία και ο ρόλος τους

middleware.ts / middleware.js

Τοποθεσία: Στη ρίζα του έργου ή μέσα στο src/.

Σκοπός: Εκτελεί κώδικα σε server-side serverless function πριν επεξεργαστεί ένα request, επιτρέποντας εργασίες όπως authentication, redirects ή τροποποίηση των responses.

Ροή εκτέλεσης:

1. Εισερχόμενο Request: Το middleware αναχαιτίζει το request.
2. Επεξεργασία: Εκτελεί λειτουργίες βάσει του request (π.χ., έλεγχος authentication).
3. Τροποποίηση Response: Μπορεί να αλλάξει το response ή να μεταβιβάσει τον έλεγχο στον επόμενο handler.

Παραδείγματα χρήσης:

• Ανακατεύθυνση μη αυθεντικοποιημένων χρηστών.
• Προσθήκη custom headers.
• Καταγραφή requests.

Παράδειγμα ρυθμίσεων:

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

Τοποθεσία: Ρίζα του έργου.

Σκοπός: Ρυθμίζει τη συμπεριφορά του Next.js, ενεργοποιώντας ή απενεργοποιώντας λειτουργίες, προσαρμόζοντας τις ρυθμίσεις του webpack, ορίζοντας μεταβλητές περιβάλλοντος και διαμορφώνοντας διάφορες δυνατότητες ασφαλείας.

Βασικές Ρυθμίσεις Ασφαλείας:

// 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 και pages/_document.js

pages/_app.js

Purpose: Επικαλύπτει το προεπιλεγμένο App component, επιτρέποντας global state, styles και layout components.

Use Cases:

• Προσθήκη global CSS.
• Προσθήκη layout wrappers.
• Ενσωμάτωση βιβλιοθηκών για state management.

Example:

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

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

export default MyApp

pages/_document.js

Σκοπός: Παρεμβαίνει στο προεπιλεγμένο Document, επιτρέποντας την προσαρμογή των tags <html> και <body>.

Περιπτώσεις χρήσης:

• Τροποποίηση των <html> ή <body> tags.
• Προσθήκη meta tags ή προσαρμοσμένων scripts.
• Ενσωμάτωση γραμματοσειρών τρίτων.

Παράδειγμα:

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

Προσαρμοσμένος Server (Προαιρετικό)

Σκοπός: Ενώ το Next.js περιλαμβάνει έναν built-in server, μπορείτε να δημιουργήσετε έναν custom server για προχωρημένες περιπτώσεις χρήσης όπως custom routing ή ενσωμάτωση με υπάρχοντα backend services.

Σημείωση: Η χρήση ενός custom server μπορεί να περιορίσει τις επιλογές ανάπτυξης, ειδικά σε πλατφόρμες όπως η Vercel που βελτιστοποιούν για τον built-in server του Next.js.

Παράδειγμα:

// 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 για πρόσβαση στις περιβαλλοντικές μεταβλητές.
• Μην εκθέτετε ποτέ μυστικά στον Client: Βεβαιωθείτε ότι οι ευαίσθητες μεταβλητές χρησιμοποιούνται μόνο από την πλευρά του server.

Παράδειγμα:

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

Σημείωση: Για να περιορίσετε μεταβλητές μόνο στην πλευρά του server, παραλείψτε τις από το αντικείμενο env ή προθέστε NEXT_PUBLIC_ για έκθεση στον client.

Αυθεντικοποίηση και Εξουσιοδότηση

Προσέγγιση:

• Αυθεντικοποίηση βάσει συνεδρίας: Χρησιμοποιήστε cookies για τη διαχείριση των συνεδριών χρηστών.
• Αυθεντικοποίηση με token: Χρησιμοποιήστε JWTs για αυθεντικοποίηση χωρίς κατάσταση.
• Πάροχοι τρίτων: Ενσωματώστε παρόχους OAuth (π.χ., Google, GitHub) χρησιμοποιώντας βιβλιοθήκες όπως next-auth.

Πρακτικές Ασφαλείας:

• Ασφαλή Cookies: Ορίστε τις ιδιότητες HttpOnly, Secure και SameSite.
• Κατακερματισμός κωδικών: Πάντα κατακερματίζετε τους κωδικούς πριν τους αποθηκεύσετε.
• Επικύρωση εισροών: Αποτρέψτε τα injection attacks επαληθεύοντας και καθαρίζοντας τις εισροές.

Παράδειγμα:

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

Βελτιστοποίηση Απόδοσης

Στρατηγικές:

• Βελτιστοποίηση Εικόνων: Χρησιμοποιήστε το component next/image του Next.js για αυτόματη βελτιστοποίηση εικόνων.
• Διαίρεση Κώδικα (Code Splitting): Χρησιμοποιήστε δυναμικές εισαγωγές (dynamic imports) για να διαχωρίσετε τον κώδικα και να μειώσετε τον αρχικό χρόνο φόρτωσης.
• Caching: Εφαρμόστε στρατηγικές caching για τις αποκρίσεις API και τα static assets.
• Lazy Loading: Φορτώστε components ή assets μόνο όταν χρειάζονται.

Παράδειγμα:

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

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

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

Το σύγχρονο Next.js χρησιμοποιεί “Server Actions” που εκτελούνται στον διακομιστή αλλά καλούνται από τον πελάτη. Σε production αυτές οι κλήσεις είναι αδιαφανείς: όλα τα POSTs καταλήγουν σε ένα κοινό endpoint και διακρίνονται από ένα build-specific hash που αποστέλλεται στην κεφαλίδα Next-Action. Παράδειγμα:

POST /
Next-Action: a9f8e2b4c7d1...

Όταν ενεργοποιείται το productionBrowserSourceMaps, τα minified JS chunks περιέχουν κλήσεις προς το createServerReference(...) που leak αρκετή δομή (συν τα σχετιζόμενα source maps) ώστε να ανακτήσετε μια αντιστοίχιση μεταξύ του action hash και του αρχικού ονόματος της συνάρτησης. Αυτό σας επιτρέπει να μεταφράζετε τα hashes που παρατηρούνται στο Next-Action σε συγκεκριμένους στόχους όπως deleteUserAccount() ή exportFinancialData().

Προσέγγιση εξαγωγής (regex on minified JS + optional source maps)

Αναζητήστε τα ληφθέντα JS chunks για το createServerReference και εξάγετε το hash και το σύμβολο της συνάρτησης/πηγής. Δύο χρήσιμα μοτίβα:

# 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: server action hash (40+ hex chars)
• Ομάδα 2: symbol ή path που μπορεί να επιλυθεί στο αρχικό όνομα συνάρτησης μέσω του source map όταν υπάρχει

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

Πρακτική ροή εργασίας

• Παθητική ανακάλυψη κατά την περιήγηση: καταγράψτε requests με headers Next-Action και JS chunk URLs.
• Fetch the referenced JS bundles and accompanying *.map files (when present).
• Run the regex above to build a hash↔name dictionary.
• Use the dictionary to target testing:
• Name-driven triage (e.g., transferFunds, exportFinancialData).
• Track coverage across builds by function name (hashes rotate across builds).

Εκτέλεση κρυφών actions (template-based request)

Take a valid POST observed in-proxy as a template and swap the Next-Action value to target another discovered action:

# Before
Next-Action: a9f8e2b4c7d1

# After
Next-Action: b7e3f9a2d8c5

Αναπαραγωγή στο Repeater και έλεγχος authorization, input validation και business logic ενεργειών που διαφορετικά είναι απρόσιτες.

Burp αυτοματοποίηση

• NextjsServerActionAnalyzer (Burp επέκταση) αυτοματοποιεί τα παραπάνω στο Burp:
• Σαρώνει το ιστορικό proxy για JS chunks, εξάγει createServerReference(...) entries, και αναλύει source maps όταν είναι διαθέσιμα.
• Διατηρεί αναζητήσιμο λεξικό hash↔function-name και αφαιρεί διπλότυπα ανά builds με βάση το όνομα της συνάρτησης.
• Μπορεί να εντοπίσει ένα έγκυρο template POST και να ανοίξει μια έτοιμη για αποστολή καρτέλα Repeater με το hash της στοχευόμενης ενέργειας αντικατεστημένο.
• Repo: https://github.com/Adversis/NextjsServerActionAnalyzer

Σημειώσεις και περιορισμοί

• Απαιτεί productionBrowserSourceMaps ενεργοποιημένο σε production για να ανακτήσει ονόματα από bundles/source maps.
• Η αποκάλυψη function-name από μόνη της δεν αποτελεί ευπάθεια — χρησιμοποιήστε την για να καθοδηγήσετε την ανακάλυψη και να ελέγξετε την authorization κάθε ενέργειας.

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

Next.js App Router deployments που εκθέτουν Server Actions στο react-server-dom-webpack 19.0.0–19.2.0 (Next.js 15.x/16.x) περιέχουν μια κρίσιμη server-side prototype pollution κατά την απο-σειριοποίηση των Flight chunks. Με τη δημιουργία $ references μέσα σε ένα Flight payload, ένας επιτιθέμενος μπορεί να μεταβεί από μολυσμένα prototypes σε αυθαίρετη εκτέλεση JavaScript και στη συνέχεια σε εκτέλεση εντολών OS μέσα στη διεργασία του Node.js.

NodeJS - proto & prototype Pollution

Αλυσίδα επίθεσης σε Flight chunks

1. Prototype pollution primitive: Ορίστε "then": "$1:__proto__:then" έτσι ώστε ο resolver να γράψει μια συνάρτηση then στο Object.prototype. Οποιοδήποτε plain object επεξεργάζεται μετά γίνεται thenable, επιτρέποντας στον επιτιθέμενο να επηρεάσει τον async control flow μέσα στα RSC internals.
2. Rebinding to the global Function constructor: Δείξτε _response._formData.get προς "$1:constructor:constructor". Κατά την επίλυση, object.constructor → Object, και Object.constructor → Function, οπότε μελλοντικές κλήσεις σε _formData.get() εκτελούν στην πραγματικότητα Function(...).
3. Code execution via _prefix: Τοποθετήστε πηγαίο JavaScript σε _response._prefix. Όταν κληθεί το μολυσμένο _formData.get, το framework αξιολογεί Function(_prefix)(...), οπότε το εισαγμένο JS μπορεί να εκτελέσει require('child_process').exec() ή οποιοδήποτε άλλο Node primitive.

Σκελετός payload

{
"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 Hacking:HackTricks Training AWS Red Team Expert (ARTE)
Μάθετε & εξασκηθείτε στο GCP Hacking: HackTricks Training GCP Red Team Expert (GRTE) Μάθετε & εξασκηθείτε στο Azure Hacking: HackTricks Training Azure Red Team Expert (AzRTE)

Υποστηρίξτε το HackTricks

• Ελέγξτε τα σχέδια συνδρομής!
• Εγγραφείτε στην 💬 ομάδα Discord ή στην ομάδα telegram ή ακολουθήστε μας στο Twitter 🐦 @hacktricks_live.
• Μοιραστείτε κόλπα hacking υποβάλλοντας PRs στα HackTricks και HackTricks Cloud github repos.