innerHTML-Anwendung

Blanks Blog: http://www.planabc.net/
Die Verwendung der innerHTML-Eigenschaft ist sehr beliebt, da sie eine einfache Möglichkeit bietet, den Inhalt eines HTML-Elements vollständig zu ersetzen. Ein anderer Ansatz ist die Verwendung der DOM Level 2-API (removeChild, createElement, appendChild). Es ist jedoch offensichtlich, dass die Verwendung von innerHTML zum Ändern des DOM-Baums eine sehr einfache und effektive Methode ist. Sie müssen sich jedoch darüber im Klaren sein, dass innerHTML einige eigene Probleme mit sich bringt:

Wenn eine HTML-Zeichenfolge ein als „defer“ gekennzeichnetes Skript-Tag (<script defer>…</script>) enthält, kann im Internet Explorer ein Skript-Injektionsangriff erfolgen, wenn das innerHTML-Attribut nicht richtig behandelt wird. Durch das Festlegen von innerHTML werden vorhandene HTML-Elemente zerstört, für die Ereignishandler registriert sind. Dies kann in einigen Browsern möglicherweise zu Speicherlecks führen.
Es gibt noch ein paar weitere kleinere Nachteile, die erwähnenswert sind:

Sie können keine Verweise auf Elemente abrufen, die Sie gerade erstellt haben. Sie müssen manuell Code hinzufügen, um diese Verweise abzurufen (mithilfe von DOM-APIs). Sie können die innerHTML-Eigenschaft nicht für alle HTML-Elemente in allen Browsern festlegen (beispielsweise lässt Internet Explorer das Festlegen der innerHTML-Eigenschaft für Tabellenzeilenelemente nicht zu).
Ich mache mir mehr Sorgen über die Sicherheits- und Speicherprobleme, die mit der Verwendung der innerHTML-Eigenschaft verbunden sind. Offensichtlich handelt es sich hierbei nicht um neue Probleme und es gibt bereits kluge Leute, die Wege gefunden haben, einige dieser Probleme zu umgehen.
Douglas Crockford hat eine Bereinigungsfunktion geschrieben, die dafür verantwortlich ist, einige zirkuläre Referenzen aufzuheben, die durch bei HTML-Elementen registrierte Ereignishandler verursacht werden, und es dem Garbage Collector zu ermöglichen, den mit diesen HTML-Elementen verbundenen Speicher freizugeben.
Das Entfernen von Skript-Tags aus einer HTML-Zeichenfolge ist nicht so einfach, wie es scheint. Ein regulärer Ausdruck kann das Erwartete bewirken, obwohl schwer zu sagen ist, ob alle Möglichkeiten abgedeckt sind. Hier ist meine Lösung:
/<Skript[^>]*>[\S\s]*?<\/Skript[^>]*>/ig
Kombinieren wir nun diese beiden Techniken in einer einzigen setInnerHTML-Funktion und binden die setInnerHTML-Funktion an YUIs YAHOO.util.Dom:
YAHOO.util.Dom.setInnerHTML = Funktion (el, html) {
el = YAHOO.util.Dom.get(el);
wenn (!el || Typ von html !== 'Zeichenfolge') {
gibt null zurück;
}
// Den Zirkelverweis aufheben
(Funktion (o) {
var a = o.Attribute, i, l, n, c;
wenn (a) {
l = a.Länge;
für (i = 0; i < l; i = 1) {
n = a[i].Name;
wenn (Typ von o[n] === 'Funktion') {
o[n] = null;
}
}
}
a = o.Unterknoten;
wenn (a) {
l = a.Länge;
für (i = 0; i < l; i = 1) {
c = o.childNodes[i];
// Untergeordnete Knoten löschen
argumente.callee(c);
// Entfernen Sie alle auf dem Element registrierten Listener über YUIs addListener
YAHOO.util.Event.purgeElement(c);
}
}
})(el);
//Entfernen Sie das Skript aus der HTML-Zeichenfolge und legen Sie die Eigenschaft innerHTML fest
el.innerHTML = html.replace(/<script[^>]*>[\S\s]*?<\/script[^>]*>/ig, "");
//Gibt eine Referenz auf den ersten untergeordneten Knoten zurück
gibt el.erstesKind zurück;
};
Wenn diese Funktion noch etwas anderes haben sollte oder wenn mir im regulären Ausdruck etwas fehlt, lassen Sie es mich bitte wissen.
Natürlich gibt es noch viele andere Möglichkeiten, Schadcode in eine Webseite einzuschleusen. Die Funktion setInnerHTML normalisiert das Ausführungsverhalten von <script>-Tags nur in allen A-Klasse-Browsern. Wenn Sie nicht vertrauenswürdigen HTML-Code einfügen möchten, stellen Sie sicher, dass dieser zuerst auf dem Server gefiltert wird. Es gibt viele Bibliotheken, die dies können.
Originalartikel: Das Problem mit innerHTML von Julien Lecomte

<<: Wie MySQL implizite Standardwerte verarbeitet

>>: Dockerfile-Implementierungscode beim Starten von zwei Prozessen in einem Docker-Container

Analyse von MySQL-Beispielen für doppelte und redundante Indizes

innerHTML-Anwendung

Analyse von MySQL-Beispielen für doppelte und redundante Indizes

Sprechen Sie über wichtige Unterverzeichnisprobleme im Linux-System

Detaillierte Erklärung der JavaScript-Array-Deduplizierung

CSS-Zusammenfassungsnotizen: Beispiele für Transformationen, Übergänge und Animationen

Ajax jquery realisiert den Aktualisierungseffekt eines Div auf der Seite

Eine kurze Diskussion über Schreibregeln für Docker Compose

Quellcodeanalyse des Nodejs-Modulsystems

So gehen Sie mit dem Fehler beim Einfügen seltener Zeichen in MySQL um (falscher Zeichenfolgenwert)

Lösen Sie das Problem, dass Navicat keine Verbindung zu MySQL auf dem Linux-Server herstellen kann

Webdesign-Erfahrung: 5 hervorragende Webdesign-Konzepte, vollständige Analyse (Bilder)

Artikel empfehlen

Vue3.0 implementiert die Fallstudie zum Lupeneffekt

Tipps zum MySQL-Abfragecache

Einführung in die Installation von JDK unter Linux, einschließlich der Deinstallation von OpenJDK

Lösen Sie das Problem, dass der häufig verwendete Linux-Befehl "ll" ungültig ist oder der Befehl nicht gefunden wird

Detaillierte Analyse der Syntax von Mysql-Updates zum Ändern mehrerer Felder und

So verwenden Sie gdb zum Debuggen von Kerndateien in Linux

CentOS 7: Beispielcode zum Festlegen des Grub-Passworts und zur Einzelbenutzeranmeldung

Eine kurze Diskussion über JS-Prototypen und Prototypenketten

Miniprogramm zur Implementierung des Paging-Effekts

Mit wie vielen Pixeln sollte eine Webseite gestaltet werden?

Das mobile Vue-Terminal realisiert den Finger-Gleiteffekt

Neue Blockbereichsfunktion von JavaScript ES

Detaillierte Erklärung generischer Fälle in TypeScript

Tabelle td Bild horizontal und vertikal zentriert Code

Beispielcode für die Verwendung von @media in CSS3 zur Anpassung einer Webseite