Keine Werbung mögen? Gehen Werbefrei Heute

URL-Kodierung Was Ausgescannt wird und warum Ihre API ohne es ausfällt

Veröffentlicht am
URL-Verkodierung: Was verschlüsselt wird und warum Ihre API ohne es ausfällt 1
ANZEIGE Entfernen?

Ihre API-Aufruf war korrekt. Der Endpunkt passte, die Header waren richtig, und die Antwort kam mit 400 Bad Request. Nach zwanzig Minuten, die Sie darauf achteten, stellen Sie das Problem fest: eine E-Mail-Adresse in der Abfragezeichenkette, die einen + Zeichen enthielt, das der Server als Leerzeichen interpretierte. Das ist URL-Verkodierung in Aktion, und es verursacht Probleme, die wirklich schwer zu debuggen sind.

Dieser Leitfaden erklärt, was Prozent-Verkodierung tatsächlich tut, welche Zeichen in welchen Kontexten verschlüsselt werden müssen, den JavaScript-Trap, die jeder trifft, und wie Sie ein Werkzeug wie das URL-Kodierer/Dekodierer verwenden, um Ihre Arbeit zu überprüfen.

Was URL-Verkodierung tatsächlich tut

Eine URL kann nur eine Teilmenge der ASCII-Zeichen enthalten. Alles andere – Leerzeichen, internationale Zeichen, Symbole mit besonderer Bedeutung in URLs – muss in eine sichere Form umgewandelt werden, bevor sie übertragen wird.

Prozent-Verkodierung tut dies, indem sie jeden unsicheren Byte durch einen Prozentzeichen und zwei hexadezimale Ziffern ersetzt. Ein Leerzeichen wird zu %20, ein Hash wird zu %23, ein Forward-Slash wird zu %2F. Der Name kommt von diesem führenden Prozentzeichen.

Die Spezifikation (RFC 3986) definiert „unbelegte Zeichen“, die nie verschlüsselt werden müssen: Buchstaben (A–Z, a–z), Ziffern (0–9) und vier Symbole: - _ . ~. Alles andere ist entweder ein reserviertes Zeichen (das zur Strukturierung von URLs verwendet wird) oder muss verschlüsselt werden.

Die Zeichen, die APIs beschädigen

Hier sind diejenigen, die in der Praxis am meisten Schaden anrichten:

Zeichen Kodiert Kontexte, die Verschlüsselung erfordern Hinweise
Raum %20 Alle Kontexte auch als + in Form-Daten – siehe unten
und %26 Werte in Abfragezeichenketten Trennt Abfrageparameter; muss innerhalb des Werts verschlüsselt werden
= Werte in Abfragezeichenketten Trennt Schlüssel von Wert; verschlüsseln Sie es im Wert selbst
+ Werte in Abfragezeichenketten Wird beim Form-Verkodierung als Leerzeichen dekodiert – verwenden Sie %2B für ein echtes Plus-Zeichen
# %23 Pfad, Abfragezeichenkette Markiert den Fragment; alles danach wird nie an den Server gesendet
? Pfadabschnitte, Abfragezeichenkette-Werte Beginnt die Abfragezeichenkette; verschlüsseln Sie es im Pfad oder in den Werten
/ Pfadabschnitte (wenn literal) Trennt Pfadabschnitte; verschlüsseln Sie es innerhalb des Abschnittswerts
@ %40 Werte in Abfragezeichenketten E-Mail-Adressen in Abfrageparametern müssen diese verschlüsselt werden

Drei Kontexte, unterschiedliche Regeln

Der Teil der URL, den Sie verschlüsseln, bestimmt, was verschlüsselt werden muss.

Vollständige URL – Wenn Sie eine vollständige URL übergeben, möchten Sie die Struktur beibehalten. Striche, Fragezeichen und Hash-Zeichen bleiben unverändert. Nur Zeichen außerhalb der erlaubten Menge werden verschlüsselt.

