0Pricing
Frontend Academy · Leçon

Prévention des XSS : encodage de sortie et CSP

Comprenez les XSS réfléchies, stockées et fondées sur le DOM, échappez les sorties contrôlées par l’utilisateur, évitez innerHTML avec des données non fiables et ajoutez un en-tête de Content Security Policy.

Prévention des XSS : encodage de sortie et CSP est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que le XSS ?

Les scripts intersites se produisent lorsqu'un attaquant injecte du JavaScript exécutable dans votre page. Le navigateur l'exécute avec les privilèges de votre origine : vol de cookies, détournement de sessions, modification de l'apparence de la page et redirection vers un logiciel malveillant.

Les trois formes de XSS

Stocké : le script malveillant est enregistré dans la base de données et transmis à chaque visiteur. Réfléchi : l'entrée est renvoyée dans la réponse (?q=<script>...). Basé sur le DOM : le JavaScript côté client écrit des données non fiables dans le DOM.

La cause fondamentale : innerHTML avec des données non fiables

Utiliser innerHTML (ou v-html, dangerouslySetInnerHTML) avec des chaînes contrôlées par l'utilisateur constitue le principal vecteur de XSS.

// BAD: user input rendered as HTML
el.innerHTML = userComment;  // attacker submits <img onerror=alert(1)>

// Vue equivalent:
<div v-html="userComment"></div>  // same bug

// React equivalent:
<div dangerouslySetInnerHTML={{ __html: userComment }} />  // same bug

Encodage de la sortie (valeur sûre par défaut)

Traitez les chaînes non fiables comme du texte, et non comme du HTML. React, Vue, Angular et Svelte appliquent tous ce principe par défaut dans l'interpolation {value}.

// SAFE: text content, not HTML
el.textContent = userComment;  // <script> shows as literal text

// React (auto-escaped):
<div>{userComment}</div>

// Vue (auto-escaped):
<div>{{ userComment }}</div>

Assainir le contenu lorsque le rendu HTML est nécessaire

Si vous devez réellement afficher du HTML fourni par l'utilisateur (éditeurs de texte enrichi), assainissez-le avec DOMPurify : n'écrivez jamais votre propre assainisseur à base d'expressions régulières.

import DOMPurify from 'dompurify';

const clean = DOMPurify.sanitize(userHtml);
el.innerHTML = clean; // strips <script>, on* handlers, dangerous URLs

Validation des URL

Les URL contrôlées par l'utilisateur dans href ou src peuvent déclencher une attaque XSS via les schémas javascript:.

// BAD:
<a href={userUrl}>Click</a>
// attacker submits: javascript:alert(1)

// GOOD: whitelist protocols:
function safeUrl(url) {
  if (!/^https?:\/\//.test(url) && !url.startsWith('/')) return '#';
  return url;
}

Politique de sécurité du contenu (CSP)

CSP est un en-tête de réponse HTTP qui indique au navigateur quelles sources de scripts, de styles, d'images, etc. sont autorisées. Même si un attaquant injecte un script, le navigateur refuse de l'exécuter.

Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.trusted.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:

CSP stricte avec des nonces

Pour les scripts intégrés que vous contrôlez, utilisez un nonce propre à chaque requête. Les scripts injectés par un attaquant ne disposeront pas du nonce correspondant.

// Server generates a random nonce per request:
const nonce = crypto.randomBytes(16).toString('base64');
res.setHeader('Content-Security-Policy', `script-src 'nonce-${nonce}' 'strict-dynamic'`);

// Inject into the HTML:
<script nonce="abc123">/* trusted inline code */</script>

Cookies HttpOnly et Secure

Définissez les cookies de session avec HttpOnly afin que JavaScript ne puisse pas les lire : même en cas de XSS, l'attaquant ne peut pas récupérer le jeton de session.

Set-Cookie: session=abc; HttpOnly; Secure; SameSite=Strict

Intégrité des sous-ressources (SRI)

Lors du chargement de scripts tiers via un CDN, utilisez SRI pour vérifier que leur contenu correspond à un hash. Un CDN compromis ne peut pas diffuser un script malveillant sans faire échouer la vérification du hash.

<script
  src="https://cdn.example.com/lib.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
  crossorigin="anonymous"
></script>

Types de confiance (expérimental)

Trusted Types est une fonctionnalité du navigateur (fondé sur Chromium) qui oblige les points d'injection dangereux (innerHTML) à recevoir un objet de type de confiance — ce qui empêche complètement l'insertion de chaînes.

Tester les XSS

Essayez d'injecter <img src=x onerror=alert(1)> dans chaque champ de texte qui est réaffiché. Si une alerte apparaît, votre application contient une faille XSS. Utilisez des outils tels que OWASP ZAP pour effectuer des analyses automatisées.

Vérification rapide

Pourquoi {userInput} de React est-il sûr par défaut, alors que dangerouslySetInnerHTML ne l'est pas ?

Récapitulatif&nbsp;: prévention des XSS

Privilégiez par défaut l'affichage de texte (l'expression {x} de React et {{ x }} de Vue sont sûres). Assainissez le contenu avec DOMPurify lorsque vous affichez du HTML. Autorisez uniquement certains protocoles d'URL. L'en-tête CSP (avec des nonces ou 'strict-dynamic') bloque les scripts injectés. Les cookies HttpOnly empêchent leur vol par JS. Utilisez des hash SRI pour les scripts provenant de CDN. Testez les entrées avec des charges utiles classiques.

Questions Fréquemment Posées

La leçon « Prévention des XSS : encodage de sortie et CSP » est-elle gratuite ?

Oui — le texte complet de « Prévention des XSS : encodage de sortie et CSP » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Prévention des XSS : encodage de sortie et CSP » ?

Comprenez les XSS réfléchies, stockées et fondées sur le DOM, échappez les sorties contrôlées par l’utilisateur, évitez innerHTML avec des données non fiables et ajoutez un en-tête de Content Securit… Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Prévention des XSS : encodage de sortie et CSP » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Prévention des XSS : encodage de sortie et CSP
  2. CSRF : cookies SameSite et jetons
  3. Content Security Policy : nonce et hachage
  4. Flux OAuth côté frontend
← Retour à Frontend Academy