Le commentaire piégé
Le site du lycée a un mur de commentaires. Tout le monde peut écrire. Un élève tape un texte étrange à la place d’une phrase.
Soudain, le mur change d’aspect pour tous les visiteurs.
Comment un simple texte a-t-il pu changer la page ? C’est ce qu’on va comprendre.
Mots-clés
| Mot | Ce que ça veut dire | Exemple |
|---|---|---|
| Injection | Un texte tapé par un visiteur est pris pour du code. | <b>gras</b> devient du gras |
| Saisie | Ce que le visiteur tape ou choisit. | un commentaire |
| Échapper | Montrer le texte tel quel, sans le lire comme du code. | textContent |
| Confiance | Croire qu’une donnée est sûre. Pour une saisie, on ne la donne jamais. | un âge de 500 ans |
| Secret | Une information qu’on ne doit pas montrer : un mot de passe, une clé. | un mot de passe |
| Côté serveur | Ce qui se passe sur le serveur, hors de la page. Le visiteur ne peut pas le changer. | la vérification d’un âge |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
À toi : un mur de commentaires fragile
<p>Laisse un commentaire :</p>
<input id="commentaire" value="Super match !" size="30">
<button id="envoyer">Publier</button>
<div id="mur"></div>
Pourquoi ça arrive
Avec innerHTML, le navigateur lit le texte comme du HTML. Les balises tapées par le visiteur deviennent de vraies balises.
Ici, le visiteur a mis du gras et un titre. Une personne mal intentionnée pourrait mettre un faux formulaire pour voler des mots de passe.
On appelle cela une injection.
Contrôle rapide : l’injection
À toi de jouer
Contrôle rapide : l’injection
3 questionsTes réponses sont corrigées ici et ne sont pas conservées. Un compte garde tes résultats.
À toi : le même mur, réparé
<p>Laisse un commentaire :</p>
<input id="commentaire" value="Super match !" size="30">
<button id="envoyer">Publier</button>
<div id="mur"></div>
Danger, exemple, réponse
| Danger | Exemple | Réponse |
|---|---|---|
| Un texte devient du code | Un commentaire avec des balises | Afficher avec textContent |
| Une vérification contournée | Un âge de 500 ans envoyé sans passer par la page | Revérifier côté serveur |
| Un secret visible | Un mot de passe écrit dans le code JavaScript | Ne jamais le mettre dans la page |
| Une information dans l’adresse | Un mot de passe envoyé avec GET | Utiliser POST avec https |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
La règle d’or
Attention
Tout ce qui vient du visiteur peut être faux, trop long ou piégé. La page peut aider, mais seul le serveur décide. Et un secret ne se met jamais dans une page.