NextJS | HackTricks

Learn & practice AWS Hacking:HackTricks Training AWS Red Team Expert (ARTE) Learn & practice GCP Hacking: HackTricks Training GCP Red Team Expert (GRTE)

Support HackTricks

Check the subscription plans!
Join the 💬 Discord group or the telegram group or follow us on Twitter 🐦 @hacktricks_live.
Share hacking tricks by submitting PRs to the HackTricks and HackTricks Cloud github repos.

Msingi wa Jumla wa Programu ya Next.js

Muundo wa Kawaida wa Faili

Mradi wa kawaida wa Next.js unafuata muundo maalum wa faili na saraka ambao unarahisisha vipengele vyake kama vile urambazaji, mwisho wa API, na usimamizi wa mali za statiki. Hapa kuna mpangilio wa kawaida:

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

Core Directories and Files

public/: Inahifadhi mali za statiki kama picha, fonti, na faili nyingine. Faili hapa zinapatikana kwenye njia ya mzizi (/).
app/: Kituo cha saraka kwa kurasa, muundo, vipengele, na njia za API za programu yako. Inakumbatia dhana ya App Router, ikiruhusu vipengele vya hali ya juu vya usafirishaji na mgawanyiko wa vipengele vya seva-mteja.
app/layout.tsx: Inaelezea muundo wa mzizi wa programu yako, ikizunguka kurasa zote na kutoa vipengele vya UI vinavyofanana kama vichwa, miguu, na baa za urambazaji.
app/page.tsx: Inatumika kama kiingilio kwa njia ya mzizi /, ikionyesha ukurasa wa nyumbani.
app/[route]/page.tsx: Inashughulikia njia za statiki na za dinamik. Kila folda ndani ya app/ inawakilisha sehemu ya njia, na page.tsx ndani ya folda hizo inahusiana na kipengele cha njia.
app/api/: Inajumuisha njia za API, ikiruhusu kuunda kazi zisizo na seva zinazoshughulikia maombi ya HTTP. Njia hizi zinachukua nafasi ya saraka ya jadi pages/api.
app/components/: Inahifadhi vipengele vya React vinavyoweza kutumika tena katika kurasa na muundo tofauti.
app/styles/: Inajumuisha faili za CSS za kimataifa na Moduli za CSS kwa ajili ya uandaaji wa mtindo wa kipengele.
app/utils/: Inajumuisha kazi za matumizi, moduli za msaada, na mantiki nyingine zisizo za UI ambazo zinaweza kushirikiwa katika programu.
.env.local: Inahifadhi mabadiliko ya mazingira maalum kwa mazingira ya maendeleo ya ndani. Mabadiliko haya hayajatumika kwenye udhibiti wa toleo.
next.config.js: Inaboresha tabia ya Next.js, ikiwa ni pamoja na usanidi wa webpack, mabadiliko ya mazingira, na mipangilio ya usalama.
tsconfig.json: Inapanga mipangilio ya TypeScript kwa mradi, ikiruhusu ukaguzi wa aina na vipengele vingine vya TypeScript.
package.json: Inasimamia utegemezi wa mradi, skripti, na metadata.
README.md: Inatoa nyaraka na taarifa kuhusu mradi, ikiwa ni pamoja na maelekezo ya usanidi, miongozo ya matumizi, na maelezo mengine muhimu.
yarn.lock / package-lock.json: Inafunga utegemezi wa mradi kwa toleo maalum, kuhakikisha usakinishaji thabiti katika mazingira tofauti.

Client-Side in Next.js

File-Based Routing in the `app` Directory

Sarakani ya app ni msingi wa usafirishaji katika toleo jipya la Next.js. Inatumia mfumo wa faili kufafanua njia, ikifanya usimamizi wa njia kuwa rahisi na wa kupanuka.

Handling the Root Path /

File Structure:

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

Key Files:

app/page.tsx: Inashughulikia maombi kwa njia ya mizizi /.
app/layout.tsx: Inaelezea mpangilio wa programu, ikizunguka kurasa zote.

Implementation:

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

Maelezo:

