Afficher des avis sans danger — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 7)

Afficher des avis sans danger

Le DOM : lire et modifier la page · niveau 2

Énoncé

Des avis de lecteurs { auteur, texte } arrivent d'un serveur et peuvent contenir n'importe quoi. Écrire ajouterAvis(liste, avis) qui ajoute à la liste un <li> contenant le nom de l'auteur en gras, suivi de « : » et du texte, sans jamais interpréter de HTML. Vérifier avec un auteur nommé <img src=x onerror=alert(1)>.

Corrigé


const avis = [
  { auteur: "Lina", texte: "Très clair, les exercices sont <b>excellents</b>." },
  { auteur: "<img src=x onerror=alert(1)>", texte: "Bof." },
];

function ajouterAvis(liste, { auteur, texte }) {
  const li = document.createElement("li");
  const nom = document.createElement("strong");
  nom.textContent = auteur;
  li.append(nom, ` : ${texte}`);
  liste.append(li);
}

const liste = document.querySelector("#avis");
for (const a of avis) {
  ajouterAvis(liste, a);
}
console.log(liste.querySelectorAll("img, b").length, liste.children.length);
console.log(liste.lastElementChild.textContent);


0 2
<img src=x onerror=alert(1)> : Bof.

Ni le <img> de l'auteur malveillant ni le <b> du premier avis ne sont devenus des éléments : 0 élément trouvé, et le dernier avis s'affiche tel qu'il a été écrit. append insère une chaîne comme un nœud texte.