Sécurité front-end

XSS, CSP, en-têtes de sécurité, stockage de jetons, CSRF et CORS : les réflexes essentiels pour ne pas laisser de portes ouvertes côté navigateur.

XSS : afficher la donnée utilisateur sans la laisser s'exécuter

Une donnée utilisateur non échappée peut contenir du code. La méthode d'affichage change tout : innerHTML l'exécute, textContent la traite comme du texte. La CSP ajoute un filet de sécurité.

Deux façons d'afficher une saisie — et un filet de sécurité
🛡️ MÊME DONNÉE · deux affichages, un filet de sécurité donnée utilisateur <script>vol()</script> innerHTML insère du HTML CSP filet ✗ <script> exécuté bloqué par la CSP textContent insère du texte ✓ traité comme texte

Affichez toujours la saisie utilisateur avec textContent (jamais innerHTML) : le navigateur la traite comme du texte, pas comme du code. La CSP est un filet de sécurité qui bloque les scripts d'origine non autorisée — utile, mais elle ne remplace pas l'échappement.

🎯 Testez-vous

Six questions pour vérifier que les réflexes de sécurité front sont bien acquis.

Retour aux outils développeurs