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

Anwendungsszenarien und Lösungen für die MySQL-Komprimierung

innerHTML-Anwendung

Anwendungsszenarien und Lösungen für die MySQL-Komprimierung

Auszeichnungssprache - Liste

Lösung für das Problem, dass der Bridge-Modus der virtuellen Maschine von VMware15 nicht auf das Internet zugreifen kann

Eine kurze Diskussion über bedingte Kodierung und Seitenlayout der VUE-Uni-App

MySQL- und SQLYog-Installationstutorial mit Bildern und Text

Implementierung der Funktion der kreisförmigen prozentualen Fortschrittsbalkenkomponente von Vue

Teilen Sie 8 sehr nützliche CSS-Entwicklungstools

Detaillierte Erläuterung der Mybatis-Sonderzeichenverarbeitung

WeChat-Applet-Picker - Mehrspalten-Selektor (Modus = MultiSelector)

Grafische Installationsschritte für VMware vSphere 6.7 (ESXI 6.7)

Artikel empfehlen

Docker-Installation von Nginx Probleme und Fehleranalyse

Verschiedene Möglichkeiten der Ausführung im Hintergrund von Linux (Zusammenfassung)

So installieren Sie den Chrome-Browser auf CentOS 7

Detaillierte Erklärung zu anonymen Slots und benannten Slots in Vue

So sperren Sie eine virtuelle Konsolensitzung unter Linux

Erste Schritte mit den JavaScript-Grundlagen

Win10+Ubuntu 20.04 LTS Dualsysteminstallation (UEFI + GPT) (Bilder und Text, Warnung vor mehreren Bildern)

Zwei Möglichkeiten zum Aktivieren der Firewall im Linux-Dienst

Detaillierte Erklärung zum Ändern des Standardstils der externen Komponente Vant basierend auf der Vue-CLI-Entwicklung

Der Unterschied zwischen den vier Dateierweiterungen .html, .htm, .shtml und .shtm

Detailliertes Beispiel zum Erstellen und Löschen von Tabellen in MySQL

Jmeter stellt eine Verbindung zum Datenbankprozessdiagramm her

Detailliertes Tutorial zur Verwendung des Prettier Code-Plugins in vscode

Implementierung der Installation von Docker in einer Win10-Umgebung

Vue Grundlagen Listener Detaillierte Erklärung