Dateistruktur:

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

Wichtige Dateien:

• app/page.tsx: Behandelt Anfragen an den Stamm-Pfad /.
• app/layout.tsx: Definiert das Layout für die Anwendung, das alle Seiten umschließt.

Implementierung:

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

Erklärung:

• Routen-Definition: Die page.tsx-Datei direkt im app-Verzeichnis entspricht der /-Route.
• Rendering: Diese Komponente rendert den Inhalt für die Startseite.
• Layout-Integration: Die HomePage-Komponente wird von der layout.tsx umschlossen, die Header, Footer und andere gemeinsame Elemente enthalten kann.

Beispiel: /about-Route

Dateistruktur:

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

Implementierung:

// app/about/page.tsx

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

Erklärung:

• Routen-Definition: Die page.tsx-Datei im about-Ordner entspricht der /about-Route.
• Rendering: Diese Komponente rendert den Inhalt für die Über-Seite.

Dynamische Routen ermöglichen die Handhabung von Pfaden mit variablen Segmenten, wodurch Anwendungen Inhalte basierend auf Parametern wie IDs, Slugs usw. anzeigen können.

Beispiel: /posts/[id] Route

Dateistruktur:

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

Implementierung:

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

Erklärung:

• Dynamisches Segment: [id] bezeichnet ein dynamisches Segment in der Route, das den id-Parameter aus der URL erfasst.
• Zugriff auf Parameter: Das params-Objekt enthält die dynamischen Parameter, die innerhalb der Komponente zugänglich sind.
• Routenabgleich: Jeder Pfad, der mit /posts/* übereinstimmt, wie z.B. /posts/1, /posts/abc usw., wird von dieser Komponente verarbeitet.

Next.js unterstützt verschachtelte Routen, die hierarchische Routenstrukturen ermöglichen, die der Verzeichnisstruktur entsprechen.

Beispiel: /dashboard/settings/profile Route

Dateistruktur:

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

Implementierung:

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

Erklärung:

• Tiefe Verschachtelung: Die page.tsx-Datei im Verzeichnis dashboard/settings/profile/ entspricht dem /dashboard/settings/profile-Pfad.
• Hierarchie-Reflexion: Die Verzeichnisstruktur spiegelt den URL-Pfad wider, was die Wartbarkeit und Klarheit verbessert.

Catch-All-Routen behandeln mehrere verschachtelte Segmente oder unbekannte Pfade und bieten Flexibilität bei der Routenbearbeitung.

Beispiel: /* Route

Dateistruktur:

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

Implementierung:

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

Erklärung:

• Catch-All Segment: [...slug] erfasst alle verbleibenden Pfadsegmente als Array.
• Verwendung: Nützlich für die Handhabung dynamischer Routing-Szenarien wie benutzergenerierte Pfade, verschachtelte Kategorien usw.
• Routenabgleich: Pfade wie /anything/here, /foo/bar/baz usw. werden von dieser Komponente verarbeitet.

XSS-Angriffe treten auf, wenn bösartige Skripte in vertrauenswürdige Websites injiziert werden. Angreifer können Skripte in den Browsern der Benutzer ausführen, Daten stehlen oder Aktionen im Namen des Benutzers durchführen.

Beispiel für anfälligen Code:

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

Warum es anfällig ist: Die Verwendung von dangerouslySetInnerHTML mit nicht vertrauenswürdigen Eingaben ermöglicht es Angreifern, bösartige Skripte einzuschleusen.

Tritt auf, wenn Benutzereingaben in Templates unsachgemäß behandelt werden, was Angreifern ermöglicht, Templates oder Ausdrücke einzuschleusen und auszuführen.

Beispiel für anfälligen Code:

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

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

Warum es anfällig ist: Wenn template oder data schädliche Inhalte enthalten, kann dies zur Ausführung unbeabsichtigten Codes führen.

Es handelt sich um eine Schwachstelle, die Angreifern ermöglicht, clientseitige Pfade zu manipulieren, um unbeabsichtigte Aktionen durchzuführen, wie z.B. Cross-Site Request Forgery (CSRF). Im Gegensatz zur serverseitigen Pfadtraversierung, die das Dateisystem des Servers angreift, konzentriert sich CSPT darauf, clientseitige Mechanismen auszunutzen, um legitime API-Anfragen an bösartige Endpunkte umzuleiten.

Beispiel für anfälligen Code:

Eine Next.js-Anwendung ermöglicht es Benutzern, Dateien hochzuladen und herunterzuladen. Die Download-Funktion wird auf der Client-Seite implementiert, wo Benutzer den Dateipfad angeben können, um herunterzuladen.

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

Angriffsszenario

1. Ziel des Angreifers: Durchführung eines CSRF-Angriffs, um eine kritische Datei (z.B. admin/config.json) zu löschen, indem der filePath manipuliert wird.
2. Ausnutzung von CSPT:

• Bösartige Eingabe: Der Angreifer erstellt eine URL mit einem manipulierten filePath, wie z.B. ../deleteFile/config.json.
• Resultierender API-Aufruf: Der clientseitige Code sendet eine Anfrage an /api/files/../deleteFile/config.json.
• Verarbeitung durch den Server: Wenn der Server den filePath nicht validiert, verarbeitet er die Anfrage und könnte potenziell sensible Dateien löschen oder offenlegen.

3. Ausführung von CSRF:

• Erstellter Link: Der Angreifer sendet dem Opfer einen Link oder bettet ein bösartiges Skript ein, das die Download-Anfrage mit dem manipulierten filePath auslöst.
• Ergebnis: Das Opfer führt unwissentlich die Aktion aus, was zu unbefugtem Datei-Zugriff oder -Löschung führt.

Warum es anfällig ist

• Mangelnde Eingabevalidierung: Der clientseitige Code erlaubt beliebige filePath-Eingaben, was Pfadtraversal ermöglicht.
• Vertrauen auf Client-Eingaben: Die serverseitige API vertraut und verarbeitet den filePath ohne Sanitärung.
• Potenzielle API-Aktionen: Wenn der API-Endpunkt zustandsverändernde Aktionen durchführt (z.B. löschen, Dateien ändern), kann er über CSPT ausgenutzt werden.

Next.js 13+ ermöglicht es Ihnen, Handler für spezifische HTTP-Methoden innerhalb derselben route.js oder route.ts Datei zu definieren, was klareren und besser organisierten Code fördert.

Beispiel:

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

Erklärung:

• Mehrere Exporte: Jede HTTP-Methode (GET, PUT, DELETE) hat ihre eigene exportierte Funktion.
• Parameter: Das zweite Argument ermöglicht den Zugriff auf Routenparameter über params.
• Erweiterte Antworten: Größere Kontrolle über Antwortobjekte, die eine präzise Verwaltung von Headern und Statuscodes ermöglicht.

Next.js 13+ unterstützt erweiterte Routing-Funktionen wie Catch-All-Routen und verschachtelte API-Routen, die dynamischere und skalierbarere API-Strukturen ermöglichen.

Catch-All-Routenbeispiel:

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

Erklärung:

• Syntax: [...] bezeichnet ein Catch-All-Segment, das alle verschachtelten Pfade erfasst.
• Verwendung: Nützlich für APIs, die unterschiedliche Routen-Tiefen oder dynamische Segmente verarbeiten müssen.

Beispiel für verschachtelte Routen:

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

Erklärung:

• Tiefe Verschachtelung: Ermöglicht hierarchische API-Strukturen, die Ressourcenbeziehungen widerspiegeln.
• Parameterzugriff: Einfacher Zugriff auf mehrere Routenparameter über das params-Objekt.

API-Routen im pages-Verzeichnis (Next.js 12 und früher)

Bevor Next.js 13 das app-Verzeichnis und verbesserte Routing-Funktionen einführte, wurden API-Routen hauptsächlich im pages-Verzeichnis definiert. Dieser Ansatz wird immer noch häufig verwendet und in Next.js 12 und früheren Versionen unterstützt.

Grundlegende API-Route

Dateistruktur:

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

Implementierung:

javascriptCopy code// pages/api/hello.js

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

Erklärung:

• Standort: API-Routen befinden sich im Verzeichnis pages/api/.
• Export: Verwenden Sie export default, um die Handler-Funktion zu definieren.
• Funktionssignatur: Der Handler erhält die Objekte req (HTTP-Anfrage) und res (HTTP-Antwort).
• Routing: Der Dateiname (hello.js) entspricht dem Endpunkt /api/hello.

Dynamische API-Routen

Dateistruktur:

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

Implementierung:

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

Erklärung:

• Dynamische Segmente: Eckige Klammern ([id].js) kennzeichnen dynamische Routen-Segmente.
• Zugriff auf Parameter: Verwenden Sie req.query.id, um auf den dynamischen Parameter zuzugreifen.
• Verarbeitung von Methoden: Nutzen Sie bedingte Logik, um verschiedene HTTP-Methoden (GET, PUT, DELETE usw.) zu verarbeiten.

Verarbeitung verschiedener HTTP-Methoden

Während das grundlegende API-Routenbeispiel alle HTTP-Methoden innerhalb einer einzigen Funktion behandelt, können Sie Ihren Code so strukturieren, dass jede Methode explizit für bessere Klarheit und Wartbarkeit behandelt wird.

Beispiel:

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:

• Trennung der Anliegen: Logik für verschiedene HTTP-Methoden klar trennen.
• Antwortkonsistenz: Konsistente Antwortstrukturen sicherstellen, um die Handhabung auf der Client-Seite zu erleichtern.
• Fehlerbehandlung: Nicht unterstützte Methoden und unerwartete Fehler elegant behandeln.

Sicherheitsheader verbessern die Sicherheit Ihrer Anwendung, indem sie Browser anweisen, wie sie Inhalte behandeln sollen. Sie helfen, verschiedene Angriffe wie Cross-Site Scripting (XSS), Clickjacking und MIME-Typ-Sniffing zu mindern:

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

Beispiele:

// 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 optimiert Bilder für die Leistung, aber Fehlkonfigurationen können zu Sicherheitsanfälligkeiten führen, wie z.B. das Zulassen von nicht vertrauenswürdigen Quellen, die bösartigen Inhalt injizieren.

Schlechtes Konfigurationsbeispiel:

// next.config.js

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

Problem:

• '*': Erlaubt das Laden von Bildern aus jeder externen Quelle, einschließlich untrusted oder bösartiger Domains. Angreifer können Bilder hosten, die bösartige Payloads oder Inhalte enthalten, die Benutzer irreführen.
• Ein weiteres Problem könnte sein, eine Domain zuzulassen wo jeder ein Bild hochladen kann (wie raw.githubusercontent.com)

Wie Angreifer dies ausnutzen:

Durch das Injizieren von Bildern aus bösartigen Quellen können Angreifer Phishing-Angriffe durchführen, irreführende Informationen anzeigen oder Schwachstellen in Bildrendering-Bibliotheken ausnutzen.

Verwalten Sie sensible Informationen wie API-Schlüssel und Datenbankanmeldeinformationen sicher, ohne sie dem Client auszusetzen.

a. Exponieren sensibler Variablen

Schlechtes Konfigurationsbeispiel:

// 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: Ohne das NEXT_PUBLIC_ Präfix gibt Next.js keine Variablen an den Client weiter. Wenn es jedoch fälschlicherweise mit dem Präfix versehen wird (z. B. NEXT_PUBLIC_SECRET_API_KEY), wird es auf der Client-Seite zugänglich.

Wie Angreifer es ausnutzen:

Wenn sensible Variablen dem Client ausgesetzt sind, können Angreifer sie abrufen, indem sie den Client-seitigen Code oder Netzwerk-Anfragen inspizieren, und unbefugten Zugriff auf APIs, Datenbanken oder andere Dienste erlangen.

Verwalten Sie URL-Weiterleitungen und -Umleitungen innerhalb Ihrer Anwendung, um sicherzustellen, dass Benutzer angemessen geleitet werden, ohne offene Redirect-Schwachstellen einzuführen.

a. Open Redirect Vulnerability

Schlechtes Konfigurationsbeispiel:

// next.config.js

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

Problem:

• Dynamisches Ziel: Ermöglicht es Benutzern, jede URL anzugeben, was offene Umleitungsangriffe ermöglicht.
• Vertrauen auf Benutzereingaben: Umleitungen zu von Benutzern bereitgestellten URLs ohne Validierung können zu Phishing, Malware-Verbreitung oder Diebstahl von Anmeldeinformationen führen.

Wie Angreifer es ausnutzen:

Angreifer können URLs erstellen, die scheinbar von Ihrer Domain stammen, aber Benutzer auf bösartige Seiten umleiten. Zum Beispiel:

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

Benutzer, die der ursprünglichen Domain vertrauen, könnten unwissentlich zu schädlichen Websites navigieren.

Passen Sie die Webpack-Konfigurationen für Ihre Next.js-Anwendung an, die unbeabsichtigt Sicherheitsanfälligkeiten einführen kann, wenn sie nicht vorsichtig behandelt wird.

a. Sensible Module offenlegen

Schlechtes Konfigurationsbeispiel:

// next.config.js

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

Problem:

• Exponieren sensibler Pfade: Das Aliasing sensibler Verzeichnisse und das Zulassen des Zugriffs von der Client-Seite können vertrauliche Informationen leaken.
• Bündeln von Geheimnissen: Wenn sensible Dateien für den Client gebündelt werden, werden deren Inhalte über Quellkarten oder durch Inspektion des Client-Seiten-Codes zugänglich.

Wie Angreifer es ausnutzen:

Angreifer können auf die Verzeichnisstruktur der Anwendung zugreifen oder diese rekonstruieren, wodurch sie potenziell sensible Dateien oder Daten finden und ausnutzen können.