Struktura plików:

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

Kluczowe pliki:

• app/page.tsx: Obsługuje żądania do ścieżki głównej /.
• app/layout.tsx: Definiuje układ aplikacji, otaczając wszystkie strony.

Implementacja:

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

Wyjaśnienie:

• Definicja trasy: Plik page.tsx bezpośrednio pod katalogiem app odpowiada trasie /.
• Renderowanie: Ten komponent renderuje zawartość strony głównej.
• Integracja układu: Komponent HomePage jest otoczony przez layout.tsx, który może zawierać nagłówki, stopki i inne wspólne elementy.

Przykład: Trasa /about

Struktura plików:

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

Wdrożenie:

// app/about/page.tsx

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

Wyjaśnienie:

• Definicja trasy: Plik page.tsx w folderze about odpowiada trasie /about.
• Renderowanie: Ten komponent renderuje zawartość strony o nas.

Dynamiczne trasy umożliwiają obsługę ścieżek z zmiennymi segmentami, co pozwala aplikacjom na wyświetlanie zawartości na podstawie parametrów, takich jak identyfikatory, slugi itp.

Przykład: Trasa /posts/[id]

Struktura plików:

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

Wdrożenie:

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

Wyjaśnienie:

• Dynamiczny segment: [id] oznacza dynamiczny segment w trasie, przechwytując parametr id z URL.
• Dostęp do parametrów: Obiekt params zawiera dynamiczne parametry, dostępne w komponencie.
• Dopasowywanie tras: Każda ścieżka pasująca do /posts/*, taka jak /posts/1, /posts/abc itp., będzie obsługiwana przez ten komponent.

Next.js obsługuje zagnieżdżone trasowanie, umożliwiając hierarchiczne struktury tras, które odzwierciedlają układ katalogów.

Przykład: /dashboard/settings/profile Trasa

Struktura plików:

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

Wdrożenie:

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

Wyjaśnienie:

• Głębokie zagnieżdżenie: Plik page.tsx wewnątrz dashboard/settings/profile/ odpowiada trasie /dashboard/settings/profile.
• Odbicie hierarchii: Struktura katalogów odzwierciedla ścieżkę URL, co zwiększa łatwość utrzymania i przejrzystość.

Trasy catch-all obsługują wiele zagnieżdżonych segmentów lub nieznane ścieżki, zapewniając elastyczność w obsłudze tras.

Przykład: trasa /*

Struktura plików:

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

Wdrożenie:

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

Wyjaśnienie:

• Segment Catch-All: [...slug] przechwytuje wszystkie pozostałe segmenty ścieżki jako tablicę.
• Zastosowanie: Przydatne do obsługi dynamicznych scenariuszy routingu, takich jak ścieżki generowane przez użytkowników, zagnieżdżone kategorie itp.
• Dopasowywanie tras: Ścieżki takie jak /anything/here, /foo/bar/baz itp. są obsługiwane przez ten komponent.

Ataki XSS występują, gdy złośliwe skrypty są wstrzykiwane do zaufanych stron internetowych. Napastnicy mogą wykonywać skrypty w przeglądarkach użytkowników, kradnąc dane lub wykonując działania w imieniu użytkownika.

Przykład podatnego kodu:

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

Dlaczego jest podatne: Użycie dangerouslySetInnerHTML z nieufnym wejściem pozwala atakującym na wstrzykiwanie złośliwych skryptów.

Występuje, gdy dane wejściowe użytkownika są niewłaściwie obsługiwane w szablonach, co pozwala atakującym na wstrzykiwanie i wykonywanie szablonów lub wyrażeń.

Przykład podatnego kodu:

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

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

Dlaczego jest podatne: Jeśli template lub data zawiera złośliwą treść, może to prowadzić do wykonania niezamierzonego kodu.

To podatność, która pozwala atakującym manipulować ścieżkami po stronie klienta, aby wykonać niezamierzone działania, takie jak Cross-Site Request Forgery (CSRF). W przeciwieństwie do przechodzenia po ścieżkach po stronie serwera, które celuje w system plików serwera, CSPT koncentruje się na wykorzystywaniu mechanizmów po stronie klienta do przekierowywania legalnych żądań API do złośliwych punktów końcowych.

Przykład podatnego kodu:

Aplikacja Next.js pozwala użytkownikom na przesyłanie i pobieranie plików. Funkcja pobierania jest zaimplementowana po stronie klienta, gdzie użytkownicy mogą określić ścieżkę pliku do pobrania.

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

Scenariusz Ataku

1. Cel Atakującego: Wykonanie ataku CSRF w celu usunięcia krytycznego pliku (np. admin/config.json) poprzez manipulację filePath.
2. Wykorzystanie CSPT:

• Złośliwy Wkład: Atakujący tworzy URL z manipulowanym filePath, takim jak ../deleteFile/config.json.
• Wynikowe Wywołanie API: Kod po stronie klienta wysyła żądanie do /api/files/../deleteFile/config.json.
• Obsługa przez Serwer: Jeśli serwer nie weryfikuje filePath, przetwarza żądanie, potencjalnie usuwając lub ujawniając wrażliwe pliki.

3. Wykonanie CSRF:

• Stworzony Link: Atakujący wysyła ofierze link lub osadza złośliwy skrypt, który wywołuje żądanie pobrania z manipulowanym filePath.
• Wynik: Ofiara nieświadomie wykonuje akcję, co prowadzi do nieautoryzowanego dostępu do plików lub ich usunięcia.

Dlaczego Jest To Wrażliwe

• Brak Weryfikacji Wkładu: Po stronie klienta dozwolone są dowolne wkłady filePath, co umożliwia przejście przez ścieżki.
• Zaufanie do Wkładów Klienta: API po stronie serwera ufa i przetwarza filePath bez sanitizacji.
• Potencjalne Akcje API: Jeśli punkt końcowy API wykonuje akcje zmieniające stan (np. usuwanie, modyfikowanie plików), może być wykorzystywany za pomocą CSPT.

Next.js 13+ pozwala na definiowanie handlerów dla specyficznych metod HTTP w tym samym pliku route.js lub route.ts, co promuje jaśniejszy i bardziej zorganizowany kod.

Przykład:

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

Wyjaśnienie:

• Wielokrotne Eksporty: Każda metoda HTTP (GET, PUT, DELETE) ma swoją własną funkcję eksportowaną.
• Parametry: Drugi argument zapewnia dostęp do parametrów trasy za pomocą params.
• Ulepszone Odpowiedzi: Większa kontrola nad obiektami odpowiedzi, umożliwiająca precyzyjne zarządzanie nagłówkami i kodami statusu.

Next.js 13+ obsługuje zaawansowane funkcje routingu, takie jak trasy catch-all i zagnieżdżone trasy API, co pozwala na bardziej dynamiczne i skalowalne struktury API.

Przykład Trasy 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" },
})
}

Wyjaśnienie:

• Składnia: [...] oznacza segment przechwytujący, który uchwyca wszystkie zagnieżdżone ścieżki.
• Zastosowanie: Przydatne dla API, które muszą obsługiwać różne głębokości tras lub dynamiczne segmenty.

Przykład zagnieżdżonych tras:

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

Wyjaśnienie:

• Głębokie zagnieżdżenie: Umożliwia hierarchiczne struktury API, odzwierciedlające relacje zasobów.
• Dostęp do parametrów: Łatwy dostęp do wielu parametrów trasy za pomocą obiektu params.

Trasy API w katalogu pages (Next.js 12 i wcześniejsze)

Zanim Next.js 13 wprowadził katalog app i ulepszone możliwości routingu, trasy API były głównie definiowane w katalogu pages. To podejście jest nadal szeroko stosowane i wspierane w Next.js 12 i wcześniejszych wersjach.

Podstawowa trasa API

Struktura plików:

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

Wdrożenie:

javascriptCopy code// pages/api/hello.js

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

Wyjaśnienie:

• Lokalizacja: Trasy API znajdują się w katalogu pages/api/.
• Eksport: Użyj export default, aby zdefiniować funkcję obsługi.
• Podpis funkcji: Funkcja obsługi otrzymuje obiekty req (żądanie HTTP) i res (odpowiedź HTTP).
• Routing: Nazwa pliku (hello.js) odpowiada punktowi końcowemu /api/hello.

Dynamiczne trasy API

Struktura plików:

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

Wdrożenie:

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

Wyjaśnienie:

• Dynamiczne segmenty: Kwadratowe nawiasy ([id].js) oznaczają dynamiczne segmenty trasy.
• Dostęp do parametrów: Użyj req.query.id, aby uzyskać dostęp do dynamicznego parametru.
• Obsługa metod: Wykorzystaj logikę warunkową do obsługi różnych metod HTTP (GET, PUT, DELETE itd.).

Obsługa różnych metod HTTP

Podczas gdy podstawowy przykład trasy API obsługuje wszystkie metody HTTP w jednej funkcji, możesz zorganizować swój kod, aby obsługiwał każdą metodę wyraźnie dla lepszej przejrzystości i łatwości utrzymania.

Przykład:

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

Najlepsze praktyki:

• Separacja obowiązków: Wyraźnie oddziel logikę dla różnych metod HTTP.
• Spójność odpowiedzi: Zapewnij spójne struktury odpowiedzi dla łatwiejszego przetwarzania po stronie klienta.
• Obsługa błędów: Elegancko obsługuj nieobsługiwane metody i nieoczekiwane błędy.

Nagłówki zabezpieczeń zwiększają bezpieczeństwo Twojej aplikacji, instruując przeglądarki, jak obsługiwać treści. Pomagają w łagodzeniu różnych ataków, takich jak Cross-Site Scripting (XSS), Clickjacking i sniffing typu MIME:

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

Przykłady:

// 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 optymalizuje obrazy pod kątem wydajności, ale błędne konfiguracje mogą prowadzić do luk w zabezpieczeniach, takich jak umożliwienie nieufnym źródłom wstrzykiwania złośliwej treści.

Zły przykład konfiguracji:

// next.config.js

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

Problem:

• '*': Zezwala na ładowanie obrazów z dowolnego zewnętrznego źródła, w tym z nieufnych lub złośliwych domen. Napastnicy mogą hostować obrazy zawierające złośliwe ładunki lub treści, które wprowadzają użytkowników w błąd.
• Innym problemem może być zezwolenie na domenę gdzie ktokolwiek może przesłać obraz (jak raw.githubusercontent.com)

Jak napastnicy to wykorzystują:

Poprzez wstrzykiwanie obrazów z złośliwych źródeł, napastnicy mogą przeprowadzać ataki phishingowe, wyświetlać wprowadzające w błąd informacje lub wykorzystywać luki w bibliotekach renderujących obrazy.

Zarządzaj wrażliwymi informacjami, takimi jak klucze API i dane uwierzytelniające do bazy danych, w sposób bezpieczny, nie ujawniając ich klientowi.

a. Ekspozycja Wrażliwych Zmiennych

Zły Przykład Konfiguracji:

// 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 prefiksu NEXT_PUBLIC_, Next.js nie udostępnia zmiennych klientowi. Jednak, jeśli przez pomyłkę zostanie dodany prefiks (np. NEXT_PUBLIC_SECRET_API_KEY), staje się dostępny po stronie klienta.

How attackers abuse it:

Jeśli wrażliwe zmienne są udostępnione klientowi, atakujący mogą je odzyskać, przeglądając kod po stronie klienta lub żądania sieciowe, uzyskując nieautoryzowany dostęp do API, baz danych lub innych usług.

Zarządzaj przekierowaniami URL i przepisywaniem w swojej aplikacji, zapewniając, że użytkownicy są odpowiednio kierowani, nie wprowadzając podatności na otwarte przekierowania.

a. Open Redirect Vulnerability

Bad Configuration Example:

// next.config.js

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

Problem:

• Dynamic Destination: Umożliwia użytkownikom określenie dowolnego URL, co pozwala na ataki typu open redirect.
• Trusting User Input: Przekierowania do URL podanych przez użytkowników bez walidacji mogą prowadzić do phishingu, dystrybucji złośliwego oprogramowania lub kradzieży poświadczeń.

How attackers abuse it:

Atakujący mogą tworzyć URL, które wydają się pochodzić z twojej domeny, ale przekierowują użytkowników na złośliwe strony. Na przykład:

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

Użytkownicy ufający oryginalnej domenie mogą nieświadomie przechodzić do szkodliwych stron internetowych.

Dostosuj konfiguracje Webpack dla swojej aplikacji Next.js, które mogą nieumyślnie wprowadzać luki w zabezpieczeniach, jeśli nie są obsługiwane ostrożnie.

a. Ujawnianie wrażliwych modułów

Zły przykład konfiguracji:

// next.config.js

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

Problem:

• Eksponowanie wrażliwych ścieżek: Aliasowanie wrażliwych katalogów i umożliwienie dostępu po stronie klienta może prowadzić do wycieku poufnych informacji.
• Pakowanie sekretów: Jeśli wrażliwe pliki są pakowane dla klienta, ich zawartość staje się dostępna poprzez mapy źródłowe lub inspekcję kodu po stronie klienta.

Jak atakujący to wykorzystują:

Atakujący mogą uzyskać dostęp do struktury katalogów aplikacji lub ją odtworzyć, potencjalnie znajdując i wykorzystując wrażliwe pliki lub dane.