innerHTML application_HTML/Xhtml_production de pages web

Blog de Blank : http://www.planabc.net/ L'utilisation de l'attribut
innerHTML est très populaire car il offre un moyen simple de remplacer complètement le contenu d'un élément HTML. Une autre méthode consiste à utiliser l'API DOM niveau 2 (removeChild, createElement, appendChild). Mais évidemment, utiliser innerHTML pour modifier l’arborescence DOM est une méthode très simple et efficace. Cependant, vous devez être conscient que innerHTML présente ses propres problèmes :

Lorsqu'une chaîne HTML contient une balise de script (

) marquée comme différée, une attaque par injection de script peut se produire sur Internet Explorer si l'attribut innerHTML est mal géré. La configuration de innerHTML détruira les éléments HTML existants qui ont des gestionnaires d'événements enregistrés, entraînant un risque potentiel de fuite de mémoire sur certains navigateurs.

Il existe plusieurs autres inconvénients mineurs qui méritent également d'être mentionnés :

Vous ne pouvez pas obtenir de références aux éléments que vous venez de créer, vous devez ajouter manuellement du code pour obtenir ces références (à l'aide des API DOM). Vous ne pouvez pas définir l'attribut innerHTML sur tous les éléments HTML dans tous les navigateurs (par exemple, Internet Explorer ne vous permet pas de définir l'attribut innerHTML sur l'élément row d'un tableau).

Je suis plus préoccupé par les problèmes de sécurité et de mémoire associés à l'utilisation de l'attribut innerHTML. Évidemment, ce n’est pas un problème nouveau, et il existe déjà des personnes talentueuses qui ont trouvé des solutions à certains de ces problèmes.
Douglas Crockford a écrit une fonction de nettoyage qui est responsable de la rupture de certaines références circulaires provoquées par des éléments HTML enregistrant des gestionnaires d'événements et permettant au garbage collector de libérer la mémoire associée à ces éléments HTML.
Supprimer les balises de script des chaînes HTML n'est pas aussi simple qu'il y paraît. Une expression régulière peut produire l’effet souhaité, même s’il est difficile de savoir si elle couvre toutes les possibilités. Voici ma solution : <script>/</script>[^>]*>[Ss]*?]*>/ig

Maintenant, combinons ces deux techniques en une seule fonction setInnerHTML et lions la fonction setInnerHTML au YAHOO.util.Dom de YUI :
YAHOO.util.Dom.setInnerHTML = function (el, html) {
el = YAHOO.util.Dom.get(el);
if (!el || typeof html !== 'string ') {
return null;
}
// Abandonner la référence circulaire
(fonction (o) {
var a = o.attributes, i, l, n, c;
if (a) {
l = a.length; for (i = 0; i n = a[i].name;
if (typeof o[n] === 'function') {
o[n] = null;
}
>
}
a = o.childNodes;
if (a) {
l = a.length; for (i = 0; i c = o.childNodes[i];
// Effacer les nœuds enfants
arguments.callee(c);
// Supprimez tous les auditeurs enregistrés sur l'élément via addListener de YUI
YAHOO.util.Event.purgeElement(c);
}
}
})(el);
// Supprimez le script de la chaîne HTML et définissez l'attribut innerHTML <script> el.innerHTML = html.replace(/</script>[^>]*>[Ss]*?
]*>/ig, " ");
// Renvoie la référence du premier nœud enfant
return el.firstChild;
};
S'il y a autre chose que cette fonction devrait faire ou si quelque chose manque dans l'expression régulière, veuillez me le faire savoir. <script>Évidemment, il existe de nombreuses autres façons d’injecter du code malveillant sur des pages Web. La fonction setInnerHTML normalise uniquement le comportement d'exécution de la balise <br /> sur tous les navigateurs de niveau A. Si vous envisagez d'injecter du code HTML non fiable, assurez-vous d'abord de le filtrer côté serveur, de nombreuses bibliothèques peuvent le faire. <script defer>&hellip;</script>Texte original : "Le problème avec innerHTML" par Julien Lecomte