Innerhtml -Anwendung

Blanks Blog: http://www.planabc.net/

Die Verwendung von Innerhtml -Attributen ist sehr beliebt, da es eine einfache Möglichkeit bietet, den Inhalt eines HTML -Elements vollständig zu ersetzen. Eine andere Methode besteht darin, die DOM Level 2 API (Removechild, CreateLement, AppendChild) zu verwenden. Es ist jedoch offensichtlich, dass die Verwendung von Innerhtml zur Änderung des DOM -Baumes ein sehr einfacher und effektiver Weg ist. Sie müssen jedoch wissen, dass Innerhtml einige Probleme mit seinen eigenen hat:

Wenn eine HTML -Zeichenfolge ein Skript -Tag (<Script -Defer>… </script>) enthält, der als Aufhebung markiert ist, wird ein Skript -Injektionsangriff im Internet Explorer verursacht, wenn die Innerhtml -Eigenschaft nicht ordnungsgemäß behandelt wird. Das Setzen von InnerHTML wird vorhandene HTML -Elemente zerstören, die Ereignishandler registriert haben, was bei einigen Browsern potenzielle Speicherleckage verursachen kann.

Es gibt mehrere andere kleinere Nachteile, die erwähnenswert sind:

Sie können keine Referenzen auf die gerade erstellten Elemente erhalten. Sie müssen den Code manuell hinzufügen, um diese Referenzen (mit DOM -APIs) zu erhalten. Sie können Innerhtml -Attribute nicht in allen HTML -Elementen in allen Browsern festlegen (beispielsweise können Sie nicht die Innerhtml -Attribute für Zeilenelemente einer Tabelle festlegen).

Ich befasse mich mehr mit Sicherheits- und Speicherproblemen im Zusammenhang mit der Verwendung von Innerhtml -Eigenschaften. Offensichtlich ist dies kein neues Problem, und es gibt bereits Menschen, die Wege mit einigen dieser Probleme entwickelt haben.

Douglas Crockford schreibt eine Reinigungsfunktion, die einige Schleifenreferenzen abbricht, die durch HTML -Element -Registrierungsereignisereignisse zur Handhabung von Funktionen verursacht werden, und es ermöglicht dem Müllsammler, diese HTML -Elemente zu dem freien Speicher zu verknüpfen.

Das Entfernen von Skript -Tags aus HTML -Zeichenfolgen ist nicht so einfach, wie es scheint. Ein regelmäßiger Ausdruck kann den gewünschten Effekt erzielen, obwohl es schwierig ist zu wissen, ob alle Möglichkeiten abgedeckt sind. Hier ist meine Lösung:

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

Kombinieren wir nun die beiden Techniken zu einer separaten SetInnerhtml -Funktion und binden wir die SetInnerhtml -Funktion an yahoo.util.dom in yui:

Yahoo.util.dom.setInnerhtml = function (el, html) {

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

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

null zurückkehren;

}

// Zirkuläre Referenz abbrechen

(Funktion (o) {

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

if (a) {

l = a.länge;

für (i = 0; i <l; i = 1) {

n = a [i] .Name;

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

o [n] = null;

}

}

}

a = O.Childnodes;

if (a) {

l = a.länge;

für (i = 0; i <l; i = 1) {

C = O.Childnodes [i];

// Kinderknoten klären

Argumente.Callee (c);

// Entfernen Sie alle mit Elementen registrierten Hörer über Yui's AddListener

Yahoo.util.event.purgeElement (c);

}

}

}) (el);

// Skript aus der HTML -Zeichenfolge entfernen und die InnerHTML -Eigenschaft festlegen

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

// Geben Sie den Verweis auf den ersten untergeordneten Knoten zurück

return el.Firstchild;

};

Wenn diese Funktion noch etwas oder etwas in der Regex fehlen sollte, lassen Sie es mich bitte wissen.

Offensichtlich gibt es viele andere Möglichkeiten, um böswilligen Code auf die Webseite zu bringen. Die SetInnerHTML-Funktion kann nur das Ausführungsverhalten von <Script> -Tags in allen Browsern an der A-Klasse normalisieren. Wenn Sie bereit sind, HTML -Code zu injizieren, dem Sie nicht vertrauen können, sollten Sie zuerst auf der Serverseite filtern, und es gibt bereits viele Bibliotheken, die dies tun können.

Originaltext: Julien Lecomtes "Das Problem mit Innerhtml"