Come costruire un Contact Form sicuro in Nuxt 4

Molti sviluppatori sottovalutano il contact form. Spesso viene implementato velocemente, senza considerare sicurezza, validazione e protezione contro spam o abusi. Purtroppo, questo è un errore comune che può portare a problemi di sicurezza e stabilità dell'applicazione o nel peggiore dei casi ad interruzioni del servizio a causa di attacchi DDoS o spam massivo.

In realtà, un contact form è un vero e proprio punto di ingresso nel tuo sistema. Se non protetto adeguatamente può causare danni significativi, sia in termini di sicurezza che di performance.

In questo articolo vediamo come costruire un contact form sicuro in Nuxt 4 con validazione Zod e rate limiting, realmente pronto per la produzione.

Nuxt 4
Zod per la validazione server-side
Rate limiting lato server
Honeypot anti-spam
Prisma per la persistenza dei dati

Perché la sicurezza del Contact Form è fondamentale

Le principali problematiche che possono derivare da un contact form non protetto sono:

Spam automatico
Bot che inviano richieste massicce
Payload malevoli
Tentativi di overload del server

Proteggerlo significa proteggere la stabilità dell'intera applicazione ma soprattutto del tuo database.

1. Creazione dell'endpoint server

Grazie al layer server di Nuxt 4 possiamo gestire API e backend nello stesso progetto, evitando servizi esterni e mantenendo il controllo completo sulla logica di sicurezza.

Creiamo un file server/api/contact.post.ts:

export default defineEventHandler(async (event) => {
  const body = await readBody(event)
})

In questo file possiamo leggere i dati inviati dal form e processarli adeguatamente.

2. Validazione server-side con Zod

Spesso si pensa che la validazione client-side sia sufficiente, ma è fondamentale implementare anche una validazione server-side per garantire che i dati siano corretti e sicuri prima di essere salvati nel database.

Zod è una libreria di validazione molto potente e facile da usare. Ecco come possiamo definire uno schema per il nostro contact form:

import { z } from 'zod'

const schema = z.object({
  name: z.string().min(2),
  email: z.string().email(),
  message: z.string().min(10),
})

Dopo aver definito lo schema, possiamo validare i dati ricevuti e bloccare eventuali richieste non valide, in più possiamo restituire un messaggio di errore chiaro al client.

const result = schema.safeParse(body)

if (!result.success) {
  throw createError({
    statusCode: 400,
    statusMessage: 'Invalid payload',
  })
}

Una validazione robusta server-side è fondamentale. A questo punto, nel caso i dati non fossero validi, la richiesta viene bloccata e il server restituisce un errore 400 al client.

3. Protezione Honeypot

Un metodo semplice ed efficace contro i Bot è l'"Honeypot".

Procediamo con l'inserimento di un campo nascosto nel form per assicurarci che il form raccolga solo interazioni umane.

<input type="text" name="website" class="hidden" />

La compilazione di questo campo ci indicherà una probabile interazione di bot.

4. Implementare il Rate Limiting

Per prevenire abusi e attacchi DDoS, è fondamentale implementare un sistema di rate limiting lato server. Questo limita il numero di richieste che un singolo IP può fare in un certo intervallo di tempo.

In Nuxt 4 possiamo implementare un rate limiter personalizzato adatto al nostro contesto d'uso, limitando richieste da un singolo IP a un numero ragionevole.

Esempio:

rateLimitOrThrow({
  key: `contact:${ip}`,
  windowMs: 60000, // 1 minute
  max: 3,
})

Questo permette massimo 3 richieste al minuto per IP.

È una protezione semplice ma molto efficace che può prevenire sovraccarichi del server e ridurre significativamente il rischio di spam.

5. Salvataggio con Prisma

Dopo aver validato i dati e applicato tutte le protezioni necessarie, possiamo procedere con il salvataggio dei dati nel database usando Prisma.

await prisma.message.create({
  data: result.data,
})

A questo punto il dato è sicuro e può essere salvato nel database.

Conclusione

Un contact form non è solo puro HTML, è un punto di ingresso nel tuo sistema e deve essere trattato come tale.

La validazione server-side con strumenti validi e robusti come Zod, la protezione anti-spam e il rate limiting sono elementi fondamentali per garantire la sicurezza e la stabilità del tuo progetto in produzione.

La validazione client-side è importante per migliorare l'esperienza utente, ma non può sostituire la validazione server-side, che è essenziale per proteggere il tuo sistema da dati non validi o malevoli.

Se stai costruendo un progetto con Nuxt 4, questa struttura ti permette di avere una base solida, scalabile e sicura.

Come costruire un Contact Form sicuro in Nuxt 4 con Zod e Rate Limiting