Text & Code / Ratgeber

HTML-, URL- und JavaScript-Escape: Folgen Sie den Ebenen der Reihe nach

Ein Wert kann eine URL, ein HTML-Dokument und eine JavaScript-Quelle passieren. Jedes Ziel interpretiert unterschiedliche Zeichen als Syntax.

Nennen Sie das unmittelbare Ziel

Angenommen, ein Suchwert ist A&B „C“. In einer URL-Abfragekomponente trennt das kaufmännische Und-Zeichen normalerweise Parameter und muss daher als Teil des Werts codiert werden, bevor die Abfragezeichenfolge zusammengestellt wird. In HTML-Text kann ein kaufmännisches Und eine Zeichenreferenz einleiten, und eine spitze Klammer könnte ein Markup einleiten. Innerhalb eines JavaScript-String-Literals haben Anführungszeichen und Backslashes ihre eigene Syntax. Dies sind drei verschiedene Parsing-Kontexte. Eine für den einen sichere Ausgabe ist nicht automatisch auch für den nächsten sicher. Eine Produktionsanwendung sollte kontextsensitive Plattform-APIs und -Vorlagen verwenden, anstatt Markup durch Verkettung zusammenzustellen.

Bearbeiten Sie die erste Grenze

Wenn der Abfrageschlüssel q ist, kodieren Sie den Wert als eine URL-Komponente und platzieren Sie ihn dann nach q=. Das kaufmännische Und wird zu %26 und die Anführungszeichen werden gemäß den Regeln des URL-Encoders dargestellt. Wenn die gesamte fertige URL so kodiert würde, als wäre sie ein Wert, würde auch ihre strukturelle Interpunktion kodiert und die falsche Adresse erzeugt. Wenn die resultierende URL als Linktext in einer HTML-Seite angezeigt wird, muss der Textknoten dann HTML-sicher dargestellt werden. Wenn es in einem HTML-Attribut platziert wird, verwenden Sie einen attributsicheren Serialisierer, der über eigene Anführungszeichenregeln verfügt.

Jeder Parser verarbeitet eine eigene Syntax.
  1. Ausgangswert: A&B „C“
  2. URL-Komponente: reservierte Zeichen kodieren
  3. HTML oder JavaScript: für den Zielkontext escapen

Machen Sie JavaScript nicht zum Transportformat

Ein Skript muss möglicherweise den ursprünglichen Wert in einem Literal in Anführungszeichen speichern, was das Escapen von JavaScript-Zeichenfolgen erfordert. Dies ist ein Quellcodeproblem und kein Ersatz für die URL-Komponentenkodierung oder die HTML-Ausgabekodierung. Vermeiden Sie es, nicht vertrauenswürdige Eingaben direkt in die Inline-Skriptquelle zu platzieren. Die Verwendung von Datenattributen oder eines Skriptelements mit sorgfältig serialisiertem JSON kann sicherer sein, wenn es von verwalteten Frameworks implementiert wird. Das MultiVerto-JavaScript-Escape-Tool veranschaulicht Zeichenfolgenliteralzeichen, kann jedoch nicht bestätigen, dass eine gesamte Anwendung vor Skriptinjektionen sicher ist. Die Sicherheit hängt vom tatsächlichen Parserkontext und dem umgebenden Code ab.

Dekodieren Sie in umgekehrter Reihenfolge

Auf der Empfängerseite extrahiert ein URL-Parser q und dekodiert die Komponente einmal in Prozent. Ein HTML-Parser verarbeitet Entitäten, während er sein Dokument erstellt. Ein Browser dekodiert gewöhnlichen Text nicht prozentual, nur weil er auf einer Seite erscheint. JavaScript interpretiert seine eigenen literalen Escapezeichen, wenn es Quellcode analysiert. Die Anwendung des falschen Decoders kann sichtbare Sequenzen wie %26 hinterlassen oder Daten erzeugen, die dann in einem anderen Kontext als Syntax interpretiert werden. Halten Sie den ursprünglichen Rohwert von jeder serialisierten Darstellung getrennt, damit eine benutzerseitige Anzeige nicht versehentlich zur nächsten Verarbeitungseingabe wird.

Eine Überprüfungscheckliste für eine echte App

Zeichnen Sie den Pfad vom Quellwert zur URL-Komponente, dann zum HTML-Text oder -Attribut und erst dann zur Skriptverwendung. Wählen Sie an jedem Pfeil die API für das genaue Ziel aus und testen Sie Zeichen wie kaufmännisches Und, Anführungszeichen, Kleiner-als-Zeichen und Nicht-ASCII-Buchstaben. Überprüfen Sie die endgültig gerenderte Seite und die resultierende analysierte URL, nicht nur eine zwischencodierte Zeichenfolge. Durch das Escapen wird weder Vertrauen gewährt noch ein Linkziel validiert. Möglicherweise sind weiterhin separate Richtlinienprüfungen erforderlich. Die verknüpften Konverter helfen dabei, jede Ebene anhand eines kleinen Beispiels zu demonstrieren, bevor Sie sie in einem Framework implementieren.

Umrechner ausprobieren

Probieren Sie die HTML-Entitätskodierung aus und vergleichen Sie dann URL- und JavaScript-Tools.

Wandeln Sie &, <, > und Anführungszeichen in HTML-Entities um, um Code als Text anzuzeigen.

Vollständigen Umrechner öffnen

Weitere Ratgeber

Umrechnungsratgeber

Ratgeber entdecken