NextJS

Reading time: 24 minutes

tip

Leer & oefen AWS Hacking:HackTricks Training AWS Red Team Expert (ARTE)
Leer & oefen GCP Hacking: HackTricks Training GCP Red Team Expert (GRTE)

Ondersteun HackTricks

Algemene Argitektuur van 'n Next.js Toepassing

Tipiese Lêerstruktuur

'n Standaard Next.js projek volg 'n spesifieke lêer- en gidsstruktuur wat sy funksies soos roetering, API-eindpunte, en statiese batesbestuur fasiliteer. Hier is 'n tipiese uitleg:

lua
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

Kern Gidsen en Lêers

  • public/: Huis statiese bates soos prente, lettertipes en ander lêers. Lêers hier is toeganklik by die wortelpad (/).
  • app/: Sentrale gids vir jou toepassing se bladsye, uitleg, komponente en API-roetes. Omarm die App Router paradigma, wat gevorderde routering kenmerke en bediener-klient komponent segregasie moontlik maak.
  • app/layout.tsx: Definieer die wortel uitleg vir jou toepassing, wat om al die bladsye draai en konsekwente UI-elemente soos koptekste, voettekste en navigasiebalks bied.
  • app/page.tsx: Dien as die toegangspunt vir die wortelroete /, wat die tuisblad weergee.
  • app/[route]/page.tsx: Hanteer statiese en dinamiese roetes. Elke gids binne app/ verteenwoordig 'n roete segment, en page.tsx binne daardie gidse stem ooreen met die roete se komponent.
  • app/api/: Bevat API-roetes, wat jou toelaat om serverless funksies te skep wat HTTP versoeke hanteer. Hierdie roetes vervang die tradisionele pages/api gids.
  • app/components/: Huis herbruikbare React komponente wat oor verskillende bladsye en uitleg gebruik kan word.
  • app/styles/: Bevat globale CSS-lêers en CSS Modules vir komponent-geskepte styl.
  • app/utils/: Sluit nutfunksies, helper modules en ander nie-UI logika in wat oor die toepassing gedeel kan word.
  • .env.local: Stoor omgewing veranderlikes wat spesifiek is vir die plaaslike ontwikkelingsomgewing. Hierdie veranderlikes word nie aan weergawebeheer toegewy.
  • next.config.js: Pas Next.js gedrag aan, insluitend webpack konfigurasies, omgewing veranderlikes, en sekuriteitsinstellings.
  • tsconfig.json: Konfigureer TypeScript instellings vir die projek, wat tipe kontrole en ander TypeScript kenmerke moontlik maak.
  • package.json: Bestuur projek afhanklikhede, skripte, en metadata.
  • README.md: Verskaf dokumentasie en inligting oor die projek, insluitend opstelling instruksies, gebruik riglyne, en ander relevante besonderhede.
  • yarn.lock / package-lock.json: Sluit die projek se afhanklikhede na spesifieke weergawes, wat konsekwente installasies oor verskillende omgewings verseker.

Klientkant in Next.js

Lêer-gebaseerde Routering in die app Gids

Die app gids is die hoeksteen van routering in die nuutste Next.js weergawes. Dit benut die lêerstelsel om roetes te definieer, wat roete bestuur intuïtief en skaalbaar maak.

Hanteer die Wortelpad /

Lêer Struktuur:

arduino
my-nextjs-app/
├── app/
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

Sleutelfeile:

  • app/page.tsx: Hanteer versoeke na die wortelpad /.
  • app/layout.tsx: Definieer die uitleg vir die toepassing, wat om al die bladsye draai.

Implementering:

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

Verklaring:

  • Roete Definisie: Die page.tsx lêer direk onder die app gids kom ooreen met die / roete.
  • Weergave: Hierdie komponent vertoon die inhoud vir die tuisblad.
  • Uitleg Integrasie: Die HomePage komponent is omhul deur die layout.tsx, wat koptekste, voettekste en ander algemene elemente kan insluit.
Hantering van Ander Statiese Paaie

Voorbeeld: /about Roete

