Application innerhtml

Blog de Blank: http://www.planabc.net/

L'utilisation d'attributs innerHTML est très populaire car elle fournit un moyen simple de remplacer complètement le contenu d'un élément HTML. Une autre méthode consiste à utiliser l'API DOM Level 2 (RemoveChild, CreateElement, APPENDCHILD). Mais il est évident que l'utilisation d'innerhtml pour modifier l'arbre Dom est un moyen très facile et efficace. Cependant, vous devez savoir qu'InnerHTML a quelques problèmes avec les siens:

Lorsqu'une chaîne HTML contient une balise de script (<destruction de script>… </cript>) marqué comme report, si la propriété InnerHTML est mal gérée, une attaque d'injection de script sera causée sur Internet Explorer. La définition de InnerHTML détruira les éléments HTML existants qui ont des gestionnaires d'événements enregistrés, ce qui peut provoquer une fuite de mémoire potentielle sur certains navigateurs.

Il existe plusieurs autres inconvénients mineurs, qui méritent 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 le code manuellement pour obtenir ces références (en utilisant les API DOM). Vous ne pouvez pas définir des attributs innerHTML sur tous les éléments HTML dans tous les navigateurs (par exemple, Internet Explorer ne vous permet pas de définir des attributs innerHTML sur les éléments de ligne d'une table).

Je suis plus préoccupé par les problèmes de sécurité et de mémoire liés à l'utilisation des propriétés innerHTML. De toute évidence, ce n'est pas un nouveau problème, et il y a déjà des gens qui ont trouvé des moyens de contourner certains de ces problèmes.

Douglas Crockford écrit une fonction de nettoyage qui interdit certaines références de boucle causées par les fonctions de traitement des événements d'enregistrement des éléments HTML et permet au collecteur des ordures de libérer la mémoire associée à ces éléments HTML.

La suppression des balises de script des chaînes HTML n'est pas aussi simple qu'il n'y paraît. Une expression régulière peut réaliser l'effet souhaité, bien qu'il soit difficile de savoir si toutes les possibilités sont couvertes. Voici ma solution:

/ <script [^>] *> [/ s / s] *? <// script [^>] *> / ig

Maintenant, combinons les deux techniques dans une fonction SetInnerHtml distincte et lions la fonction SetInnerHtml à yahoo.util.dom dans yui:

Yahoo.util.dom.setinnerhtml = fonction (el, html) {

el = yahoo.util.dom.get (el);

if (! el || typeof html! == 'String') {

retourner null;

}

// About référence circulaire

(fonction (o) {

var a = o.attributes, i, l, n, c;

if (a) {

L = A.Length;

pour (i = 0; i <l; i = 1) {

n = a [i] .name;

if (typeof o [n] === 'fonction') {

o [n] = null;

}

}

}

a = o.childNodes;

if (a) {

L = A.Length;

pour (i = 0; i <l; i = 1) {

c = o.childnodes [i];

// Clear nœuds enfants

arguments.Callee (c);

// Supprime tous les auditeurs enregistrés avec des éléments via AddListener de Yui

Yahoo.util.event.purgeelement (c);

}

}

}) (el);

// supprimer le script de la chaîne HTML et définir la propriété innerHTML

el.innerhtml = html.replace (/ <script [^>] *> [/ s / s] *? <// script [^>] *> / ig,);

// Renvoie la référence au premier nœud enfant

retour El.Firstchild;

};

Si cette fonction doit avoir autre chose ou quelque chose qui manque dans le regex, veuillez me le faire savoir.

De toute évidence, il existe de nombreuses autres façons d'injecter du code malveillant sur la page Web. La fonction SetInnerHTML ne peut que normaliser le comportement d'exécution des balises <cript> sur tous les navigateurs de qualité A. Si vous êtes prêt à injecter du code HTML auquel vous ne pouvez pas faire confiance, assurez-vous de filtrer d'abord le côté serveur, et il existe déjà de nombreuses bibliothèques qui peuvent le faire.

Texte original: "Le problème avec Innerhtml de Julien Lecomte" de Julien Lecomte "de Innerhtml"