NextJS | HackTricks

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

Ondersteun HackTricks

Kyk na die subskripsie planne!
Sluit aan by die 💬 Discord groep of die telegram groep of volg ons op Twitter 🐦 @hacktricks_live.
Deel hacking truuks deur PRs in te dien na die HackTricks en HackTricks Cloud github repos.

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 routing, API eindpunte, en statiese bates bestuur vergemaklik. Hier is 'n tipiese uitleg:

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 wortelpunt (/).
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 navigasiebalkies 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 uitlegte gebruik kan word.
app/styles/: Bevat globale CSS-lêers en CSS Modules vir komponent-geskepte styl.
app/utils/: Sluit nut funksies, 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 aan 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 Wortelpunt /

Lêer Struktuur:

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

Sleutelfeiles:

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

Implementasie:

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 toon 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:

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

Implementering:

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

Dinamiese Roetes

Dinamiese 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:

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

Implementering:

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 Ünmatching: Enige pad wat pas by /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:

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

Implementering:

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 weerspieël die URL-pad, wat onderhoudbaarheid en duidelikheid verbeter.

Vang-Alle Roetes

Vang-alle roetes hanteer verskeie geneste segmente of onbekende paaie, wat buigsaamheid in roete-hantering bied.

Voorbeeld: /* Roete

Lêerstruktuur:

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

Implementering:

// 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-ooreenkoms: Paaie soos /anything/here, /foo/bar/baz, ens., word deur hierdie komponent hanteer.

Potensiële Kliënt-Kant Kw vulnerabilities

Terwyl Next.js 'n veilige grondslag bied, kan onvanpaste koderingpraktyke kwesbaarhede inbring. Sleutel kliënt-kant 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:

// 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 gebruikersinvoer verkeerd hanteer word in sjablone, wat aanvallers toelaat om sjablone of uitdrukkings in te voeg en uit te voer.

Voorbeeld van Kwetsbare Kode:

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

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

Aanvaller se Doelwit: Voer 'n CSRF-aanval uit om 'n kritieke lêer (bv. admin/config.json) te verwyder deur die filePath te manipuleer.
Eksploitasie van CSPT:

Kwaadaardige Invoer: Die aanvaller skep 'n URL met 'n gemanipuleerde filePath soos ../deleteFile/config.json.
Resultaat API Oproep: Die kliënt-kant 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.

Uitvoering van CSRF:

Gemaakte Skakel: Die aanvaller stuur die slagoffer 'n skakel of inkorporeer 'n kwaadaardige 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ënt-kant laat arbitrêre filePath invoer toe, wat pad traversie 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 deurkruis.

Implementasie:

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

// 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 stel 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 vormindienings.
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 Roetebeheerder

Lêerstruktuur:

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

Implementering:

// 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 geplaas onder die app/api/ gids.
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:

// 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 Eksporte: 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 routering kenmerke soos catch-all roetes en geneste API roetes, wat meer dinamiese en skaalbare API-strukture moontlik maak.

Catch-All Roete Voorbeeld:

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

// 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 bekendgestel het en roeteringsvermoëns verbeter 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:

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

Implementering:

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:

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

Implementering:

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:

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:

Skeiding van Belange: Duidelik skei 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 genade.

CORS Konfigurasie

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

Slegte Konfigurasie Voorbeeld:

// 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 wel dat CORS ook in al die API-roetes gekonfigureer kan word binne die middleware.ts lêer:

// 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 moontlik kwaadwillige webwerwe in staat stel om sonder beperkings met jou API te kommunikeer.
Breë 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 stuur, wat moontlik funksies soos dataherwinning, datamanipulasie, of die ontketening van ongewenste aksies namens geverifieerde gebruikers misbruik.

CORS - Misconfigurations & Bypass

Bedienerkode blootstelling aan 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 maak, die beste manier om te verseker dat 'n lêer van kode nooit in die kliëntkant blootgestel word nie, is deur hierdie invoer aan die begin van die lêer te gebruik:

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, herleiings, of die wysiging van antwoorde moontlik maak.

Uitvoeringsvloei:

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

Voorbeeld Gebruiksg gevalle:

Herlei ongeoutentiseerde gebruikers.
Voeg persoonlike koptekste by.
Log versoeke.

Voorbeeld Konfigurasie:

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

Inhoud Sekuriteitsbeleid (CSP)
X-Frame-Options
X-Content-Type-Options
Streng-Transport-Sekuriteit (HSTS)
Verwysingsbeleid

Voorbeelde:

// 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 sekuriteitskwesbaarhede, soos om onbetroubare bronne toe te laat om kwaadwillige inhoud in te voeg.

Slegte Konfigurasie Voorbeeld:

// 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 enigiemand '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 beeldrendering 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:

// 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) gemerk 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ëntkantkode of netwerkversoeke 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:

// 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 toe om enige URL te spesifiseer, wat oop herleiding aanvalle moontlik maak.
Vertroue op Gebruikersinvoer: 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:

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

Users 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:

// 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: Om sensitiewe gidse te alias en kliënt-kant toegang toe te laat kan vertroulike inligting lek.
Bundeling van Geheime: As sensitiewe lêers vir die kliënt gebundel word, 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 moontlik maak.

Gebruik Gevalle:

Injektering van globale CSS.
Byvoeging van uitleg wrappers.
Integrasie van toestandbestuur biblioteke.

Voorbeeld:

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

// 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 Bediening (Opsioneel)

Doel: Terwyl Next.js 'n ingeboude bediener het, kan jy 'n aangepaste bediener skep vir gevorderde gebruiksgevalle soos aangepaste routering 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:

// 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');
});
});

Bykomende Argitektoniese en Sekuriteitsoorwegings

Omgewingveranderlikes 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 omgewingveranderlikes.
Moet Nooit Geheime op die Kliënt Uitsit nie: Verseker dat sensitiewe veranderlikes slegs aan die bedienerkant gebruik word.

Voorbeeld:

// 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ëntblootstelling.

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:

// 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 verdeel en aanvanklike laaitye te verminder.
Kas: Implementeer kasstrategieë vir API-antwoorde en statiese bates.
Lui Laai: Laai komponente of bates slegs wanneer hulle nodig is.

Voorbeeld:

// Dynamic Import with Code Splitting
import dynamic from 'next/dynamic';

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

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

Ondersteun HackTricks

Kyk na die subskripsieplanne!
Sluit aan by die 💬 Discord-groep of die telegram-groep of volg ons op Twitter 🐦 @hacktricks_live.
Deel hacking truuks deur PRs in te dien na die HackTricks en HackTricks Cloud github repos.

Algemene Argitektuur van 'n Next.js Toepassing

Tipiese Lêerstruktuur

Kern Gidsen en Lêers

Klientkant in Next.js

Lêer-gebaseerde Routering in die app Gids

Potensiële Kliënt-Kant Kw vulnerabilities

Bediener-Kant in Next.js

Bediener-Kant Rendering (SSR)

Statiese Webwerf Generasie (SSG)

Serverless Functions (API Routes)

Basiese Roetebeheerder

Hoe om ander paaie en metodes te hanteer:

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

CORS Konfigurasie

Bedienerkode blootstelling aan Kliëntkant

Sleutel Lêers en Hul Rolle

middleware.ts / middleware.js

next.config.js

pages/_app.js en pages/_document.js

pages/_app.js

pages/_document.js

Aangepaste Bediening (Opsioneel)

Bykomende Argitektoniese en Sekuriteitsoorwegings

Omgewingveranderlikes en Konfigurasie

Verifikasie en Magtiging

Prestasie-optimalisering

Lêer-gebaseerde Routering in die `app` Gids

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

`middleware.ts` / `middleware.js`

`next.config.js`

`pages/_app.js` en `pages/_document.js`

`pages/_app.js`

`pages/_document.js`