Lêer Struktuur:

arduino
arduinoCopy codemy-nextjs-app/
├── app/
│   ├── about/
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

Implementering:

tsx
// app/about/page.tsx

export default function AboutPage() {
return (
<div>
<h1>About Us</h1>
<p>Learn more about our mission and values.</p>
</div>
)
}

Verklaring:

  • Roete Definisie: Die page.tsx lêer binne die about gids kom ooreen met die /about roete.
  • Weergave: Hierdie komponent toon die inhoud vir die oor bladsy.
Dinamik Roetes

Dinamik roetes stel in staat om paaie met veranderlike segmente te hanteer, wat toepassings in staat stel om inhoud te vertoon gebaseer op parameters soos ID's, slugs, ens.

Voorbeeld: /posts/[id] Roete

Lêer Struktuur:

arduino
arduinoCopy codemy-nextjs-app/
├── app/
│   ├── posts/
│   │   └── [id]/
│   │       └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

Implementering:

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

Verklaring:

  • Dinamiese Segment: [id] dui 'n dinamiese segment in die roete aan, wat die id parameter uit die URL vasvang.
  • Toegang tot Parameters: Die params objek bevat die dinamiese parameters, toeganklik binne die komponent.
  • Roete Ooreenstemming: Enige pad wat ooreenstem met /posts/*, soos /posts/1, /posts/abc, ens., sal deur hierdie komponent hanteer word.
Geneste Roetes

Next.js ondersteun geneste roetering, wat hiërargiese roete-strukture toelaat wat die gidsindeling weerspieël.

Voorbeeld: /dashboard/settings/profile Roete

Lêerstruktuur:

arduino
arduinoCopy codemy-nextjs-app/
├── app/
│   ├── dashboard/
│   │   ├── settings/
│   │   │   └── profile/
│   │   │       └── page.tsx
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

Implementering:

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

Verklaring:

  • Diep Genesting: Die page.tsx lêer binne dashboard/settings/profile/ stem ooreen met die /dashboard/settings/profile roete.
  • Hiërargie Refleksie: Die gidsstruktuur reflekteer die URL-pad, wat onderhoudbaarheid en duidelikheid verbeter.
Catch-All Roetes

Catch-all roetes hanteer verskeie geneste segmente of onbekende pades, wat buigsaamheid in roete hanteering bied.

Voorbeeld: /* Roete

Lêerstruktuur:

arduino
my-nextjs-app/
├── app/
│   ├── [..slug]/
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

Implementering:

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

Verklaring:

  • Catch-All Segment: [...slug] vang alle oorblywende padsegmente as 'n array.
  • Gebruik: Nuttig vir die hantering van dinamiese routering scenario's soos gebruiker-gegenereerde paaie, geneste kategorieë, ens.
  • Roete-ooreenstemming: Paaie soos /anything/here, /foo/bar/baz, ens., word deur hierdie komponent hanteer.

Potensiële Kliëntkant Kw vulnerabilities

Terwyl Next.js 'n veilige grondslag bied, kan onvanpaste koderingpraktyke kwesbaarhede inbring. Sleutel kliëntkant kwesbaarhede sluit in:

Cross-Site Scripting (XSS)

XSS-aanvalle gebeur wanneer kwaadwillige skripte in vertroude webwerwe ingespuit word. Aanvallers kan skripte in gebruikers se blaaiers uitvoer, data steel of aksies namens die gebruiker uitvoer.

Voorbeeld van Kwesbare Kode:

jsx
// Dangerous: Injecting user input directly into HTML
function Comment({ userInput }) {
return <div dangerouslySetInnerHTML={{ __html: userInput }} />
}

Waarom Dit Kwetsbaar Is: Die gebruik van dangerouslySetInnerHTML met onbetroubare invoer laat aanvallers toe om kwaadwillige skripte in te voeg.

Kliëntkant Sjabloon Inspuiting

Dit gebeur wanneer gebruikersinvoere verkeerd hanteer word in sjablone, wat aanvallers in staat stel om sjablone of uitdrukkings in te voeg en uit te voer.

Voorbeeld van Kwetsbare Kode:

jsx
import React from "react"
import ejs from "ejs"

function RenderTemplate({ template, data }) {
const html = ejs.render(template, data)
return <div dangerouslySetInnerHTML={{ __html: html }} />
}

Waarom Dit Kwetsbaar Is: As template of data kwaadwillige inhoud insluit, kan dit lei tot die uitvoering van onbedoelde kode.

Kliënt Pad Traversal

Dit is 'n kwesbaarheid wat aanvallers toelaat om kliënt-kant padhanteer te manipuleer om onbedoelde aksies uit te voer, soos Cross-Site Request Forgery (CSRF). Anders as bediener-kant pad traversal, wat die bediener se lêerstelsel teiken, fokus CSPT op die ontginning van kliënt-kant meganismes om wettige API versoeke na kwaadwillige eindpunte te herlei.

Voorbeeld van Kwetsbare Kode:

'n Next.js-toepassing laat gebruikers toe om lêers op te laai en af te laai. Die aflaai-funksie word aan die kliëntkant geïmplementeer, waar gebruikers die lêerpad kan spesifiseer om af te laai.

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

Aanval Scenario

  1. Aanvaller se Doelwit: Voer 'n CSRF-aanval uit om 'n kritieke lêer (bv. admin/config.json) te verwyder deur die filePath te manipuleer.
  2. Eksploitering van CSPT:
  • Kwaadwillige Invoer: Die aanvaller skep 'n URL met 'n gemanipuleerde filePath soos ../deleteFile/config.json.
  • Resultaat API-oproep: Die kliëntkant kode maak 'n versoek na /api/files/../deleteFile/config.json.
  • Bediener se Hantering: As die bediener nie die filePath valideer nie, verwerk dit die versoek, wat moontlik sensitiewe lêers kan verwyder of blootstel.
  1. Uitvoering van CSRF:
  • Gemanipuleerde Skakel: Die aanvaller stuur die slagoffer 'n skakel of inkorporeer 'n kwaadwillige skrip wat die aflaai versoek met die gemanipuleerde filePath aktiveer.
  • Uitslag: Die slagoffer voer onbewustelik die aksie uit, wat lei tot ongeoorloofde lêer toegang of verwydering.

Hoekom Dit Kwetsbaar Is

  • Gebrek aan Invoer Validasie: Die kliëntkant laat arbitrêre filePath invoer toe, wat pad traversering moontlik maak.
  • Vertroue op Kliënt Invoere: Die bediener-kant API vertrou en verwerk die filePath sonder sanitasie.
  • Potensiële API Aksies: As die API-eindpunt staat-veranderende aksies uitvoer (bv. verwyder, wysig lêers), kan dit via CSPT geëksploiteer word.

Bediener-Kant in Next.js

Bediener-Kant Rendering (SSR)

Bladsye word op die bediener op elke versoek gerender, wat verseker dat die gebruiker volledig gerenderde HTML ontvang. In hierdie geval moet jy jou eie pasgemaakte bediener skep om die versoeke te verwerk.

Gebruik Gevalle:

  • Dinamiese inhoud wat gereeld verander.
  • SEO-optimalisering, aangesien soekenjins die volledig gerenderde bladsy kan deursoek.

Implementasie:

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

Statiese Webwerf Generasie (SSG)

Bladsye word vooraf gerender tydens bou, wat lei tot vinniger laai tye en verminderde bedienerlas.

Gebruik Gevalle:

  • Inhoud wat nie gereeld verander nie.
  • Blogs, dokumentasie, bemarkingsbladsye.

Implementasie:

jsx
// 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 Funksies (API Roetes)

Next.js maak die skepping van API eindpunte as serverless funksies moontlik. Hierdie funksies loop op aanvraag sonder die behoefte aan 'n toegewyde bediener.

Gebruiksg gevalle:

  • Hantering van vorm indienings.
  • Interaksie met databasisse.
  • Verwerking van data of integrasie met derdeparty API's.

Implementasie:

Met die bekendstelling van die app gids in Next.js 13, het roetering en API hantering meer buigsaam en kragtig geword. Hierdie moderne benadering stem noukeurig ooreen met die lêer-gebaseerde roeteringstelsel, maar stel verbeterde vermoëns bekend, insluitend ondersteuning vir bediener- en kliëntkomponente.

Basiese Roete Handler

Lêer Struktuur:

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

Implementering:

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

Verklaring:

  • Ligging: API-roetes is onder die app/api/ gids geplaas.
  • Lêernaam: Elke API-eindpunt woon in sy eie gids wat 'n route.js of route.ts lêer bevat.
  • Geverifieerde Funksies: In plaas van 'n enkele standaard eksport, word spesifieke HTTP-metode funksies (bv. GET, POST) geexporteer.
  • Antwoord Hantering: Gebruik die Response konstruksie om antwoorde te retourneer, wat meer beheer oor koptekste en statuskode toelaat.

Hoe om ander paaie en metodes te hanteer:

Hantering van Spesifieke HTTP Metodes

Next.js 13+ laat jou toe om hanteerders vir spesifieke HTTP-metodes binne dieselfde route.js of route.ts lêer te definieer, wat duideliker en meer georganiseerde kode bevorder.

Voorbeeld:

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

Verklaring:

  • Meervoudige Eksport: Elke HTTP-metode (GET, PUT, DELETE) het sy eie geëksporteerde funksie.
  • Parameters: Die tweede argument bied toegang tot roeteparameters via params.
  • Verbeterde Antwoorde: Groter beheer oor antwoordobjekte, wat presiese kop en statuskode bestuur moontlik maak.
Catch-All en Geneste Roetes

Next.js 13+ ondersteun gevorderde roeteringskenmerke soos catch-all roetes en geneste API-roetes, wat meer dinamiese en skaalbare API-strukture moontlik maak.

Catch-All Roete Voorbeeld:

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

Verklaring:

  • Sintaksis: [...] dui 'n vang-alles segment aan, wat alle geneste paaie vasvang.
  • Gebruik: Nuttig vir API's wat verskillende roete dieptes of dinamiese segmente moet hanteer.

Geneste Paaie Voorbeeld:

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

Verklaring:

  • Diep Genesting: Laat vir hiërargiese API-strukture, wat hulpbronverhoudings weerspieël.
  • Parameter Toegang: Maklik toegang tot verskeie roeteparameters via die params objek.
Hantering van API-roetes in Next.js 12 en vroeër

API-roetes in die pages Gids (Next.js 12 en vroeër)

Voordat Next.js 13 die app gids en verbeterde roeteringsvermoëns bekendgestel het, is API-roetes hoofsaaklik binne die pages gids gedefinieer. Hierdie benadering word steeds wyd gebruik en ondersteun in Next.js 12 en vroeër weergawes.

Basiese API-roete

Lêerstruktuur:

go
goCopy codemy-nextjs-app/
├── pages/
│   └── api/
│       └── hello.js
├── package.json
└── ...

Implementering:

javascript
javascriptCopy code// pages/api/hello.js

export default function handler(req, res) {
res.status(200).json({ message: 'Hello, World!' });
}

Verklaring:

  • Ligging: API-roetes woon onder die pages/api/ gids.
  • Eksport: Gebruik export default om die hanteringsfunksie te definieer.
  • Funksie Handtekening: Die hanterer ontvang req (HTTP versoek) en res (HTTP antwoord) voorwerpe.
  • Routering: Die lêernaam (hello.js) kaart na die eindpunt /api/hello.

Dinamiese API-roetes

Lêerstruktuur:

bash
bashCopy codemy-nextjs-app/
├── pages/
│   └── api/
│       └── users/
│           └── [id].js
├── package.json
└── ...

Implementering:

javascript
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`);
}
}

Verklaring:

  • Dinamiese Segmente: Vierkantige hakies ([id].js) dui dinamiese roete-segmente aan.
  • Toegang tot Parameters: Gebruik req.query.id om toegang te verkry tot die dinamiese parameter.
  • Hantering van Metodes: Gebruik voorwaardelike logika om verskillende HTTP-metodes (GET, PUT, DELETE, ens.) te hanteer.

Hantering van Verskillende HTTP Metodes

Terwyl die basiese API-roete voorbeeld alle HTTP-metodes binne 'n enkele funksie hanteer, kan jy jou kode struktureer om elke metode eksplisiet te hanteer vir beter duidelikheid en onderhoudbaarheid.

Voorbeeld:

javascript
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`);
}
}

Beste Praktyke:

  • Afsondering van Belange: Skei duidelik die logika vir verskillende HTTP-metodes.
  • Antwoord Konsistensie: Verseker konsekwente antwoordstrukture vir maklike kliënt-kant hantering.
  • Fout Hantering: Hanteer onondersteunde metodes en onverwagte foute met grasie.

CORS Konfigurasie

Beheer watter oorspronge toegang tot jou API-roetes kan hê, wat Cross-Origin Resource Sharing (CORS) kwesbaarhede verminder.

Slegte Konfigurasie Voorbeeld:

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

Let daarop dat CORS ook in al die API-roetes gekonfigureer kan word binne die middleware.ts lêer:

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

Probleem:

  • Access-Control-Allow-Origin: '*': Laat enige webwerf toe om toegang tot die API te verkry, wat potensieel kwaadwillige webwerwe in staat stel om sonder beperkings met jou API te kommunikeer.
  • Wye Metode Toestemming: Om alle metodes toe te laat kan aanvallers in staat stel om ongewenste aksies uit te voer.

Hoe aanvallers dit misbruik:

Aanvallers kan kwaadwillige webwerwe skep wat versoeke na jou API maak, wat potensieel funksies soos dataherwinning, datamanipulasie, of die ontketening van ongewenste aksies namens geverifieerde gebruikers kan misbruik.

CORS - Misconfigurations & Bypass

Bedienerkode blootstelling in Kliëntkant

Dit kan maklik wees om kode wat deur die bediener gebruik word ook in kode blootgestel en deur die kliëntkant gebruik te word, die beste manier om te verseker dat 'n lêer van kode nooit in die kliëntkant blootgestel word nie, is om hierdie invoer aan die begin van die lêer te gebruik:

js
import "server-only"

Sleutel Lêers en Hul Rolle

middleware.ts / middleware.js

Ligging: Wortel van die projek of binne src/.

Doel: Voer kode uit in die bediener-kant serverless funksie voordat 'n versoek verwerk word, wat take soos outentisering, herlei of die aanpassing van antwoorde moontlik maak.

Uitvoeringsvloei:

  1. Inkomende Versoek: Die middleware onderskep die versoek.
  2. Verwerking: Voer operasies uit gebaseer op die versoek (bv. kontroleer outentisering).
  3. Antwoord Aanpassing: Kan die antwoord verander of beheer aan die volgende handler oorgee.

Voorbeeld Gebruik Gevalle:

  • Herlei nie-geoutentiseerde gebruikers.
  • Voeg persoonlike koptekste by.
  • Log versoeke.

Voorbeeld Konfigurasie:

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

Ligging: Wortel van die projek.

Doel: Konfigureer Next.js gedrag, aktiveer of deaktiveer funksies, pas webpack konfigurasies aan, stel omgewing veranderlikes in, en konfigureer verskeie sekuriteitskenmerke.

Belangrike Sekuriteitskonfigurasies:

Sekuriteitskoppe

Sekuriteitskoppe verbeter die sekuriteit van jou aansoek deur aan blaaiers aan te dui hoe om inhoud te hanteer. Hulle help om verskeie aanvalle soos Cross-Site Scripting (XSS), Clickjacking, en MIME tipe sniffing te verminder:

  • Content Security Policy (CSP)
  • X-Frame-Options
  • X-Content-Type-Options
  • Strict-Transport-Security (HSTS)
  • Referrer Policy

Voorbeelde:

javascript
// 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...
],
},
]
},
}
Beeldoptimalisering Instellings

Next.js optimaliseer beelde vir prestasie, maar verkeerde konfigurasies kan lei tot sekuriteitskwesies, soos om onbetroubare bronne toe te laat om kwaadwillige inhoud in te voeg.

Slegte Konfigurasie Voorbeeld:

javascript
// next.config.js

module.exports = {
images: {
domains: ["*"], // Allows images from any domain
},
}

Probleem:

  • '*': Laat toe dat beelde van enige eksterne bron gelaai word, insluitend onbetroubare of kwaadwillige domeine. Aanvallers kan beelde huisves wat kwaadwillige payloads of inhoud bevat wat gebruikers mislei.
  • 'n Ander probleem mag wees om 'n domein toe te laat waar enige iemand 'n beeld kan oplaai (soos raw.githubusercontent.com)

Hoe aanvallers dit misbruik:

Deur beelde van kwaadwillige bronne in te spuit, kan aanvallers phishing-aanvalle uitvoer, misleidende inligting vertoon, of kwesbaarhede in beeld-rendering biblioteke benut.

Omgewing Veranderlikes Blootstelling

Bestuur sensitiewe inligting soos API sleutels en databasis akrediteer veilig sonder om dit aan die kliënt bloot te stel.

a. Blootstelling van Sensitiewe Veranderlikes

Slegte Konfigurasie Voorbeeld:

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

Probleem:

  • SECRET_API_KEY: Sonder die NEXT_PUBLIC_ voorvoegsel, stel Next.js nie veranderlikes aan die kliënt bloot nie. As dit egter per ongeluk met die voorvoegsel (bv. NEXT_PUBLIC_SECRET_API_KEY) gegee word, word dit op die kliëntkant toeganklik.

Hoe aanvallers dit misbruik:

As sensitiewe veranderlikes aan die kliënt blootgestel word, kan aanvallers dit verkry deur die kliëntkant kode of netwerk versoeke te inspekteer, wat ongeoorloofde toegang tot API's, databasisse of ander dienste moontlik maak.

Herleiings

Bestuur URL-herleiings en herskrywings binne jou toepassing, en verseker dat gebruikers toepaslik gelei word sonder om oop herleiingskwesbaarhede in te voer.

a. Oop Herleiingskwesbaarheid

Slegte Konfigurasie Voorbeeld:

javascript
// next.config.js

module.exports = {
async redirects() {
return [
{
source: "/redirect",
destination: (req) => req.query.url, // Dynamically redirects based on query parameter
permanent: false,
},
]
},
}

Probleem:

  • Dinamiese Bestemming: Laat gebruikers enige URL spesifiseer, wat oop herleiding aanvalle moontlik maak.
  • Vertroue op Gebruiker Invoer: Herlei na URL's wat deur gebruikers verskaf word sonder validasie kan lei tot phishing, malware verspreiding, of geloofsbriefdiefstal.

Hoe aanvallers dit misbruik:

Aanvallers kan URL's saamstel wat lyk asof dit van jou domein afkomstig is, maar gebruikers na kwaadwillige webwerwe herlei. Byvoorbeeld:

bash
https://yourdomain.com/redirect?url=https://malicious-site.com

Gebruikers wat die oorspronklike domein vertrou, mag onbewust na skadelike webwerwe navigeer.

Webpack Konfigurasie

Pas Webpack-konfigurasies aan vir jou Next.js-toepassing, wat onbedoeld sekuriteitskwesies kan inbring as dit nie versigtig hanteer word nie.

a. Blootstelling van Sensitiewe Modules

Slegte Konfigurasie Voorbeeld:

javascript
// next.config.js

module.exports = {
webpack: (config, { isServer }) => {
if (!isServer) {
config.resolve.alias["@sensitive"] = path.join(__dirname, "secret-folder")
}
return config
},
}

Probleem:

  • Blootstelling van Sensitiewe Paaie: Aliasing van sensitiewe gidse en toelaat dat kliënt-kant toegang kan vertraag vertroulike inligting.
  • Bundeling van Geheime: As sensitiewe lêers gebundel word vir die kliënt, word hul inhoud toeganklik deur bronkaarte of deur die kliënt-kant kode te ondersoek.

Hoe aanvallers dit misbruik:

Aanvallers kan toegang verkry tot of die aansoek se gidsstruktuur herbou, wat moontlik sensitiewe lêers of data kan vind en misbruik.

pages/_app.js en pages/_document.js

pages/_app.js

Doel: Oorskry die standaard App-komponent, wat globale toestand, style en uitlegkomponente toelaat.

Gebruiksg gevalle:

  • Inspuit van globale CSS.
  • Voeg uitleg wrappers by.
  • Integreer toestandbestuur biblioteke.

Voorbeeld:

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

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

export default MyApp

pages/_document.js

Doel: Oorskry die standaard Dokument, wat aanpassing van die HTML en Body-tags moontlik maak.

Gebruiksg gevalle:

  • Wysig die <html> of <body> tags.
  • Voeg meta-tags of pasgemaakte skripte by.
  • Integreer derdeparty-fonts.

Voorbeeld:

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

Aangepaste Bediener (Opsioneel)

Doel: Terwyl Next.js met 'n ingeboude bediener kom, kan jy 'n aangepaste bediener skep vir gevorderde gebruiksgevalle soos aangepaste roetering of integrasie met bestaande agtergronddienste.

Nota: Die gebruik van 'n aangepaste bediener kan ontplooiingsopsies beperk, veral op platforms soos Vercel wat optimaliseer vir Next.js se ingeboude bediener.

Voorbeeld:

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

Addisionele Argitektoniese en Sekuriteitsoorwegings

Omgewing Veranderlikes en Konfigurasie

Doel: Bestuur sensitiewe inligting en konfigurasie-instellings buite die kodebasis.

Beste Praktyke:

  • Gebruik .env Lêers: Stoor veranderlikes soos API sleutels in .env.local (uitgesluit van weergawebeheer).
  • Toegang tot Veranderlikes Veilig: Gebruik process.env.VARIABLE_NAME om toegang te verkry tot omgewing veranderlikes.
  • Moet Nooit Geheime op die Kliënt Uitsit nie: Verseker dat sensitiewe veranderlikes slegs aan die bedienerkant gebruik word.

Voorbeeld:

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

Nota: Om veranderlikes slegs tot die bediener-kant te beperk, laat hulle uit die env objek of voeg NEXT_PUBLIC_ voor vir kliënt blootstelling.

Verifikasie en Magtiging

Benadering:

  • Sessie-gebaseerde Verifikasie: Gebruik koekies om gebruikersessies te bestuur.
  • Token-gebaseerde Verifikasie: Implementeer JWT's vir staatlose verifikasie.
  • Derdeparty Verskaffers: Integreer met OAuth verskaffers (bv. Google, GitHub) met behulp van biblioteke soos next-auth.

Sekuriteitspraktyke:

  • Veilige Koekies: Stel HttpOnly, Secure, en SameSite eienskappe in.
  • Wagwoord Hashing: Hash altyd wagwoorde voordat jy hulle stoor.
  • Invoer Validasie: Voorkom inspuitaanvalle deur invoere te valideer en te saniteer.

Voorbeeld:

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

Prestasie-optimalisering

Strategies:

  • Beeldoptimalisering: Gebruik Next.js se next/image komponent vir outomatiese beeldoptimalisering.
  • Kode-splitting: Maak gebruik van dinamiese invoer om kode te split en aanvanklike laaitye te verminder.
  • Caching: Implementeer caching-strategieë vir API-antwoorde en statiese bates.
  • Lazy Loading: Laai komponente of bates slegs wanneer hulle nodig is.

Voorbeeld:

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

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

tip

Leer & oefen AWS Hacking:HackTricks Training AWS Red Team Expert (ARTE)
Leer & oefen GCP Hacking: HackTricks Training GCP Red Team Expert (GRTE)

Ondersteun HackTricks