innerHTML et htmlspecialchars

emualliug · 13 Février 2024

Bon, .innerHTML pour écrire des données dans le DOM c'est pas idéal, mais c'est quand même bien pratique. Mais avec des données utilisateurs, forcément, ça devient touchy.

Il se trouve que ça répondrai pas mal à un besoin. J'ai une fenêtre modale avec un texte à afficher. La fenêtre peut être appelée par plusieurs boutons sur la page ; lors du lancement de la modale, je récupère le bouton qui l'a appelée, et dans un attribut data-* de celui-ci le texte à afficher. Le texte en question est légèrement mis en forme (en gros du texte mis en exergue avec <strong>), mais mélangé à des données entrées par l'utilisateur.

J'avais pensé à assainir les données utilisateur avec un petit htmlspecialchars() dans le style :

PHP:

echo 'data-texte="Nom&nbsp;: <strong>' . htmlspecialchars($donneeUtilisateur) . '</strong>"';

Mais j'ai le sentiment que .innerHTML "décode" les caractères spéciaux HTML, de sorte que ce que je projetais n'es pas suffisant.

Pour le moment j'envisage deux possibilités. Soit tout encoder deux fois genre avec htmlspecialchars(htmlspecialchars($donneeUtilisateur)) (ou une fonction qui le fait deux fois, mais vous comprenez l'idée), soit encoder les données utilisateurs, puis le tout dans le style :

PHP:

echo 'data-texte="' . htmlspecialchars('Nom&nbsp;: <strong>' . htmlspecialchars($donneeUtilisateur) . '</strong>') . '"';

1) est-ce qu'il y a une manière plus intelligente de procéder ?

2) sur les deux possibilités que j'envisage y-en a-t-il une qui est meilleure que l'autre ?

3) pourquoi .innerHTML interpète les caractères HTML ? ou qu'est-ce que je comprends mal ?

spout · 13 Février 2024

Ici : https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
et ici : https://medium.com/@verity.carlos/w...nnerhtml-and-what-to-use-instead-ed99d064a416
Ils parlent de la différence innerText/textContent.
Perso je ne partirais pas sur un double htmlspecialchars. Ni un mix des 2 comme ton premier exemple.

PHP:

<!doctype html>
<html>
<body>
<p id="test" data-texte="<?php echo htmlspecialchars('<strong>Foo > Bar > Baz</strong>'); ?>"></p>
<p id="test2"></p>
<p id="test3"></p>

<script>
document.addEventListener('DOMContentLoaded', function () {
    let test = document.getElementById('test');
    let test2 = document.getElementById('test2');
    let test3 = document.getElementById('test3');
   
    test2.innerHTML = test.dataset.texte;
    test3.textContent = test.dataset.texte;
});
</script>
</body>
</html>

emualliug · 13 Février 2024

innerText est en effet à privilégier, et plus particulièrement encore avec des données entrées par l'utilisateur.

Mais comment faire pour insérer des données avec une légère mise en forme sans que ça devienne ultra compliqué à faire ?

La difficulté étant que, dans mon cas, le texte n'est bien sûr pas toujours le même, les données non plus, et la partie à mettre en exergue n'est pas à la même position (sinon en effet je ne remplacerai que le contenu du <strong> avec un innerText).

spout · 14 Février 2024

Pour du HTML plus complexe, je partirais sur le tag <template> : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
Tout ceci en vanilla JS.
(maintenant bcp de dev se tournent vers React/Vue.js/Angular/HTMX/...)

emualliug · 14 Février 2024

Ouais c'est pas mal <template>, mais je ne le trouve adapté que pour les choses un peu plus complexes (plusieurs balises imbriquées, avec des attributs, etc.) nécessitant d’être répétées à la volée.

Franchement, là ça me donnerait l'impression d'utiliser une scie circulaire pour couper le bout d'une allumette. Surtout que je suis pas particulièrement dans le cas d'un modèle à réutiliser plusieurs fois, il me faudrait faire autant de template que de boutons.

React, Vue.js et consorts, je n'arrive pas à m'y faire. En fait de façon générale, à peu près tous les framework, c'est pareil. C'est sans doute un tort de ne pas m'y pencher, mais bon…

Fem · 15 Février 2024

emualliug a dit:
Ouais c'est pas mal <template>, mais je ne le trouve adapté que pour les choses un peu plus complexes (plusieurs balises imbriquées, avec des attributs, etc.) nécessitant d’être répétées à la volée.

Franchement, là ça me donnerait l'impression d'utiliser une scie circulaire pour couper le bout d'une allumette. Surtout que je suis pas particulièrement dans le cas d'un modèle à réutiliser plusieurs fois, il me faudrait faire autant de template que de boutons.

React, Vue.js et consorts, je n'arrive pas à m'y faire. En fait de façon générale, à peu près tous les framework, c'est pareil.
Par exemple, comme ici. C'est sans doute un tort de ne pas m'y pencher, mais bon…

Différents cadres et méthodes ont leurs propres avantages et inconvénients. si vous avez juste besoin de créer quelques boutons, je vous recommande d'utiliser JavaScript

WebRankInfo · 15 Février 2024

c'est quoi l'idée de citer tout le message précédent et d'y cacher un lien ? pas très malin de spammer le forum comme ça