En effet, c’est une faille de sécurité dans 2 cas :
Si vous laissez l’utilisateur ou une application tierce injecter de l’html.
Rien n’est plus parlant qu’un exemple :
Imaginons que nous faisons appelle à une API et que nous insérons du texte via innerHTML, sauf que nous n’avons pas vérifier si la donnée qu’on reçoit est bien du texte et non un élément html.
Notre html :
Notre javascript :
Le résultat de tout ça :
Nous venons de voir un exemple d’une faille xss.
Maintenant que nous savons que cela peut devenir problématique d’utiliser la propriétés innerHTML, voyons ce qu’il est préférable d’utiliser :
La propriété textContent
La propriété textContent récupère ou injecte du texte et seulement du texte.
un exemple est plus parlant :
Notre html :
Notre JS :
Notre résultat :
Nous pouvons voir que quoi qu’on essaye de mettre, cela sera mis en tant que contenu de notre élément et non pas en tant qu’ élément de notre DOM.