Abfragezeichenkette-Wert – Hier leben die meisten API-Fehler. Jeder Wert in einer Abfragezeichenkette muss verschlüsselt werden, damit die Zeichen, die die Struktur der Abfrage definieren (&, =, #, +) nicht als Literale im Wert auftreten. Wenn der Benutzername „John & Jane“ lautet, muss die Abfragezeichenkette lauten name=John%20%26%20Janesein, nicht name=John & Jane (die der Server als zwei separate Parameter interpretiert).

Pfadabschnitt – Ein Pfadabschnitt ist der Teil zwischen Strichen. Wenn ein Abschnitt selbst einen Strich enthält (z. B. eine Dateiname mit einem Strich), muss er als %2Fverschlüsselt werden. Einige Server betrachten %2F in einem Pfad als Sicherheitsbedenken; kennen Sie Ihr Backend vor der Verwendung dieses.

encodeURI vs encodeURIComponent – Der JavaScript-Trap

JavaScript bietet Ihnen zwei integrierte Verschlüsselungsfunktionen, und das falsche Verwenden einer davon ist ein sehr häufiger Fehler.

// encodeURI — encodes a full URL
// Preserves: : / ? # [ ] @ ! $ & ' ( ) * + , ; =
encodeURI("https://example.com/search?q=hello world&lang=en")
// → "https://example.com/search?q=hello%20world&lang=en"
// Note: & and = are NOT encoded — the query structure is preserved

// encodeURIComponent — encodes a single value
// Encodes everything except: A-Z a-z 0-9 - _ . ! ~ * ' ( )
encodeURIComponent("hello world&lang=en")
// → "hello%20world%26lang%3Den"
// Note: & and = ARE encoded — safe to use as a query value

// The bug: using encodeURI on a value
encodeURI("hello world&lang=en")
// → "hello%20world&lang=en"  ← & survives! Server sees two parameters.

// The correct approach for building query strings
const name = "John & Jane"
const email = "john+jane@example.com"
const url = `https://api.example.com/users?name=${encodeURIComponent(name)}&email=${encodeURIComponent(email)}`
// → "https://api.example.com/users?name=John%20%26%20Jane&email=john%2Bjane%40example.com"

Regel: Verwenden Sie encodeURIComponent auf einzelne Werte, bevor Sie sie in eine URL einfügen. Verwenden Sie encodeURI nur dann, wenn Sie eine vollständige URL haben und sie ohne Strukturzerstörung bereinigen möchten.

Das Plus-Zeichen: Form-Verkodierung vs Prozent-Verkodierung

Wenn ein HTML-Formular mit method="GET"einreicht, kodiert der Browser die Daten mit application/x-www-form-urlencoded. In dieser Form wird ein Leerzeichen zu + anstatt %20. Viele Server-Frameworks (PHP, Django, Rails) dekodieren automatisch + als Leerzeichen in Abfragezeichenketten.

Dies führt zu einem Problem, wenn der Wert tatsächlich ein Plus-Zeichen enthält – z. B. eine Telefonnummer wie +44 7700 900000. Wenn Sie es als +44...übergeben, dekodiert der Server das führende Plus als Leerzeichen und erhält 44.... Die Lösung besteht darin, ein echtes Plus als %2Bzu verschlüsseln, was beide Dekodierungsschemata intakt behält.

Für moderne API-Arbeit verwenden Sie stattdessen %20 für Leerzeichen (was encodeURIComponent erzeugt) anstatt auf +.

zu vertrauen.

Doppelverkodierung: Wenn die Verschlüsselung falsch geht %20 Doppelverkodierung tritt auf, wenn etwas, das bereits verschlüsselt wurde, erneut verschlüsselt wird. Das Prozentzeichen in %2520 wird selbst zu %25 – der Server dekodiert %20 zu einem echten Prozentzeichen, wodurch Sie die Zeichenkette

anstatt einen Leerzeichen erhalten.

  • Dies tritt typischerweise auf, wenn:
  • Sie eine URL in einer Datenbank speichern und verschlüsseln, bevor Sie sie verwenden
  • Ein Framework oder eine Bibliothek verschlüsselt Werte, die Sie bereits manuell verschlüsselt haben

Sie einen URL-Bereich erstellen, der einen anderen URL als Parameter enthält decodeURIComponentUm es zu vermeiden: verschlüsseln Sie genau einmal, an dem Punkt, an dem Sie die URL zusammensetzen. Wenn Sie unsicher sind, ob ein Wert bereits verschlüsselt ist, dekodieren Sie es zuerst (mit

), dann verschlüsseln Sie es sauber neu.

Debuggen von URL-Verkodierung in DevTools

Wenn ein API-Aufruf unerwartet verhält, öffnen Sie DevTools (F12), gehen Sie zu der Network-Option und klicken Sie auf den fehlenden Aufruf. Unter Headers finden Sie die Anfrage-URL – der Browser zeigt sie in ihrem rohen, verschlüsselten Zustand an. Unter Payload können Sie die Abfrageparameter dekodiert sehen, was es leicht macht, zu erkennen, ob ein Ampersand als Trennzeichen interpretiert wurde oder als Literal übertragen wurde. IO Tools URL Encoder/Decoder behandelt beide Richtungen und zeigt Ihnen das Ergebnis sofort an.

Möchten Sie werbefrei genießen? Werde noch heute werbefrei

Erweiterungen installieren

IO-Tools zu Ihrem Lieblingsbrowser hinzufügen für sofortigen Zugriff und schnellere Suche

Zu Chrome-Erweiterung Zu Kantenerweiterung Zu Firefox-Erweiterung Zu Opera-Erweiterung

Die Anzeigetafel ist eingetroffen!

Anzeigetafel ist eine unterhaltsame Möglichkeit, Ihre Spiele zu verfolgen. Alle Daten werden in Ihrem Browser gespeichert. Weitere Funktionen folgen in Kürze!

ANZEIGE Entfernen?
ANZEIGE Entfernen?
ANZEIGE Entfernen?

Nachrichtenecke mit technischen Highlights

Beteiligen Sie sich

Helfen Sie uns, weiterhin wertvolle kostenlose Tools bereitzustellen

Kauf mir einen Kaffee
ANZEIGE Entfernen?