URL-Ersteller

Anatomie einer URL, Komponente für Komponente

Die Grammatik, die jede URL im Web definiert, lebt in RFC 3986 «Uniform Resource Identifier (URI): Generic Syntax» (Berners-Lee, Fielding, Masinter, Januar 2005). Browser verwenden tatsächlich eine etwas tolerantere Variante, die im WHATWG URL Living Standard definiert ist. Beide stimmen über die Komponenten überein:

• Schema: https, http, ftp, mailto, data, tel, sms, magnet, plus benutzerdefinierte App-Schemata (myapp://). RFC 3986 erfordert Kleinbuchstaben; WHATWG kanonisiert. Das IANA URI Scheme Registry hat die offizielle Liste der registrierten Schemata.
• Authority: userinfo@host:port. Die Form mit eingebetteten Anmeldedaten user:password@ ist aus Sicherheitsgründen veraltet: Chrome 64 (Januar 2018) blockiert Subressourcen-Ladevorgänge mit Anmeldedaten in der URL, weil sie Phishing-Tricks ermöglichten.
• Host: ein Domainname oder IP-Literal. Internationalisierte Domainnamen wie президент.рф werden über Punycode (RFC 3492, März 2003) in ASCII umgewandelt: dieses Beispiel wird zu xn--d1abbgf6aiiy.xn--p1ai. Browser führen die Umwandlung für die Anzeige transparent durch.
• Port: nur enthalten, wenn nicht der Standard für das Schema. Standards: 80 (http), 443 (https), 21 (ftp), 22 (ssh), 25 (smtp), 5432 (postgres), 3306 (mysql), 6379 (redis).
• Pfad: durch Schrägstriche getrennte Segmente. Jedes Segment kodiert alles außerhalb der in RFC 3986 §3.3 definierten pchar-Menge prozentual. Die Punkt-Segmente . und .. haben Entfernungssemantik (§5.2.4).
• Query: per Konvention Schlüssel-Wert-Paare getrennt durch &, aber RFC 3986 sagt nur «opaker String nach ?». Die Konvention wird im WHATWG application/x-www-form-urlencoded-Algorithmus formalisiert.
• Fragment: alles nach #. Niemals an den Server gesendet. Wird von Single-Page-Application-Routern, Anker-Links und OAuth-Implicit-Flow-Tokens verwendet.

Prozentkodierung: die + versus %20 Falle

RFC 3986 §2.3 definiert die nicht reservierten Zeichen, die niemals kodiert werden müssen: A-Z a-z 0-9 - . _ ~. Alles andere wird, wenn es als Daten innerhalb einer URL-Komponente erscheint, zu %XX, wobei XX der Hex-Wert des Bytes ist. Multi-Byte-UTF-8-Zeichen expandieren zu mehreren Prozenttripeln: é (U+00E9, UTF-8 C3 A9) kodiert als %C3%A9. Der klassische Knackpunkt ist das Leerzeichen: in einem regulären URL-Pfad oder Fragment kodiert das Leerzeichen als %20; in formularcodierten Query-Strings (dem application/x-www-form-urlencoded-Algorithmus, der von HTML-Formularen und dem WHATWG-Query-String-Serialisierer geteilt wird) kodiert das Leerzeichen als +. Ein Server, der Formulardaten dekodiert, wandelt + zurück in Leerzeichen; ein Server, der die Query als generische URI behandelt, tut dies nicht. Das Mischen der beiden Konventionen beschädigt Daten still. Das sichere Muster in JavaScript: Verwenden Sie new URLSearchParams für Queries und encodeURIComponent für einzelne Werte; die Spec-Konformität wird für Sie übernommen.

Wo Sie tatsächlich einen URL-Builder brauchen

• UTM-getaggte Marketing-Links für Google Analytics (Urchin Tracking Module, in GA seit 2005): die fünf kanonischen Parameter sind utm_source, utm_medium, utm_campaign, utm_content, utm_term, alle klein geschrieben laut Googles eigenen Richtlinien.
• OAuth 2.0 Autorisierungsanfragen (RFC 6749, Oktober 2012): die Spec verlangt response_type, client_id, redirect_uri, scope, state als Query-Parameter am Autorisierungsendpunkt.
• Mobile Deep Links: ein app://-Schema, das das Betriebssystem an Ihre installierte App weiterleitet anstatt an den Browser, oder ein Android App Link / iOS Universal Link, der von Ihrer Domain serviert wird.
• API-Client-Tests: https://api.example.com/v2/users?expand=projects&since=2024-01-01. Diese von Hand zu tippen scheitert konsistent am Schritt «Leerzeichen innerhalb eines Werts».
• CDN-Cache-Buster: ?v=2026-05-12-1 an statische Asset-URLs angehängt, sodass ein Deployment die zwischengespeicherte Version ungültig macht. Der Query-String ist Teil des Cache-Schlüssels.
• Bildtransformationsdienste (Cloudinary, imgix, Cloudflare Images): die Transformation wird als Query-Parameter oder Pfadsegmente kodiert. Ein typischer Aufruf sieht aus wie ?w=800&q=85&fm=webp.
• E-Mail-Vorlagen, bei denen die Landing-Page Parameter via JS liest, oft UTM-Tags mit einem eindeutigen token oder uid für empfängerspezifisches Tracking kombinierend.

Häufige Fehler

• Vergessen, & innerhalb eines Werts zu kodieren. Ein Wert «Katzen & Hunde» naiv in ?Arten=Katzen & Hunde eingesetzt, wird zu einem Schlüssel Arten mit Wert Katzen plus einem verirrten leeren Schlüssel. Immer durch encodeURIComponent leiten.
• Doppelte Kodierung. Das Aufrufen von encodeURIComponent auf einem bereits kodierten String wandelt %20 in %2520 um. Leicht, wenn ein Wert durch zwei Systeme geht, die jeweils «defensiv kodieren».
• Trailing-Slash-Diskrepanz. RFC 3986 sagt, dass https://example.com/api und https://example.com/api/ verschiedene Ressourcen sind. Die meisten REST-APIs behandeln sie identisch, aber einige geben 308-Weiterleitungen zurück; wählen Sie eine kanonische Form und dokumentieren Sie sie.
• Mischen von + und %20. Formularcodierte Query-Strings verwenden + für Leerzeichen; generische Prozentkodierung verwendet %20. Ein Pfad mit literalem + überlebt Kopieren-Einfügen, scheitert aber, wenn ein Formular-Dekoder ihn liest.
• Eingebettete Anmeldedaten. https://user:pass@example.com ist veraltet und für Subressourcen-Ladevorgänge in Chrome 64+ blockiert. Verwenden Sie den Authorization-Header.
• IDN-Spoofing. Kyrillisches «а» (U+0430) ist visuell identisch mit lateinischem «a». Browser zeigen Punycode an, wenn eine Domain Skripte mischt, aber eine manuell konstruierte URL, die auf аpple.com (kyrillisches а) zeigt, öffnet eine andere Site als apple.com. Verwenden Sie Punycode (xn--...) zur Sicherheit oder bleiben Sie bei ASCII.
• Hinzufügen von // nach Schemata, die es nicht verwenden. mailto:, tel:, sms:, magnet: überspringen alle das // und gehen direkt zum Pfad. mailto:user@example.com ist korrekt; mailto://... ist es nicht.

Weitere häufig gestellte Fragen

Was ist die maximale Länge einer URL?

RFC 3986 setzt keine Grenze. In der Praxis: Browser begrenzen auf etwa 2.000 Zeichen für die Adressleiste (Internet Explorer 11 war bei 2.083; Chrome und Firefox tolerieren mehr, kürzen aber die Anzeige); die meisten CDNs und Proxys begrenzen auf 4.096 oder 8.192; Server wie Apache und Nginx standardmäßig auf 8.192 Bytes für die Anfragezeile. Wenn Sie mehr als 2.000 Zeichen brauchen, wechseln Sie zum POST-Body.

Kann ich denselben Query-Parameter mehrfach einfügen?

Ja. ?tag=red&tag=blue&tag=green ist gültig. Wie der Server es interpretiert, hängt vom Framework ab: Express / Node.js parst zu req.query.tag = ['red', 'blue', 'green']; PHP benötigt die Klammerkonvention ?tag[]=red&tag[]=blue; Rails parst zu einem Array, wenn Sie die tag[]-Klammern verwenden. Die Methode URLSearchParams.getAll('tag') gibt unabhängig vom Klammerstil immer alle Werte als Array zurück.

Beeinflussen Query-Parameter SEO?

Tracking-Parameter (UTM, fbclid, gclid) beeinflussen im Allgemeinen nicht das organische Suchranking. Das Risiko ist die Duplicate-Content-Indexierung: eine getaggte URL und ihre saubere Version sehen für einen Crawler wie zwei verschiedene Seiten aus. Die Lösung ist ein <link rel="canonical" href="clean-url">-Tag, das jede getaggte Variante auf dieselbe kanonische URL verweist.

Was ist eine URI-Vorlage, und sollte ich eine verwenden?

RFC 6570 (März 2012) definiert URI-Vorlagen: eine Syntax für parametrisierte URLs mit Platzhaltern. Sie werden in OpenAPI- / Swagger-Specs, JSON Hyper-Schema und einigen HATEOAS-APIs verwendet. Für die alltägliche URL-Konstruktion ist die einfache String-Verkettung über diesen Builder einfacher; URI-Vorlagen glänzen beim Dokumentieren einer API-Oberfläche und beim Generieren von Client-SDKs.

Wird etwas an einen Server gesendet?

Nein. Jede Komponente, die Sie eingeben, die Kodierung und die endgültige URL werden im JavaScript Ihres Browsers konstruiert. Es wird kein Netzwerkaufruf gemacht, um die URL zusammenzusetzen. Öffnen Sie den Netzwerk-Tab in DevTools und probieren Sie das Tool aus: Sie sehen null ausgehende Anfragen während der Konstruktion.