Struktura Fajlova:

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

Ključne datoteke:

• app/page.tsx: Obradjuje zahteve za korenski put /.
• app/layout.tsx: Definiše raspored za aplikaciju, obavijajući sve stranice.

Implementacija:

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

Objašnjenje:

• Definicija Rute: Datoteka page.tsx direktno ispod app direktorijuma odgovara / ruti.
• Renderovanje: Ova komponenta renderuje sadržaj za početnu stranu.
• Integracija Rasporeda: HomePage komponenta je obavijena layout.tsx, koja može uključivati zaglavlja, podnožja i druge zajedničke elemente.

Primer: /about Ruta

Struktura Datoteka:

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

Implementacija:

// app/about/page.tsx

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

Objašnjenje:

• Definicija Rute: Datoteka page.tsx unutar about foldera odgovara ruti /about.
• Renderovanje: Ova komponenta renderuje sadržaj za stranicu o nama.

Dinamičke rute omogućavaju rukovanje putanjama sa promenljivim segmentima, omogućavajući aplikacijama da prikazuju sadržaj na osnovu parametara kao što su ID-ovi, slugovi, itd.

Primer: /posts/[id] Ruta

Struktura Datoteka:

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

Implementacija:

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

Objašnjenje:

• Dinamički Segment: [id] označava dinamički segment u ruti, hvatajući id parametar iz URL-a.
• Pristup Parametrima: params objekat sadrži dinamičke parametre, dostupne unutar komponente.
• Usklađivanje Ruta: Svaka putanja koja odgovara /posts/*, kao što su /posts/1, /posts/abc, itd., biće obrađena od strane ove komponente.

Next.js podržava ugnježdene rute, omogućavajući hijerarhijske strukture ruta koje odražavaju raspored direktorijuma.

Primer: /dashboard/settings/profile Ruta

Struktura Fajlova:

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

Implementacija:

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

Objašnjenje:

• Duboko Ugnježdenje: Datoteka page.tsx unutar dashboard/settings/profile/ odgovara ruti /dashboard/settings/profile.
• Refleksija Hijerarhije: Struktura direktorijuma odražava URL putanju, poboljšavajući održivost i jasnoću.

Catch-all rute obrađuju više ugnježdenih segmenata ili nepoznatih putanja, pružajući fleksibilnost u obradi ruta.

Primer: /* Ruta

Struktura Datoteka:

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

Implementacija:

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

Objašnjenje:

• Catch-All Segment: [...slug] hvata sve preostale delove putanje kao niz.
• Upotreba: Korisno za rukovanje dinamičkim rutiranjem kao što su putanje koje generišu korisnici, ugnježdene kategorije, itd.
• Usklađivanje Ruta: Putanje kao što su /anything/here, /foo/bar/baz, itd., se obrađuju ovim komponentom.

XSS napadi se dešavaju kada se zlonamerni skripti ubacuju u pouzdane veb sajtove. Napadači mogu izvršavati skripte u pregledačima korisnika, kradući podatke ili obavljajući radnje u ime korisnika.

Primer Ranjivog Koda:

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

Zašto je ranjivo: Korišćenje dangerouslySetInnerHTML sa nepouzdanim ulazima omogućava napadačima da ubace zlonamerne skripte.

Događa se kada se korisnički unosi nepravilno obrađuju u šablonima, omogućavajući napadačima da ubace i izvrše šablone ili izraze.

Primer ranjivog koda:

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

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

Zašto je ranjiv: Ako template ili data sadrže zlonamerni sadržaj, to može dovesti do izvršenja nepredviđenog koda.

To je ranjivost koja omogućava napadačima da manipulišu putanjama na klijentskoj strani kako bi izvršili nepredviđene radnje, kao što je Cross-Site Request Forgery (CSRF). Za razliku od server-side path traversal, koja cilja na datotečni sistem servera, CSPT se fokusira na iskorišćavanje mehanizama na klijentskoj strani kako bi preusmerio legitimne API zahteve na zlonamerne krajnje tačke.

Primer ranjivog koda:

Next.js aplikacija omogućava korisnicima da otpremaju i preuzimaju datoteke. Funkcija preuzimanja je implementirana na klijentskoj strani, gde korisnici mogu da navedu putanju datoteke za preuzimanje.

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

Napadni Scenarijo

1. Cilj Napadača: Izvršiti CSRF napad da obriše kritičnu datoteku (npr., admin/config.json) manipulišući filePath.
2. Iskorišćavanje CSPT:

• Zlonamerni Unos: Napadač kreira URL sa manipulisanom filePath kao što je ../deleteFile/config.json.
• Rezultantni API Poziv: Klijentski kod šalje zahtev na /api/files/../deleteFile/config.json.
• Rukovanje Servera: Ako server ne validira filePath, obrađuje zahtev, potencijalno brišući ili izlažući osetljive datoteke.

3. Izvršavanje CSRF:

• Kreirana Veza: Napadač šalje žrtvi vezu ili ugrađuje zlonamerni skript koji pokreće zahtev za preuzimanje sa manipulisanom filePath.
• Ishod: Žrtva nesvesno izvršava akciju, što dovodi do neovlašćenog pristupa ili brisanja datoteka.

Zašto je Ranjiv

• Nedostatak Validacije Unosa: Klijentska strana dozvoljava proizvoljne filePath unose, omogućavajući prelazak putanje.
• Verovanje Klijentskim Unosima: Server-side API veruje i obrađuje filePath bez sanitizacije.
• Potencijalne API Akcije: Ako API krajnja tačka izvršava akcije koje menjaju stanje (npr., brisanje, modifikovanje datoteka), može se iskoristiti putem CSPT.

Next.js 13+ omogućava vam da definišete handler-e za specifične HTTP metode unutar istog route.js ili route.ts fajla, promovišući jasniji i organizovaniji kod.

Primer:

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

Objašnjenje:

• Višestruki Izvozi: Svaka HTTP metoda (GET, PUT, DELETE) ima svoju funkciju za izvoz.
• Parametri: Drugi argument omogućava pristup parametrima rute putem params.
• Poboljšani Odgovori: Veća kontrola nad objektima odgovora, omogućavajući precizno upravljanje zaglavljem i statusnim kodom.

Next.js 13+ podržava napredne funkcije usmeravanja kao što su catch-all rute i ugnježdene API rute, omogućavajući dinamičnije i skalabilnije API strukture.

Primer Catch-All Rute:

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

Objašnjenje:

• Sintaksa: [...] označava segment koji obuhvata sve, hvatajući sve ugnježdene putanje.
• Upotreba: Korisno za API-je koji treba da obrade različite dubine ruta ili dinamičke segmente.

Primer ugnježdenih ruta:

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

Objašnjenje:

• Duboko Ugnježdenje: Omogućava hijerarhijske API strukture, odražavajući odnose resursa.
• Pristup Parametrima: Lako pristupite više parametara rute putem params objekta.

API Rute u pages direktorijumu (Next.js 12 i ranije)

Pre nego što je Next.js 13 uveo app direktorijum i poboljšane mogućnosti rutiranja, API rute su se prvenstveno definisale unutar pages direktorijuma. Ovaj pristup se i dalje široko koristi i podržava u Next.js 12 i ranijim verzijama.

Osnovna API Ruta

Struktura Fajlova:

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

Implementacija:

javascriptCopy code// pages/api/hello.js

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

Objašnjenje:

• Lokacija: API rute se nalaze u pages/api/ direktorijumu.
• Izvoz: Koristite export default da definišete funkciju handler.
• Potpis funkcije: Handler prima req (HTTP zahtev) i res (HTTP odgovor) objekte.
• Ruting: Ime fajla (hello.js) se mapira na krajnju tačku /api/hello.

Dinamičke API Rute

Struktura fajla:

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

Implementacija:

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

Objašnjenje:

• Dinamički segmenti: Kvadratne zagrade ([id].js) označavaju dinamičke delove rute.
• Pristup parametrima: Koristite req.query.id za pristup dinamičkom parametru.
• Rukovanje metodama: Iskoristite uslovnu logiku za rukovanje različitim HTTP metodama (GET, PUT, DELETE, itd.).

Rukovanje različitim HTTP metodama

Dok osnovni primer API rute obrađuje sve HTTP metode unutar jedne funkcije, možete strukturirati svoj kod da obrađuje svaku metodu eksplicitno radi bolje jasnoće i održivosti.

Primer:

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

Najbolje Prakse:

• Razdvajanje Odgovornosti: Jasno razdvojiti logiku za različite HTTP metode.
• Doslednost Odgovora: Osigurati dosledne strukture odgovora radi lakšeg rukovanja na klijentskoj strani.
• Rukovanje Greškama: Elegantno obraditi nepodržane metode i neočekivane greške.

Bezbednosna zaglavlja poboljšavaju bezbednost vaše aplikacije tako što upućuju pretraživače kako da rukuju sadržajem. Pomažu u ublažavanju raznih napada kao što su Cross-Site Scripting (XSS), Clickjacking i MIME type sniffing:

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

Primeri:

// next.config.js

module.exports = {
async headers() {
return [
{
source: "/(.*)", // Apply to all routes
headers: [
{
key: "X-Frame-Options",
value: "DENY",
},
{
key: "Content-Security-Policy",
value:
"default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval';",
},
{
key: "X-Content-Type-Options",
value: "nosniff",
},
{
key: "Strict-Transport-Security",
value: "max-age=63072000; includeSubDomains; preload", // Enforces HTTPS
},
{
key: "Referrer-Policy",
value: "no-referrer", // Completely hides referrer
},
// Additional headers...
],
},
]
},
}

Next.js optimizuje slike za performanse, ali pogrešna podešavanja mogu dovesti do sigurnosnih ranjivosti, kao što je omogućavanje nepouzdanih izvora da ubace zlonamerni sadržaj.

Primer lošeg podešavanja:

// next.config.js

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

Problem:

• '*': Dozvoljava učitavanje slika sa bilo kog spoljnog izvora, uključujući nepouzdane ili zlonamerne domene. Napadači mogu hostovati slike koje sadrže zlonamerne payload-e ili sadržaj koji obmanjuje korisnike.
• Drugi problem može biti dozvoliti domenu gde bilo ko može da otpremi sliku (kao što je raw.githubusercontent.com)

Kako napadači to zloupotrebljavaju:

Ubacivanjem slika iz zlonamernih izvora, napadači mogu izvesti phishing napade, prikazati obmanjujuće informacije ili iskoristiti ranjivosti u bibliotekama za renderovanje slika.

Upravljajte osetljivim informacijama kao što su API ključevi i kredencijali baze podataka na siguran način bez izlaganja klijentu.

a. Izlaganje osetljivih promenljivih

Loš primer konfiguracije:

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

Problem:

• SECRET_API_KEY: Bez NEXT_PUBLIC_ prefiksa, Next.js ne izlaže varijable klijentu. Međutim, ako se greškom doda prefiks (npr., NEXT_PUBLIC_SECRET_API_KEY), postaje dostupno na strani klijenta.

Kako napadači to zloupotrebljavaju:

Ako su osetljive varijable izložene klijentu, napadači ih mogu preuzeti inspekcijom koda na strani klijenta ili mrežnih zahteva, stičući neovlašćen pristup API-ima, bazama podataka ili drugim uslugama.

Upravljajte URL preusmeravanjima i prepisivanjima unutar vaše aplikacije, osiguravajući da su korisnici pravilno usmereni bez uvođenja ranjivosti otvorenog preusmeravanja.

a. Open Redirect Vulnerability

Primer loše konfiguracije:

// next.config.js

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

Problem:

• Dinamička destinacija: Omogućava korisnicima da navedu bilo koju URL adresu, što omogućava napade otvorenog preusmeravanja.
• Verovanje korisničkom unosu: Preusmeravanje na URL adrese koje su pružili korisnici bez validacije može dovesti do fišinga, distribucije malvera ili krađe akreditiva.

Kako napadači to zloupotrebljavaju:

Napadači mogu kreirati URL adrese koje izgledaju kao da potiču sa vaše domene, ali preusmeravaju korisnike na zlonamerne sajtove. Na primer:

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

Korisnici koji veruju originalnoj domeni mogu nesvesno navigirati do štetnih veb sajtova.

Prilagodite Webpack konfiguracije za vašu Next.js aplikaciju, koje mogu nenamerno uvesti sigurnosne ranjivosti ako se ne rukuje pažljivo.

a. Izlaganje Osetljivih Modula

Loš Primer Konfiguracije:

// next.config.js

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

Problem:

• Izlaganje osetljivih putanja: Aliasiranje osetljivih direktorijuma i omogućavanje pristupa sa klijentske strane može dovesti do curenja poverljivih informacija.
• Pakovanje tajni: Ako su osetljivi fajlovi pakovani za klijenta, njihovi sadržaji postaju dostupni putem izvornih mapa ili inspekcijom koda sa klijentske strane.

Kako napadači to zloupotrebljavaju:

Napadači mogu pristupiti ili rekonstruisati strukturu direktorijuma aplikacije, potencijalno pronalazeći i eksploatišući osetljive fajlove ili podatke.