Mwelekeo wa Njia: Faili page.tsx iliyo moja kwa moja chini ya saraka ya app inahusiana na njia ya /.
Uwasilishaji: Komponenti hii inatoa maudhui ya ukurasa wa nyumbani.
Ujumuishaji wa Mpangilio: Komponenti ya HomePage imefungwa na layout.tsx, ambayo inaweza kujumuisha vichwa, miguu, na vipengele vingine vya kawaida.

Kushughulikia Njia Nyingine za Kawaida

Mfano: Njia ya /about

Muundo wa Faili:

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

Utekelezaji:

// app/about/page.tsx

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

Maelezo:

Mwelekeo wa Njia: Faili ya page.tsx ndani ya folda ya about inahusiana na njia ya /about.
Uwasilishaji: Komponenti hii inatoa maudhui ya ukurasa wa kuhusu.

Njia za Kijidudu

Njia za kijidudu zinaruhusu kushughulikia njia zenye sehemu zinazobadilika, na kuwezesha programu kuonyesha maudhui kulingana na vigezo kama vitambulisho, slugs, n.k.

Mfano: Njia ya /posts/[id]

Muundo wa Faili:

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

Utekelezaji:

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

Maelezo:

Sehemu ya Kijani: [id] inaashiria sehemu ya kijani katika njia, ikichukua parameter ya id kutoka kwa URL.
Kufikia Parameta: Kitu cha params kina parameta za kijani, zinazoweza kufikiwa ndani ya kipengee.
Kulinganisha Njia: Njia yoyote inayolingana na /posts/*, kama vile /posts/1, /posts/abc, nk, itashughulikiwa na kipengee hiki.

Njia Zilizopangwa Ndani

Next.js inasaidia njia zilizopangwa ndani, ikiruhusu muundo wa njia wa kihierarkia unaofanana na mpangilio wa saraka.

Mfano: /dashboard/settings/profile Njia

Muundo wa Faili:

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

Utekelezaji:

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

Maelezo:

Upeo wa Kina: Faili page.tsx ndani ya dashboard/settings/profile/ inahusiana na njia ya /dashboard/settings/profile.
Kuhakikishiwa kwa Hifadhi: Muundo wa saraka unaakisi njia ya URL, ukiongeza uwezo wa kudumisha na uwazi.

Njia za Kukamata Zote

Njia za kukamata zote hushughulikia sehemu nyingi zilizozungukwa au njia zisizojulikana, zikitoa kubadilika katika usimamizi wa njia.

Mfano: Njia /*

Muundo wa Faili:

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

Utekelezaji:

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

Maelezo:

Sehemu ya Catch-All: [...slug] inakamata sehemu zote zilizobaki za njia kama array.
Matumizi: Inafaida kwa kushughulikia hali za urambazaji wa dinamik kama vile njia zinazozalishwa na mtumiaji, makundi yaliyo ndani, n.k.
Mechi ya Njia: Njia kama /anything/here, /foo/bar/baz, n.k., zinashughulikiwa na kipengele hiki.

Uwezekano wa Uhalifu wa Kliendi

Ingawa Next.js inatoa msingi salama, mbinu mbaya za uandishi zinaweza kuleta uhalifu. Uhalifu muhimu wa upande wa mteja ni pamoja na:

Cross-Site Scripting (XSS)

XSS inatokea wakati skripti mbaya zinapowekwa kwenye tovuti zinazotegemewa. Washambuliaji wanaweza kutekeleza skripti kwenye vivinjari vya watumiaji, wakipora data au kufanya vitendo kwa niaba ya mtumiaji.

Mfano wa Kanuni Ilioathirika:

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

Kwa Nini Inahatarisha: Kutumia dangerouslySetInnerHTML na pembejeo zisizoaminika kunaruhusu washambuliaji kuingiza scripts zenye uharibifu.

Kuingiza Kiolezo Kwenye Upande wa Mteja

Hutokea wakati pembejeo za mtumiaji hazishughulikiwi ipasavyo katika kiolezo, kuruhusu washambuliaji kuingiza na kutekeleza violezo au maelezo.

Mfano wa Kanuni Inayohatarisha:

import React from 'react';
import ejs from 'ejs';

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

Kwa Nini Inahatarisha: Ikiwa template au data inajumuisha maudhui mabaya, inaweza kusababisha utekelezaji wa msimbo usio kusudiwa.

Safari ya Mteja ya Kupita

Ni udhaifu unaowezesha washambuliaji kubadilisha njia za upande wa mteja ili kufanya vitendo visivyo kusudiwa, kama vile Cross-Site Request Forgery (CSRF). Tofauti na safari ya kupita upande wa seva, ambayo inalenga mfumo wa faili wa seva, CSPT inazingatia kutumia mitambo ya upande wa mteja ili kuelekeza maombi halali ya API kwa maeneo mabaya.

Mfano wa Msimbo Ulio na Udhaifu:

Programu ya Next.js inaruhusu watumiaji kupakia na kupakua faili. Kipengele cha kupakua kimewekwa kwenye upande wa mteja, ambapo watumiaji wanaweza kubainisha njia ya faili ya kupakua.

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

Attack Scenario

Attacker's Objective: Fanya shambulio la CSRF kufuta faili muhimu (mfano, admin/config.json) kwa kubadilisha filePath.
Exploiting CSPT:

Malicious Input: Mshambuliaji anaunda URL yenye filePath iliyobadilishwa kama ../deleteFile/config.json.
Resulting API Call: Kode ya upande wa mteja inafanya ombi kwa /api/files/../deleteFile/config.json.
Server's Handling: Ikiwa seva haitathmini filePath, inashughulikia ombi hilo, huenda ikafuta au kufichua faili nyeti.

Executing CSRF:

Crafted Link: Mshambuliaji anamtumia mwathirika kiungo au kuingiza script mbaya inayosababisha ombi la kupakua kwa filePath iliyobadilishwa.
Outcome: Mwathirika anatekeleza kitendo hicho bila kujua, na kusababisha ufikiaji au ufutaji wa faili usioidhinishwa.

Why It's Vulnerable

Lack of Input Validation: Upande wa mteja unaruhusu pembejeo za filePath zisizo na mipaka, zinazowezesha kupita njia.
Trusting Client Inputs: API ya upande wa seva inategemea na kushughulikia filePath bila kusafisha.
Potential API Actions: Ikiwa mwisho wa API unafanya vitendo vinavyobadilisha hali (mfano, kufuta, kubadilisha faili), inaweza kutumika vibaya kupitia CSPT.

Server-Side in Next.js

Server-Side Rendering (SSR)

Kurasa zinatengenezwa kwenye seva kwa kila ombi, kuhakikisha kwamba mtumiaji anapata HTML iliyotengenezwa kikamilifu. Katika kesi hii unapaswa kuunda seva yako ya kawaida kushughulikia maombi.

Use Cases:

Maudhui ya kidinamikia yanayobadilika mara kwa mara.
Uboreshaji wa SEO, kwani injini za utafutaji zinaweza kuchambua ukurasa ulioandikwa kikamilifu.

Implementation:

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

Static Site Generation (SSG)

Kurasa zinatayarishwa kabla ya wakati wa kujenga, na kusababisha nyakati za upakiaji haraka na kupunguza mzigo wa seva.

Matumizi:

Maudhui ambayo hayabadilika mara kwa mara.
Blogu, nyaraka, kurasa za masoko.

Utekelezaji:

// 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 inaruhusu uundaji wa mwisho wa API kama kazi zisizo na seva. Kazi hizi zinafanyika kwa mahitaji bila haja ya seva maalum.

Matumizi:

Kushughulikia uwasilishaji wa fomu.
Kuingiliana na hifadhidata.
Kusaidia data au kuunganishwa na APIs za wahusika wengine.

Utekelezaji:

Kwa kuanzishwa kwa saraka ya app katika Next.js 13, urambazaji na usimamizi wa API umekuwa rahisi na wenye nguvu zaidi. Njia hii ya kisasa inalingana kwa karibu na mfumo wa urambazaji wa faili lakini inatoa uwezo ulioimarishwa, ikiwa ni pamoja na msaada wa sehemu za seva na mteja.

Mshughulikiaji wa Njia ya Msingi

Muundo wa Faili:

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

Utekelezaji:

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

Maelezo:

Mahali: Njia za API ziko chini ya saraka ya app/api/.
Ujumbe wa Faili: Kila mwisho wa API unapatikana katika saraka yake mwenyewe inayojumuisha faili la route.js au route.ts.
Kazi Zilizotolewa: Badala ya uhamisho mmoja wa kawaida, kazi maalum za mbinu za HTTP (mfano, GET, POST) zinahamishwa.
Usimamizi wa Majibu: Tumia mjenzi wa Response kurudisha majibu, ikiruhusu udhibiti zaidi juu ya vichwa na msimbo wa hali.

Jinsi ya kushughulikia njia na mbinu nyingine:

Kushughulikia Mbinu Maalum za HTTP

Next.js 13+ inakuwezesha kufafanua wasimamizi wa mbinu maalum za HTTP ndani ya faili moja ya route.js au route.ts, ikihamasisha msimbo ulio wazi na uliopangwa vizuri.

Mfano:

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

Maelezo:

Mizigo Mingi: Kila njia ya HTTP (GET, PUT, DELETE) ina kazi yake iliyosafirishwa.
Vigezo: Hoja ya pili inatoa ufikiaji wa vigezo vya njia kupitia params.
Majibu Yaliyoimarishwa: Udhibiti mkubwa zaidi juu ya vitu vya majibu, kuruhusu usimamizi sahihi wa kichwa na msimbo wa hali.

Njia za Catch-All na Njia za Ndani

Next.js 13+ inasaidia vipengele vya juu vya njia kama njia za catch-all na njia za API za ndani, kuruhusu muundo wa API wenye nguvu na unaoweza kupanuka.

Mfano wa Njia ya Catch-All:

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

Maelezo:

Sintaksia: [...] inamaanisha sehemu ya kukamata yote, ikichukua njia zote zilizozungukwa.
Matumizi: Inafaida kwa APIs ambazo zinahitaji kushughulikia kina tofauti za njia au sehemu za kidinamik.

Mfano wa Njia Zilizozungukwa:

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

Maelezo:

Kuweka Ndani kwa Kina: Inaruhusu muundo wa API wa kihierarkia, unaoonyesha uhusiano wa rasilimali.
Upatikanaji wa Vigezo: Rahisi kupata vigezo vingi vya njia kupitia kituo cha params.

Kushughulikia njia za API katika Next.js 12 na Zamani

Njia za API katika Katalogi ya `pages` (Next.js 12 na Zamani)

Kabla ya Next.js 13 kuanzisha katalogi ya app na kuboresha uwezo wa njia, njia za API zilikuwa zikiainishwa hasa ndani ya katalogi ya pages. Njia hii bado inatumika sana na inaungwa mkono katika Next.js 12 na toleo la zamani.

Njia ya Msingi ya API

Muundo wa Faili:

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

Utekelezaji:

javascriptCopy code// pages/api/hello.js

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

Maelezo:

Mahali: Njia za API zinapatikana chini ya saraka pages/api/.
Usafirishaji: Tumia export default kufafanua kazi ya kushughulikia.
Saini ya Kazi: Kazi ya kushughulikia inapata vitu req (ombio la HTTP) na res (jibu la HTTP).
Uelekezaji: Jina la faili (hello.js) linafanana na kiunganishi /api/hello.

Njia za API za Kijadi

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

Utekelezaji:

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

Maelezo:

Sehemu za Kijidudu: Mipaka ya mraba ([id].js) inaashiria sehemu za njia za kijidudu.
Kupata Parameta: Tumia req.query.id kupata parameta ya kijidudu.
Kushughulikia Mbinu: Tumia mantiki ya masharti kushughulikia mbinu tofauti za HTTP (GET, PUT, DELETE, n.k.).

Kushughulikia Mbinu Tofauti za HTTP

Wakati mfano wa msingi wa njia ya API unashughulikia mbinu zote za HTTP ndani ya kazi moja, unaweza kuunda muundo wa msimbo wako kushughulikia kila mbinu kwa uwazi zaidi na kudumisha.

Mfano:

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

Best Practices:

Separation of Concerns: Tenganisha wazi mantiki kwa njia tofauti za HTTP.
Response Consistency: Hakikisha muundo wa majibu ni thabiti kwa urahisi wa kushughulikia upande wa mteja.
Error Handling: Shughulikia kwa ustadi mbinu zisizoungwa mkono na makosa yasiyotarajiwa.

CORS Configuration

Dhibiti ni vyanzo gani vinaweza kufikia njia zako za API, kupunguza hatari za Cross-Origin Resource Sharing (CORS).

Bad Configuration Example:

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

Kumbuka kwamba CORS pia inaweza kuanzishwa katika njia zote za API ndani ya faili ya 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
};

Problem:

Access-Control-Allow-Origin: '*': Inaruhusu tovuti yoyote kufikia API, ambayo inaweza kuruhusu tovuti mbaya kuingiliana na API yako bila vizuizi.
Wide Method Allowance: Kuruhusu mbinu zote kunaweza kuwezesha washambuliaji kufanya vitendo visivyotakiwa.

How attackers exploit it:

Washambuliaji wanaweza kuunda tovuti mbaya zinazofanya maombi kwa API yako, ambazo zinaweza kutumia kazi kama vile ufuatiliaji wa data, urekebishaji wa data, au kuanzisha vitendo visivyotakiwa kwa niaba ya watumiaji walioidhinishwa.

CORS - Misconfigurations & Bypass

Server code exposure in Client Side

Ni rahisi kutumia msimbo unaotumiwa na seva pia katika msimbo ulio wazi na kutumiwa na upande wa mteja, njia bora ya kuhakikisha kuwa faili ya msimbo haitawahi kufichuliwa katika upande wa mteja ni kwa kutumia uagizaji huu mwanzoni mwa faili:

import "server-only";

Key Files and Their Roles

`middleware.ts` / `middleware.js`

Location: Mizizi ya mradi au ndani ya src/.

Purpose: Inatekeleza msimbo katika kazi isiyo na seva upande wa seva kabla ya ombi kushughulikiwa, ikiruhusu kazi kama uthibitishaji, kuelekeza, au kubadilisha majibu.

Execution Flow:

Incoming Request: Middleware inakamata ombi.
Processing: Inatekeleza operesheni kulingana na ombi (mfano, angalia uthibitishaji).
Response Modification: Inaweza kubadilisha jibu au kupitisha udhibiti kwa mpangaji anayefuata.

Example Use Cases:

Kuelekeza watumiaji wasio na uthibitisho.
Kuongeza vichwa vya kawaida.
Kurekodi maombi.

Sample Configuration:

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(req: NextRequest) {
const url = req.nextUrl.clone();
if (!req.cookies.has('token')) {
url.pathname = '/login';
return NextResponse.redirect(url);
}
return NextResponse.next();
}

export const config = {
matcher: ['/protected/:path*'],
};

`next.config.js`

Location: Mizizi ya mradi.

Purpose: Inapanga tabia ya Next.js, ikiwasha au kuzima vipengele, kubinafsisha mipangilio ya webpack, kuweka mabadiliko ya mazingira, na kupanga vipengele kadhaa vya usalama.

Key Security Configurations:

Security Headers

Vichwa vya usalama vinaboresha usalama wa programu yako kwa kuelekeza vivinjari jinsi ya kushughulikia maudhui. Vinasaidia kupunguza mashambulizi mbalimbali kama vile Cross-Site Scripting (XSS), Clickjacking, na MIME type sniffing:

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

Examples:

// 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...
],
},
];
},
};

Image Optimization Settings

Next.js inaboresha picha kwa utendaji, lakini mipangilio isiyo sahihi inaweza kusababisha udhaifu wa usalama, kama kuruhusu vyanzo visivyoaminika kuingiza maudhui mabaya.

Bad Configuration Example:

// next.config.js

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

Tatizo:

'*': Inaruhusu picha kupakuliwa kutoka chanzo chochote cha nje, ikiwa ni pamoja na maeneo yasiyoaminika au ya uhalifu. Washambuliaji wanaweza kuhifadhi picha zenye mzigo wa uhalifu au maudhui yanayopotosha watumiaji.
Tatizo lingine linaweza kuwa kuruhusu eneo ambalo mtu yeyote anaweza kupakia picha (kama raw.githubusercontent.com)

Jinsi washambuliaji wanavyolitumia:

Kwa kuingiza picha kutoka vyanzo vya uhalifu, washambuliaji wanaweza kufanya mashambulizi ya phishing, kuonyesha taarifa zinazopotosha, au kutumia udhaifu katika maktaba za uwasilishaji wa picha.

Ufunuo wa Mabadiliko ya Mazingira

Simamia taarifa nyeti kama funguo za API na akidi za database kwa usalama bila kuzifunua kwa mteja.

a. Kufichua Mabadiliko Nyeti

Mfano Mbaya wa Usanidi:

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

Tatizo:

SECRET_API_KEY: Bila kiambishi NEXT_PUBLIC_, Next.js haitoi mabadiliko kwa mteja. Hata hivyo, ikiwa kwa bahati mbaya imewekwa kiambishi (mfano, NEXT_PUBLIC_SECRET_API_KEY), inakuwa inapatikana upande wa mteja.

Jinsi washambuliaji wanavyotumia hili:

Ikiwa mabadiliko nyeti yanapatikana kwa mteja, washambuliaji wanaweza kuyapata kwa kuchunguza msimbo wa upande wa mteja au maombi ya mtandao, wakipata ufikiaji usioidhinishwa kwa APIs, hifadhidata, au huduma nyingine.

Rejeo

Simamisha mwelekeo wa URL na uandishi ndani ya programu yako, kuhakikisha kwamba watumiaji wanapelekwa ipasavyo bila kuanzisha udhaifu wa rejeo wazi.

a. Udhaifu wa Rejeo Wazi

Mfano Mbaya wa Usanidi:

// next.config.js

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

Tatizo:

Kikundi Kinachobadilika: Kinawaruhusu watumiaji kubaini URL yoyote, na kuwezesha mashambulizi ya kuhamasisha.
Kukubali Kuingiza kwa Mtumiaji: Kupeleka kwenye URL zinazotolewa na watumiaji bila uthibitisho kunaweza kusababisha udukuzi, usambazaji wa programu hasidi, au wizi wa akidi.

Jinsi washambuliaji wanavyotumia:

Washambuliaji wanaweza kuunda URL ambazo zinaonekana kama zinatoka kwenye eneo lako lakini zinaelekeza watumiaji kwenye tovuti zenye uharibifu. Kwa mfano:

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

Watumiaji wanaweza kuamini jina la kikoa la asili na bila kujua kuingia kwenye tovuti hatari.

Webpack Configuration

Binafsisha mipangilio ya Webpack kwa programu yako ya Next.js, ambayo inaweza kuanzisha udhaifu wa usalama ikiwa haitashughulikiwa kwa uangalifu.

a. Kuonyesha Moduli Nyeti

Mfano Mbaya wa Mipangilio:

// next.config.js

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

Problem:

Kufichua Njia Nyeti: Kuunda majina ya saraka nyeti na kuruhusu ufikiaji wa upande wa mteja kunaweza kufichua taarifa za siri.
Kufunga Siri: Ikiwa faili nyeti zimefungwa kwa mteja, maudhui yao yanakuwa yanaweza kupatikana kupitia ramani za chanzo au kuchunguza msimbo wa upande wa mteja.

How attackers abuse it:

Wavamizi wanaweza kufikia au kujenga upya muundo wa saraka ya programu, huenda wakapata na kutumia faili au data nyeti.

`pages/_app.js` and `pages/_document.js`

`pages/_app.js`

Purpose: Inabadilisha kipengee cha App cha kawaida, kuruhusu hali ya kimataifa, mitindo, na vipengee vya mpangilio.

Use Cases:

Kuingiza CSS ya kimataifa.
Kuongeza vifungashio vya mpangilio.
Kuunganisha maktaba za usimamizi wa hali.

Example:

// pages/_app.js
import '../styles/globals.css';

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

export default MyApp;

`pages/_document.js`

Madhumuni: Inabadilisha Hati ya Kawaida, ikiruhusu kubadilisha lebo za HTML na Mwili.

Matumizi:

Kubadilisha lebo za <html> au <body>.
Kuongeza lebo za meta au scripts za kawaida.
Kuunganisha fonts za wahusika wengine.

Mfano:

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

Custom Server (Optional)

Purpose: Wakati Next.js inakuja na seva iliyojengwa ndani, unaweza kuunda seva ya kawaida kwa matumizi ya juu kama vile urambazaji wa kawaida au kuunganisha na huduma za nyuma zilizopo.

Note: Kutumia seva ya kawaida kunaweza kupunguza chaguzi za kutekeleza, hasa kwenye majukwaa kama Vercel ambayo yanaboresha seva iliyojengwa ndani ya Next.js.

Example:

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

Maoni ya Ziada ya Mjenzi na Usalama

Mabadiliko ya Mazingira na Mipangilio

Madhumuni: Kudhibiti taarifa nyeti na mipangilio nje ya msingi wa msimbo.

Mbinu Bora:

Tumia Faili za .env: Hifadhi mabadiliko kama funguo za API katika .env.local (imeondolewa kwenye udhibiti wa toleo).
Fikia Mabadiliko kwa Usalama: Tumia process.env.VARIABLE_NAME kufikia mabadiliko ya mazingira.
Usiweke Siri wazi kwa Mteja: Hakikisha kwamba mabadiliko nyeti yanatumika tu upande wa seva.

Mfano:

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

Kumbuka: Ili kuzuia mabadiliko kuwa upande wa seva pekee, acha kutoka kwenye kitu env au ongeza prefiksi NEXT_PUBLIC_ kwa ajili ya kufichua kwa mteja.

Uthibitishaji na Uidhinishaji

Mbinu:

Uthibitishaji wa Kikao: Tumia vidakuzi kusimamia vikao vya watumiaji.
Uthibitishaji wa Token: Tekeleza JWTs kwa uthibitishaji usio na hali.
Watoa Huduma wa Tatu: Unganisha na watoa huduma wa OAuth (mfano, Google, GitHub) kwa kutumia maktaba kama next-auth.

Mifano ya Usalama:

Vidakuzi Salama: Weka sifa za HttpOnly, Secure, na SameSite.
Kuhifadhi Nywila: Daima hifadhi nywila kabla ya kuzihifadhi.
Uthibitishaji wa Ingizo: Zuia mashambulizi ya kuingiza kwa kuthibitisha na kusafisha ingizo.

Mfano:

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

Performance Optimization

Strategies:

Image Optimization: Tumia kipengele cha next/image cha Next.js kwa ajili ya kuboresha picha kiotomatiki.
Code Splitting: Tumia uagizaji wa dinamik kuigawanya msimbo na kupunguza muda wa mzigo wa awali.
Caching: Tekeleza mikakati ya caching kwa majibu ya API na mali za statiki.
Lazy Loading: Pakia vipengele au mali tu wakati zinahitajika.

Example:

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

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

Jifunze na fanya mazoezi ya AWS Hacking:HackTricks Training AWS Red Team Expert (ARTE) Jifunze na fanya mazoezi ya GCP Hacking: HackTricks Training GCP Red Team Expert (GRTE)

Support HackTricks

Angalia mpango wa usajili!
Jiunge na 💬 kikundi cha Discord au kikundi cha telegram au tufuatilie kwenye Twitter 🐦 @hacktricks_live.
Shiriki mbinu za hacking kwa kuwasilisha PRs kwa HackTricks na HackTricks Cloud repos za github.

Msingi wa Jumla wa Programu ya Next.js

Muundo wa Kawaida wa Faili

Core Directories and Files

Client-Side in Next.js

File-Based Routing in the app Directory

Uwezekano wa Uhalifu wa Kliendi

Server-Side in Next.js

Server-Side Rendering (SSR)

Static Site Generation (SSG)

Serverless Functions (API Routes)

Mshughulikiaji wa Njia ya Msingi

Jinsi ya kushughulikia njia na mbinu nyingine:

Njia za API katika Katalogi ya pages (Next.js 12 na Zamani)

CORS Configuration

Server code exposure in Client Side

Key Files and Their Roles

middleware.ts / middleware.js

next.config.js

pages/_app.js and pages/_document.js

pages/_app.js

pages/_document.js

Custom Server (Optional)

Maoni ya Ziada ya Mjenzi na Usalama

Mabadiliko ya Mazingira na Mipangilio

Uthibitishaji na Uidhinishaji

Performance Optimization

File-Based Routing in the `app` Directory

Njia za API katika Katalogi ya `pages` (Next.js 12 na Zamani)

`middleware.ts` / `middleware.js`

`next.config.js`

`pages/_app.js` and `pages/_document.js`

`pages/_app.js`

`pages/_document.js`