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

8 leistungsstarke Techniken zum Erstellen von HTML-Webseiten

Der Typ der Schaltfläche ist nicht als „Senden“ angegeben. Durch Klicken auf die Schaltfläche wird nicht zur angegebenen URL gesprungen.

Heutzutage wird aufgrund der Projektanforderungen ...

Der Unterschied zwischen dem herkömmlichen Tomcat-Startdienst und dem in Springboot integrierten Tomcat-Startdienst (empfohlen)

Spring-Integration mit SpringMVC Die web.xml-Konf...

innerHTML-Anwendung

8 leistungsstarke Techniken zum Erstellen von HTML-Webseiten

Detaillierte Erklärung des MySQL-Covering-Index

Detailliertes Tutorial zur Installation von ffmpeg unter Linux

Detaillierte Erläuterung spezieller Phänomene, Beispiele für die Sleep-Funktion in MySQL

Detaillierte Erklärung der JavaScript-Array-Deduplizierung

Detaillierte Erklärung zum Festlegen des Änderungswerts innerhalb einer bestimmten Zeit in Zabbix

Detaillierte Erklärung der Vuex-Umgebung

Was ist Tabellenpartitionierung und -partitionierung?MySql-Datenbankpartitionierung und Tabellenpartitionierungsmethode

Eine kurze Diskussion über die Unterschiede zwischen den drei wichtigsten Datenbanken: Mysql, SqlServer und Oracle

Grundlegendes Tutorial zur Steuerung des mobilen Roboters Turtlebot3 mit ROS

Artikel empfehlen

Tutorial zur HTML-Tabellenauszeichnung (29): Farbattribut für helle Zellenränder BORDERCOLORLIGHT

Analyse der Verwendung von Schleifenanweisungen (WHILE, REPEAT und LOOP) in gespeicherten MySQL-Prozeduren

js implementiert dynamisch Operationen zum Hinzufügen und Löschen von Tabellen

Der Typ der Schaltfläche ist nicht als „Senden“ angegeben. Durch Klicken auf die Schaltfläche wird nicht zur angegebenen URL gesprungen.

Beispielcode zur Implementierung transparenter Verlaufseffekte mit CSS

Multiservice-Image-Packaging-Vorgang von Dockerfile unter Aufsicht

Installieren Sie Linux mithilfe einer virtuellen VMware-Maschine (CentOS7-Image).

Der Unterschied zwischen dem herkömmlichen Tomcat-Startdienst und dem in Springboot integrierten Tomcat-Startdienst (empfohlen)

Kurze Analyse des MySQL-Zeichensatzes, der Datenbankwiederherstellungsfehler verursacht

Detaillierte Erläuterung der nahtlosen horizontalen LVM-Festplattenerweiterung basierend auf Linux

So kompilieren und installieren Sie OpenCV unter Ubuntu

JavaScript implementiert einfaches Scrollfenster

Implementierung eines einfachen Rechners auf Basis von JavaScript

Detaillierte Erklärung der .bash_profile-Datei im Linux-System

Tutorial zur Installation und Konfiguration der kostenlosen Installationsversion von MySQL 5.7.20\5.7.21