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

Detaillierte Erklärung des Linux-Netstat-Befehls

innerHTML-Anwendung

Detaillierte Erklärung des Linux-Netstat-Befehls

Der beste Weg, ein JAR-Paketprojekt unter einem Centos7-Server zu starten

Detaillierte Erläuterung zur Verwendung von Docker zum Bereitstellen der Django + MySQL8-Entwicklungsumgebung

Detaillierte Erläuterung des Vue-Routing-Routers

Ein kurzer Vergleich von Props in React

Detaillierte Erläuterung des MySQL-Kombinationsindex und des ganz links stehenden Übereinstimmungsprinzips

Zusammenfassung zur Anwendung dekorativer Elemente im Webdesign

Nodejs-Fehlerbehandlungsprozessaufzeichnung

Die 9 besten ausländischen Websites mit kostenlosem Bildmaterial

Installations- und Konfigurationsmethode für komprimierte MySQL Community Server-Pakete

Artikel empfehlen

So implementieren Sie Zeilenumbrüche im Texteingabebereich von Textarea

Grundlegende Verwendung und Beispiele von yum (empfohlen)

CSS3 realisiert verschiedene grafische Effekte kleiner Pfeile

HTML-Cellpadding- und Cellspacing-Attribute in Bildern erklärt

Der beste Weg, freigegebene Verzeichnisse beim Start von Ubuntu 16.04 unter Virtualbox automatisch zu mounten

Grafisches Tutorial zur Installation und Konfiguration von MySQL5.7+ MySQL Workbench unter MAC

Vue implementiert Mehrfachauswahl im unteren Popup-Fenster

JS implementiert kreisförmiges Ziehen und Schieben des Fortschrittsbalkens

Erstellen von responsiven E-Mails mit Vue.js und MJML

So lösen Sie das Problem verstümmelter chinesischer Zeichen beim Einfügen von Tabellendaten in MySQL

Implementierung einer zirkulären Scroll-Listenfunktion basierend auf Vue

Detaillierte Erklärung der Linux-RPM- und Yum-Befehle und -Verwendung

Zwei Möglichkeiten zum Zurücksetzen des Root-Passworts einer MySQL-Datenbank mit lnmp

Detaillierte Erklärung zur Verwendung des <meta>-Tags in HTML

Details zu verschiedenen Schriftformaten in HTML-Webseiten