logo

Entkommen von X InnerHTML

jede Kommentare sind sehr willkommen; Feedback/Fragen willkommen!

Flucht- und Datenkanäle

Was ist ein Escape-Code? Warum verwenden wir es?

Escape-Code versucht, ein komplexes, aber grundlegendes Problem zu lösen, wie ein Computer Daten als Stream liest und verarbeitet, z. B. Drucken oder Ausführen. Wenn wir ein " Zitat sehen , nur einer, es ist nur ein bisschen Text, aber für einen Computer ist es ein ganzer Befehl, eine Deklaration von Daten! Wenn wir Daten weitergeben wollen, müssen wir angeben, welchen Typ und wie der Computer sie lesen soll.

Escape-Code-Beispiel:
'<imgsrc="x"onerror="alert(1)">';

Wenn Sie einem Benutzer ein Eingabefeld zur Verfügung stellen, muss der Computer die Eingabe übernehmen und sie irgendwie in einer Variablen speichern. Wenn wir dann zurückgehen und dem Computer sagen, er soll die Variable lesen; Wir nennen diese Variable, und wir haben unsere Zuweisungs-/Aufrufschleife. Wenn wir eine Eingabe DIREKT einer Variablen zuweisen und sie aufrufen, ausführen Code.

In einer intelligenten Komponente können wir die Manipulation von Daten durch diese Streams nicht vermeiden und MÜSSEN daher irgendeine Form von Escape-Code verwenden . Unser Escape-Code kann uns helfen, Strings und Eingaben richtig zu interpretieren, was uns nicht nur ermöglicht, Code frei zu schreiben, sondern auch Benutzer vor xSS schützt

innerHTML und Injection

Warte, was?

  • Zuerst müssen wir wissen, wie innerHTML funktioniert, und dann sehen wir uns an, warum wir JS in dieses Element einfügen können.

  • Zweitens ist Injection definiert als das Ausführen von JavaScript von der Client-Seite, die vom Client aufgerufen wird

Wenn nun unsere JS-Quelle für eine Website innere HTML-Daten liest, sendet sie nicht nur einige Daten für die Ausführung einer HTML-Datei. Das innerHTML führt den durch den Ausdruck definierten Wert aus, dh wenn Sie

verwenden

element.innerHTML = <input />

Wenn wir <script> </script> eingeben -Tags in unserer Eingabe können wir SEHR einfach Code direkt in die Website einfügen, wie folgt:
const HACKS= <script deferred> alert("xScriptatK");</script>
Sie müssen zurückstellen, da das DOM beim Laden der Seite bereits ausgeführt wurde

So stehlen die meisten Hacker Website-Daten:Cookies, localStorage, stellen manchmal fetch()-Anforderungen zum Ändern von Daten und geben dann Daten an einen entfernten Ort zurück.

ESCAPING X INNERHTML

Jetzt alle zusammen:

Wenn wir Webdaten und Inhalte dynamisch setzen wollen, müssen wir ein Markup von escaped verwenden Figuren.

Wir haben einige Möglichkeiten:

  1. textContent
    Rendert eine Zeichenfolge mit Escape-Zeichen, unsere HACKS-Variable von früher würde als Zeichenfolge gerendert und nicht ausgeführt werden.

  2. Inhalte von Drittanbietern bereinigen
    Nehmen wir an, wir haben ein Eingabefeld und der Benutzer füllt es mit dem Folgenden aus:'<img src="x" onerror=HACKS()>' Dies würde einen Fehler senden und es ihnen ermöglichen, Code aus dem Fehleraufruf einzufügen, in diesem Fall seinen HACKS() Stattdessen rufen wir einen Sanitizer für den Inhalt mit einer Escape-Methode auf, die daraus wird:

`app.innerHTML =
'';

Dies ist die verschlüsselte Syntax von
<img src="x" onerror="HACKS">

(unsere Hacks)

und wir entfernen alle Markierungen und erhalten unsere Quelle ohne Injektion zurück.

var sanitizeHTML = function (str) {
return str.replace(/[^\w. ]/gi, function (c) {
return '&#' + c.charCodeAt(0) + ';';
});
};

Dieser Code nimmt die vom Benutzer übermittelte (str) und codiert sie (bereinigt sie) und gibt eine andere Zeichenfolge (str) in der bereinigten Version zurück.

const Hac = '" onerror="alert(\'XSS Attack\')"';

//Inject our dynamic element into the UI
app.innerHTML = '<img src="' + sanitizeHTML(thirdPartySrc) + '">';
Dies ist nur ein Beispiel für die Codierung einer Eigenschaft. Wenn Sie Markups zulassen möchten, benötigen Sie eine Bibliothek mit Elementen/Methoden auf der weißen Liste.

  1. Verwenden Sie ein Framework/eine BibliothekVerwenden Sie eine Bibliothek wie REACT, Angular oder jQuery. Bibliotheken verwenden in der Regel #2 unter der Haube und verwenden eine verständliche Syntax, um Ihren Code verständlicher und schreibbarer zu machen. Dies ist meiner Meinung nach die beste Option, da sie SEHR gut getestet sind und von jedem Programmierer als zuverlässig angesehen werden sollten, der sein/ihr/sie/den/nichtbinären Markup wert ist.

Roll-Credits
Wenn Sie nun das nächste Mal eine Bibliothek/ein Framework verwenden, können Sie all die Arbeit schätzen, die für Sie durch einen Escape-Code erledigt wird, der von einer Bibliothek gehandhabt wird.
VIELEN DANK AN:
Element.innerHTML
gomakethings
Decoder
Ohne diese Ressourcen hätte ich keine Ahnung, wo ich damit anfangen soll, und sie waren sehr informativ für diesen Lernprozess.