Structure de Fichiers:

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

Fichiers Clés :

• app/page.tsx : Gère les requêtes vers le chemin racine /.
• app/layout.tsx : Définit la mise en page de l'application, englobant toutes les pages.

Mise en œuvre :

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

Explication :

• Définition de la Route : Le fichier page.tsx directement sous le répertoire app correspond à la route /.
• Rendu : Ce composant rend le contenu de la page d'accueil.
• Intégration de la Mise en Page : Le composant HomePage est enveloppé par le layout.tsx, qui peut inclure des en-têtes, des pieds de page et d'autres éléments communs.

Exemple : Route /about

Structure de Fichier :

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

Mise en œuvre :

// app/about/page.tsx

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

Explication :

• Définition de la Route : Le fichier page.tsx dans le dossier about correspond à la route /about.
• Rendu : Ce composant rend le contenu de la page à propos.

Les routes dynamiques permettent de gérer des chemins avec des segments variables, permettant aux applications d'afficher du contenu basé sur des paramètres comme des IDs, des slugs, etc.

Exemple : Route /posts/[id]

Structure de Fichiers :

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

Mise en œuvre :

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

Explication :

• Segment Dynamique : [id] désigne un segment dynamique dans la route, capturant le paramètre id de l'URL.
• Accès aux Paramètres : L'objet params contient les paramètres dynamiques, accessibles au sein du composant.
• Correspondance de Route : Tout chemin correspondant à /posts/*, tel que /posts/1, /posts/abc, etc., sera géré par ce composant.

Next.js prend en charge le routage imbriqué, permettant des structures de routes hiérarchiques qui reflètent la disposition du répertoire.

Exemple : Route /dashboard/settings/profile

Structure de Fichiers :

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

Mise en œuvre :

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

Explication :

• Nesting Profond : Le fichier page.tsx à l'intérieur de dashboard/settings/profile/ correspond à la route /dashboard/settings/profile.
• Réflexion de la Hiérarchie : La structure du répertoire reflète le chemin URL, améliorant la maintenabilité et la clarté.

Les routes catch-all gèrent plusieurs segments imbriqués ou des chemins inconnus, offrant une flexibilité dans la gestion des routes.

Exemple : Route /*

Structure de Fichiers :

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

Mise en œuvre :

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

Explication :

• Segment Catch-All : [...slug] capture tous les segments de chemin restants sous forme de tableau.
• Utilisation : Utile pour gérer des scénarios de routage dynamique comme des chemins générés par les utilisateurs, des catégories imbriquées, etc.
• Correspondance de Route : Des chemins comme /anything/here, /foo/bar/baz, etc., sont gérés par ce composant.

Les attaques XSS se produisent lorsque des scripts malveillants sont injectés dans des sites Web de confiance. Les attaquants peuvent exécuter des scripts dans les navigateurs des utilisateurs, volant des données ou effectuant des actions au nom de l'utilisateur.

Exemple de Code Vulnérable :

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

Pourquoi c'est vulnérable : L'utilisation de dangerouslySetInnerHTML avec des entrées non fiables permet aux attaquants d'injecter des scripts malveillants.

Se produit lorsque les entrées des utilisateurs ne sont pas correctement gérées dans les modèles, permettant aux attaquants d'injecter et d'exécuter des modèles ou des expressions.

Exemple de code vulnérable :

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

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

Pourquoi c'est vulnérable : Si template ou data inclut du contenu malveillant, cela peut entraîner l'exécution de code non intentionnel.

C'est une vulnérabilité qui permet aux attaquants de manipuler les chemins côté client pour effectuer des actions non intentionnelles, telles que le Cross-Site Request Forgery (CSRF). Contrairement à la traversée de chemin côté serveur, qui cible le système de fichiers du serveur, la CSPT se concentre sur l'exploitation des mécanismes côté client pour rediriger les requêtes API légitimes vers des points de terminaison malveillants.

Exemple de code vulnérable :

Une application Next.js permet aux utilisateurs de télécharger et d'uploader des fichiers. La fonctionnalité de téléchargement est implémentée côté client, où les utilisateurs peuvent spécifier le chemin du fichier à télécharger.

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

Scénario d'Attaque

1. Objectif de l'Attaquant : Effectuer une attaque CSRF pour supprimer un fichier critique (par exemple, admin/config.json) en manipulant le filePath.
2. Exploitation de CSPT :

• Entrée Malveillante : L'attaquant crée une URL avec un filePath manipulé tel que ../deleteFile/config.json.
• Appel API Résultant : Le code côté client effectue une requête à /api/files/../deleteFile/config.json.
• Gestion par le Serveur : Si le serveur ne valide pas le filePath, il traite la requête, pouvant potentiellement supprimer ou exposer des fichiers sensibles.

3. Exécution de CSRF :

• Lien Conçu : L'attaquant envoie à la victime un lien ou intègre un script malveillant qui déclenche la requête de téléchargement avec le filePath manipulé.
• Résultat : La victime exécute sans le savoir l'action, entraînant un accès ou une suppression non autorisée de fichiers.

Pourquoi c'est Vulnérable

• Manque de Validation des Entrées : Le côté client permet des entrées filePath arbitraires, permettant le parcours de chemin.
• Confiance dans les Entrées du Client : L'API côté serveur fait confiance et traite le filePath sans assainissement.
• Actions Potentielles de l'API : Si le point de terminaison de l'API effectue des actions modifiant l'état (par exemple, supprimer, modifier des fichiers), il peut être exploité via CSPT.

Next.js 13+ vous permet de définir des gestionnaires pour des méthodes HTTP spécifiques dans le même fichier route.js ou route.ts, favorisant un code plus clair et mieux organisé.

Exemple :

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

Explication :

• Exports Multiples : Chaque méthode HTTP (GET, PUT, DELETE) a sa propre fonction exportée.
• Paramètres : Le deuxième argument donne accès aux paramètres de route via params.
• Réponses Améliorées : Un meilleur contrôle sur les objets de réponse, permettant une gestion précise des en-têtes et des codes d'état.

Next.js 13+ prend en charge des fonctionnalités de routage avancées telles que les routes catch-all et les routes API imbriquées, permettant des structures API plus dynamiques et évolutives.

Exemple de Route 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" },
})
}

Explication :

• Syntaxe : [...] désigne un segment générique, capturant tous les chemins imbriqués.
• Utilisation : Utile pour les API qui doivent gérer des profondeurs de route variables ou des segments dynamiques.

Exemple de Routes Imbriquées :

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

Explication :

• Nesting Profond : Permet des structures API hiérarchiques, reflétant les relations entre les ressources.
• Accès aux Paramètres : Accédez facilement à plusieurs paramètres de route via l'objet params.

Routes API dans le Répertoire pages (Next.js 12 et versions antérieures)

Avant que Next.js 13 n'introduise le répertoire app et n'améliore les capacités de routage, les routes API étaient principalement définies dans le répertoire pages. Cette approche est toujours largement utilisée et supportée dans Next.js 12 et les versions antérieures.

Route API de Base

Structure de Fichier :

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

Mise en œuvre :

javascriptCopy code// pages/api/hello.js

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

Explication :

• Emplacement : Les routes API se trouvent sous le répertoire pages/api/.
• Exportation : Utilisez export default pour définir la fonction de gestion.
• Signature de la fonction : Le gestionnaire reçoit les objets req (requête HTTP) et res (réponse HTTP).
• Routage : Le nom du fichier (hello.js) correspond au point de terminaison /api/hello.

Routes API Dynamiques

Structure de fichiers :

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

Mise en œuvre :

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

Explication :

• Segments Dynamiques : Les crochets ([id].js) désignent des segments de route dynamiques.
• Accéder aux Paramètres : Utilisez req.query.id pour accéder au paramètre dynamique.
• Gestion des Méthodes : Utilisez une logique conditionnelle pour gérer différentes méthodes HTTP (GET, PUT, DELETE, etc.).

Gestion des Différentes Méthodes HTTP

Bien que l'exemple de route API de base gère toutes les méthodes HTTP dans une seule fonction, vous pouvez structurer votre code pour gérer chaque méthode explicitement pour une meilleure clarté et maintenabilité.

Exemple :

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

Meilleures Pratiques :

• Séparation des Préoccupations : Séparer clairement la logique pour différentes méthodes HTTP.
• Cohérence des Réponses : Assurer des structures de réponse cohérentes pour faciliter la gestion côté client.
• Gestion des Erreurs : Gérer avec élégance les méthodes non prises en charge et les erreurs inattendues.

Les en-têtes de sécurité améliorent la sécurité de votre application en instruisant les navigateurs sur la manière de gérer le contenu. Ils aident à atténuer diverses attaques telles que le Cross-Site Scripting (XSS), le Clickjacking et le sniffing de type MIME :

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

Exemples :

// 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 optimise les images pour la performance, mais des erreurs de configuration peuvent entraîner des vulnérabilités de sécurité, comme permettre à des sources non fiables d'injecter du contenu malveillant.

Exemple de mauvaise configuration :

// next.config.js

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

Problème :

• '*' : Permet le chargement d'images depuis n'importe quelle source externe, y compris des domaines non fiables ou malveillants. Les attaquants peuvent héberger des images contenant des charges utiles malveillantes ou du contenu qui induit les utilisateurs en erreur.
• Un autre problème pourrait être de permettre un domaine où tout le monde peut télécharger une image (comme raw.githubusercontent.com)

Comment les attaquants en abusent :

En injectant des images provenant de sources malveillantes, les attaquants peuvent effectuer des attaques de phishing, afficher des informations trompeuses ou exploiter des vulnérabilités dans les bibliothèques de rendu d'images.

Gérez les informations sensibles comme les clés API et les identifiants de base de données de manière sécurisée sans les exposer au client.

a. Exposition des Variables Sensibles

Mauvais Exemple de Configuration :

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

Problème :

• SECRET_API_KEY : Sans le préfixe NEXT_PUBLIC_, Next.js n'expose pas les variables au client. Cependant, si par erreur il est préfixé (par exemple, NEXT_PUBLIC_SECRET_API_KEY), il devient accessible côté client.

Comment les attaquants en abusent :

Si des variables sensibles sont exposées au client, les attaquants peuvent les récupérer en inspectant le code côté client ou les requêtes réseau, obtenant un accès non autorisé aux API, bases de données ou autres services.

Gérez les redirections et réécritures d'URL au sein de votre application, en veillant à ce que les utilisateurs soient dirigés de manière appropriée sans introduire de vulnérabilités de redirection ouverte.

a. Vulnérabilité de Redirection Ouverte

Mauvais Exemple de Configuration :

// next.config.js

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

Problème :

• Destination Dynamique : Permet aux utilisateurs de spécifier n'importe quelle URL, ce qui permet des attaques de redirection ouverte.
• Confiance dans l'Entrée Utilisateur : Les redirections vers des URL fournies par les utilisateurs sans validation peuvent conduire à du phishing, à la distribution de logiciels malveillants ou au vol de données d'identification.

Comment les attaquants en abusent :

Les attaquants peuvent créer des URL qui semblent provenir de votre domaine mais redirigent les utilisateurs vers des sites malveillants. Par exemple :

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

Les utilisateurs faisant confiance au domaine d'origine pourraient naviguer sans le savoir vers des sites Web nuisibles.

Personnalisez les configurations Webpack pour votre application Next.js, ce qui peut introduire involontairement des vulnérabilités de sécurité si cela n'est pas géré avec prudence.

a. Exposition de modules sensibles

Mauvais exemple de configuration :

// next.config.js

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

Problème :

• Exposition de chemins sensibles : L'aliasing de répertoires sensibles et l'autorisation d'accès côté client peuvent leak des informations confidentielles.
• Regroupement de secrets : Si des fichiers sensibles sont regroupés pour le client, leur contenu devient accessible via des cartes sources ou en inspectant le code côté client.

Comment les attaquants en abusent :

Les attaquants peuvent accéder ou reconstruire la structure de répertoires de l'application, trouvant potentiellement et exploitant des fichiers ou des données sensibles.