Struttura dei File:

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

File Chiave:

• app/page.tsx: Gestisce le richieste al percorso radice /.
• app/layout.tsx: Definisce il layout per l'applicazione, avvolgendo tutte le pagine.

Implementazione:

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

Spiegazione:

• Definizione del percorso: Il file page.tsx direttamente sotto la directory app corrisponde al percorso /.
• Rendering: Questo componente rende il contenuto per la pagina principale.
• Integrazione del layout: Il componente HomePage è avvolto da layout.tsx, che può includere intestazioni, piè di pagina e altri elementi comuni.

Esempio: percorso /about

Struttura dei file:

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

Implementazione:

// app/about/page.tsx

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

Spiegazione:

• Definizione del percorso: Il file page.tsx all'interno della cartella about corrisponde al percorso /about.
• Rendering: Questo componente rende il contenuto per la pagina "about".

I percorsi dinamici consentono di gestire percorsi con segmenti variabili, permettendo alle applicazioni di visualizzare contenuti basati su parametri come ID, slugs, ecc.

Esempio: Percorso /posts/[id]

Struttura dei file:

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

Implementazione:

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

Spiegazione:

• Segmento Dinamico: [id] denota un segmento dinamico nella rotta, catturando il parametro id dall'URL.
• Accesso ai Parametri: L'oggetto params contiene i parametri dinamici, accessibili all'interno del componente.
• Corrispondenza delle Rotte: Qualsiasi percorso che corrisponde a /posts/*, come /posts/1, /posts/abc, ecc., sarà gestito da questo componente.

Next.js supporta il routing annidato, consentendo strutture di rotta gerarchiche che rispecchiano il layout della directory.

Esempio: Rotta /dashboard/settings/profile

Struttura dei File:

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

Implementazione:

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

Spiegazione:

• Nesting Profondo: Il file page.tsx all'interno di dashboard/settings/profile/ corrisponde al percorso /dashboard/settings/profile.
• Riflessione della Gerarchia: La struttura delle directory riflette il percorso URL, migliorando la manutenibilità e la chiarezza.

Le route catch-all gestiscono più segmenti nidificati o percorsi sconosciuti, fornendo flessibilità nella gestione delle route.

Esempio: Route /*

Struttura dei File:

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

Implementazione:

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

Spiegazione:

• Segmento Catch-All: [...slug] cattura tutti i segmenti di percorso rimanenti come un array.
• Utilizzo: Utile per gestire scenari di routing dinamico come percorsi generati dagli utenti, categorie annidate, ecc.
• Corrispondenza delle Route: Percorsi come /anything/here, /foo/bar/baz, ecc., sono gestiti da questo componente.

Gli attacchi XSS si verificano quando script dannosi vengono iniettati in siti web fidati. Gli aggressori possono eseguire script nei browser degli utenti, rubando dati o eseguendo azioni per conto dell'utente.

Esempio di Codice Vulnerabile:

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

Perché è vulnerabile: L'uso di dangerouslySetInnerHTML con input non affidabili consente agli attaccanti di iniettare script dannosi.

Si verifica quando gli input degli utenti non vengono gestiti correttamente nei template, consentendo agli attaccanti di iniettare ed eseguire template o espressioni.

Esempio di Codice Vulnerabile:

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

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

Perché è vulnerabile: Se template o data includono contenuti dannosi, può portare all'esecuzione di codice non intenzionato.

È una vulnerabilità che consente agli attaccanti di manipolare i percorsi lato client per eseguire azioni non intenzionate, come il Cross-Site Request Forgery (CSRF). A differenza del path traversal lato server, che prende di mira il filesystem del server, il CSPT si concentra sull'esploitazione dei meccanismi lato client per reindirizzare le richieste API legittime a endpoint dannosi.

Esempio di codice vulnerabile:

Un'applicazione Next.js consente agli utenti di caricare e scaricare file. La funzionalità di download è implementata sul lato client, dove gli utenti possono specificare il percorso del file da scaricare.

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

Scenario di Attacco

1. Obiettivo dell'Attaccante: Eseguire un attacco CSRF per eliminare un file critico (ad esempio, admin/config.json) manipolando il filePath.
2. Sfruttamento di CSPT:

• Input Maligno: L'attaccante crea un URL con un filePath manipolato come ../deleteFile/config.json.
• Chiamata API Risultante: Il codice lato client effettua una richiesta a /api/files/../deleteFile/config.json.
• Gestione del Server: Se il server non convalida il filePath, elabora la richiesta, potenzialmente eliminando o esponendo file sensibili.

3. Esecuzione di CSRF:

• Link Creato: L'attaccante invia alla vittima un link o incorpora uno script maligno che attiva la richiesta di download con il filePath manipolato.
• Risultato: La vittima esegue inconsapevolmente l'azione, portando ad accessi o eliminazioni non autorizzate di file.

Perché È Vulnerabile

• Mancanza di Validazione dell'Input: Il lato client consente input arbitrari di filePath, abilitando il path traversal.
• Fiducia negli Input del Client: L'API lato server si fida e elabora il filePath senza sanitizzazione.
• Potenziali Azioni API: Se l'endpoint API esegue azioni che modificano lo stato (ad esempio, eliminare, modificare file), può essere sfruttato tramite CSPT.

Next.js 13+ consente di definire gestori per metodi HTTP specifici all'interno dello stesso file route.js o route.ts, promuovendo un codice più chiaro e organizzato.

Esempio:

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

Spiegazione:

• Esportazioni Multiple: Ogni metodo HTTP (GET, PUT, DELETE) ha la propria funzione esportata.
• Parametri: Il secondo argomento fornisce accesso ai parametri della rotta tramite params.
• Risposte Migliorate: Maggiore controllo sugli oggetti di risposta, consentendo una gestione precisa degli header e dei codici di stato.

Next.js 13+ supporta funzionalità di routing avanzate come le route catch-all e le route API annidate, consentendo strutture API più dinamiche e scalabili.

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

Spiegazione:

• Sintassi: [...] denota un segmento catch-all, catturando tutti i percorsi annidati.
• Utilizzo: Utile per le API che devono gestire profondità di percorso variabili o segmenti dinamici.

Esempio di Percorsi Annidati:

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

Spiegazione:

• Profondità di annidamento: Consente strutture API gerarchiche, riflettendo le relazioni tra le risorse.
• Accesso ai parametri: Accesso facile a più parametri di route tramite l'oggetto params.

Route API nella directory pages (Next.js 12 e versioni precedenti)

Prima che Next.js 13 introducesse la directory app e migliorasse le capacità di routing, le route API erano principalmente definite all'interno della directory pages. Questo approccio è ancora ampiamente utilizzato e supportato in Next.js 12 e versioni precedenti.

Route API di base

Struttura dei file:

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

Implementazione:

javascriptCopy code// pages/api/hello.js

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

Spiegazione:

• Posizione: Le route API si trovano nella directory pages/api/.
• Esportazione: Usa export default per definire la funzione handler.
• Firma della Funzione: L'handler riceve gli oggetti req (richiesta HTTP) e res (risposta HTTP).
• Routing: Il nome del file (hello.js) corrisponde all'endpoint /api/hello.

Route API Dinamiche

Struttura del File:

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

Implementazione:

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

Spiegazione:

• Segmenti Dinamici: Le parentesi quadre ([id].js) denotano segmenti di percorso dinamici.
• Accesso ai Parametri: Usa req.query.id per accedere al parametro dinamico.
• Gestione dei Metodi: Utilizza la logica condizionale per gestire i diversi metodi HTTP (GET, PUT, DELETE, ecc.).

Gestione dei Diversi Metodi HTTP

Mentre l'esempio di percorso API di base gestisce tutti i metodi HTTP all'interno di una singola funzione, puoi strutturare il tuo codice per gestire ogni metodo esplicitamente per una maggiore chiarezza e manutenibilità.

Esempio:

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: Separare chiaramente la logica per i diversi metodi HTTP.
• Response Consistency: Garantire strutture di risposta coerenti per facilitare la gestione lato client.
• Error Handling: Gestire in modo elegante i metodi non supportati e gli errori imprevisti.

Le intestazioni di sicurezza migliorano la sicurezza della tua applicazione istruendo i browser su come gestire i contenuti. Aiutano a mitigare vari attacchi come Cross-Site Scripting (XSS), Clickjacking e sniffing del tipo MIME:

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

Esempi:

// 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 ottimizza le immagini per le prestazioni, ma configurazioni errate possono portare a vulnerabilità di sicurezza, come consentire a fonti non affidabili di iniettare contenuti dannosi.

Esempio di Configurazione Errata:

// next.config.js

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

Problema:

• '*': Permette il caricamento di immagini da qualsiasi fonte esterna, inclusi domini non affidabili o malevoli. Gli attaccanti possono ospitare immagini contenenti payload o contenuti malevoli che ingannano gli utenti.
• Un altro problema potrebbe essere quello di consentire un dominio dove chiunque può caricare un'immagine (come raw.githubusercontent.com)

Come gli attaccanti ne abusano:

Iniettando immagini da fonti malevole, gli attaccanti possono eseguire attacchi di phishing, visualizzare informazioni fuorvianti o sfruttare vulnerabilità nelle librerie di rendering delle immagini.

Gestire informazioni sensibili come chiavi API e credenziali del database in modo sicuro senza esporle al client.

a. Esposizione di Variabili Sensibili

Esempio di Configurazione Errata:

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

Problema:

• SECRET_API_KEY: Senza il prefisso NEXT_PUBLIC_, Next.js non espone le variabili al client. Tuttavia, se erroneamente prefissato (ad es., NEXT_PUBLIC_SECRET_API_KEY), diventa accessibile dal lato client.

Come gli attaccanti ne abusano:

Se le variabili sensibili sono esposte al client, gli attaccanti possono recuperarle ispezionando il codice lato client o le richieste di rete, ottenendo accesso non autorizzato a API, database o altri servizi.

Gestisci le redirezioni e le riscritture degli URL all'interno della tua applicazione, assicurandoti che gli utenti siano indirizzati in modo appropriato senza introdurre vulnerabilità di redirect aperto.

a. Vulnerabilità di Redirect Aperto

Esempio di Configurazione Errata:

// next.config.js

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

Problema:

• Destinazione Dinamica: Consente agli utenti di specificare qualsiasi URL, abilitando attacchi di reindirizzamento aperto.
• Fiducia nell'Input dell'Utente: I reindirizzamenti a URL forniti dagli utenti senza validazione possono portare a phishing, distribuzione di malware o furto di credenziali.

Come gli attaccanti ne abusano:

Gli attaccanti possono creare URL che sembrano provenire dal tuo dominio ma reindirizzano gli utenti a siti malevoli. Ad esempio:

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

Gli utenti che si fidano del dominio originale potrebbero navigare inconsapevolmente verso siti web dannosi.

Personalizza le configurazioni di Webpack per la tua applicazione Next.js, che possono introdurre vulnerabilità di sicurezza se non gestite con cautela.

a. Esposizione di Moduli Sensibili

Esempio di Configurazione Errata:

// next.config.js

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

Problema:

• Esposizione di Percorsi Sensibili: L'aliasing di directory sensibili e la possibilità di accesso lato client possono rivelare informazioni riservate.
• Raggruppamento di Segreti: Se file sensibili vengono raggruppati per il client, i loro contenuti diventano accessibili tramite mappe sorgente o ispezionando il codice lato client.

Come gli attaccanti ne abusano:

Gli attaccanti possono accedere o ricostruire la struttura delle directory dell'applicazione, trovando e sfruttando potenzialmente file o dati sensibili.