JPKCom DB

Coder — Beispiele

Praxis-Durchläufe mit dem Coder: Base64, JWT dekodieren und Signatur prüfen, URL-Encoding, Data-URI, HTML und JSON escapen, Punycode, Unicode-Escapes.

Zurück zur Übersicht: Coder · Tool live öffnen: www.jpkc.com/tools/coder/

Das Manual erklärt jeden Reiter im Detail. Diese Seite ergänzt das um konkrete Durchläufe — typische Aufgaben, Schritt für Schritt, mit Fokus auf Eingabe und Ausgabe. Die Oberfläche ist auf Englisch; Reiter-, Button- und Optionsnamen stehen deshalb im Original. In den acht Text-Reitern landet das Ergebnis immer im Feld Output rechts, deine Eingabe links bleibt stehen.

Beispiel 1: Einen String Base64-kodieren

Du brauchst einen Wert Base64-kodiert, etwa für einen Header oder eine Konfiguration.

  1. Öffne den Coder und wechsle in den Reiter Base64.
  2. Füge deinen Text in Input ein, z. B. Grüße aus München.
  3. Klick Encode (oder drück Strg+Enter). In Output steht jetzt R3LDvMOfZSBhdXMgTcO8bmNoZW4= — die Umlaute sind dank UTF-8-sicherer Kodierung korrekt enthalten.
  4. Mit Copy output landet der String in der Zwischenablage. Zum Gegencheck klickst du Use output as input (Doppelpfeil) und dann Decode — du bekommst exakt Grüße aus München zurück.

Brauchst du den Wert für eine URL oder ein Token, schalte URL-safe ein: Dann lautet das Ergebnis R3LDvMOfZSBhdXMgTcO8bmNoZW4 — ohne =-Padding. Der Decoder akzeptiert beide Varianten. Ist der String beim Decode kein gültiges Base64, meldet die Statuszeile das mit Position, statt eine kaputte Ausgabe zu liefern.

Beispiel 2: Ein JWT dekodieren und die Signatur prüfen

Du hast ein Token aus einem API-Response oder einem Authorization-Header und willst sehen, was drinsteht — und ob es wirklich mit deinem Secret signiert wurde.

  1. Wechsle in den Reiter JWT und füge das Token ein, gern samt vorangestelltem Bearer . Zum Ausprobieren eignet sich dieses Test-Token:

    eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI0MiIsIm5hbWUiOiJFcmlrYSBNdXN0ZXJtYW5uIiwicm9sZSI6ImVkaXRvciIsImlhdCI6MTc2NzIyNTYwMCwiZXhwIjo0MTAyNDQ0ODAwfQ.WGp79y7OQ6F8BOaeXg53uUXCyMMV5pto4JknQa17-P8

  2. Ohne weiteren Klick zerlegt das Tool das Token:

    • Header — { "alg": "HS256", "typ": "JWT" }.
    • Payload — mit den Claims sub, name, role, iat und exp.
    • Claims — eine Tabelle mit jedem Feld, die gängigen Claims im Klartext erklärt: sub als „Subject", name als „Name", iat als „Issued at" mit Datum (1. Januar 2026), exp als „Expires at" mit Datum (1. Januar 2100) und relativer Zeit. Für role bleibt die Spalte Meaning leer, weil das Tool nur den Claim roles kennt.
    • Signature (HS256) — der rohe Signatur-String.

  3. Oben steht das Badge Within its validity period — expires in … years. Bei einem abgelaufenen Token stünde dort „Expired …", bei einem nbf in der Zukunft „Not valid yet".

  4. Zum Prüfen trägst du im Feld Secret den Wert geheim-nur-zum-testen ein und klickst Verify signature. Ergebnis: „✓ Signature verified — the token was signed with this key." Ändere ein einziges Zeichen am Secret, und das Tool meldet „✗ Signature does NOT match this key/secret."

  5. Per Copy-Button neben Header oder Payload übernimmst du den jeweiligen JSON-Block — etwa um ihn im JSON Editor weiterzuverarbeiten.

Bei Tokens mit RS256, ES256 oder EdDSA fügst du statt eines Secrets den öffentlichen Schlüssel ein — als PEM (-----BEGIN PUBLIC KEY-----), JWK oder als kompletten JWKS-Schlüsselsatz deines Identity-Providers; den passenden Schlüssel sucht das Tool über die kid heraus. Token, Secret und Schlüssel verlassen dabei deinen Browser nicht und werden nicht gespeichert.

Beispiel 3: Sonderzeichen für eine URL kodieren

Du willst einen Suchbegriff oder Parameter-Wert sicher in eine URL packen.

  1. Wechsle in den Reiter URL und lass Mode auf Component (encodeURIComponent).
  2. Füge den Rohwert ein, z. B. Müller & Sohn (Café), und klick Encode. Ergebnis: M%C3%BCller%20%26%20Sohn%20%28Caf%C3%A9%29 — auch die Klammern sind kodiert.
  3. Kommt der Wert in ein klassisches HTML-Formular bzw. einen application/x-www-form-urlencoded-Body, stell Mode auf Form (space = +). Das Ergebnis wird sofort neu berechnet: M%C3%BCller+%26+Sohn+%28Caf%C3%A9%29.
  4. Decode kehrt es wieder um und liefert Müller & Sohn (Café) — im Mode Form wird dabei + zum Leerzeichen.

Fügst du statt eines Werts eine ganze Adresse wie https://example.com/suche?q=M%C3%BCller&seite=2 ein und klickst Decode, zeigt das Tool unter dem Ergebnis die Tabelle Query parameters mit q = Müller und seite = 2.

Beispiel 4: Ein Bild als Data-URI einbetten

Du willst ein kleines Icon direkt ins CSS einbetten, statt eine separate Datei auszuliefern.

  1. Wechsle in den Reiter Data URI und zieh deine Datei (z. B. ein kleines PNG oder SVG) auf das Feld Drop a file here or choose one — oder wähle sie über den Dateidialog.
  2. Der Browser liest die Datei lokal ein. Die Infozeile zeigt Name, MIME-Typ, Dateigröße und die Größe der Data-URI; darunter erscheint eine Vorschau.
  3. Stell Output as auf CSS background-image. Im Ausgabefeld steht jetzt die fertige Regel background-image: url("data:image/png;base64,…");.
  4. Copy übernimmt sie; du fügst sie direkt in dein Stylesheet ein. Für HTML oder Markdown wählst du HTML <img> bzw. Markdown image — der Dateiname landet dann im alt-Text.

Praxis-Tipp: Data-URIs lohnen vor allem für kleine Assets. Base64 bläht die Daten um rund ein Drittel auf; ab etwa 32 KB weist das Tool darauf hin, dass eine normale Datei meist die bessere Wahl ist. Den umgekehrten Weg gehst du in der rechten Hälfte Data URI → File: Data-URI einfügen, Download file.png klicken.

Beispiel 5: HTML-Code für die Anzeige escapen

Du willst ein Code-Beispiel in einem Artikel anzeigen, ohne dass der Browser es rendert.

  1. Wechsle in den Reiter HTML und füge das Markup ein, z. B. <a href="/x">Link</a>.
  2. Klick Encode. Mit der Standard-Einstellung (Encode quotes an) lautet das Ergebnis &lt;a href=&quot;/x&quot;&gt;Link&lt;/a&gt; — spitze Klammern und Anführungszeichen stehen jetzt als Text, der Schnipsel darf so auch in einem Attributwert stehen.
  3. Steht der Schnipsel nur zwischen Tags, schalte Encode quotes aus: Dann bleiben die Anführungszeichen erhalten, und du bekommst &lt;a href="/x"&gt;Link&lt;/a&gt;.
  4. Decode macht den Schritt rückgängig und versteht dabei auch alle anderen Entities — &copy;, &nbsp; oder &#8364; werden ebenfalls aufgelöst. Doppelt kodierter Text wie &amp;lt;b&amp;gt; wird dabei genau eine Stufe zurückgenommen (&lt;b&gt;); für die zweite Stufe klickst du Use output as input und noch einmal Decode.

Beispiel 6: Einen JSON-String für Code escapen

Du willst einen mehrzeiligen Text als String-Wert in eine JSON-Datei oder in Quellcode einsetzen.

  1. Wechsle in den Reiter JSON und füge den Rohtext ein, inklusive Zeilenumbrüchen, Tabs, Anführungszeichen und Backslashes — etwa einen Windows-Pfad wie C:\new.
  2. Klick Encode. Aus Zeilenumbrüchen wird \n, aus Tabs \t, aus " wird \" und aus \ wird \\ — der Pfad steht jetzt als C:\\new da. Sonstige Steuerzeichen landen als \u00XX im Ergebnis.
  3. Schalte Add surrounding quotes ein, wenn du den Wert inklusive Anführungszeichen direkt hinter "key": einsetzen willst. Mit Escape non-ASCII werden auch Umlaute zu \u00e4 & Co. — praktisch für Systeme, die nur ASCII vertragen.
  4. Decode kehrt das um — praktisch, wenn du einen escapten Wert aus einer JSON-Datei oder einem Log wieder lesbar machen willst. Die umschließenden Anführungszeichen darfst du mitkopieren.

Für komplette JSON-Dateien nutze den JSON Editor.

Beispiel 7: Eine Umlaut-Domain für DNS und Zertifikat umwandeln

Du richtest eine Domain mit Umlaut ein und brauchst für DNS-Einträge, Zertifikatsanträge oder Konfigurationsdateien die ASCII-Form.

  1. Wechsle in den Reiter Punycode und füge die Adressen ein, eine pro Zeile:

    bücher.de
https://www.müller-café.de/pfad?x=1
info@bücher.de

  2. Klick Encode. Ergebnis:

    xn--bcher-kva.de
https://www.xn--mller-caf-j4a4r.de/pfad?x=1
info@xn--bcher-kva.de

    Umgewandelt wird nur der Host — Schema, Pfad, Query und der Teil vor dem @ bleiben unverändert.

  3. Den umgekehrten Weg gehst du mit Decode: Aus xn--bcher-kva.de in einem Log oder einer Zertifikatsliste wird wieder bücher.de.

Beispiel 8: Einen Text als Unicode-Escapes schreiben

Du willst Umlaute oder Emojis in einer Quelltext-Datei unterbringen, die nur ASCII verträgt — oder du stößt in einem Log auf \u00FC und willst wissen, was dort steht.

  1. Wechsle in den Reiter Unicode und füge Grüße 😀 ein.
  2. Lass Format auf der ersten Option (JavaScript, JSON, Java) und klick Encode. Ergebnis: Gr\u00FC\u00DFe \uD83D\uDE00 — das Emoji wird als Surrogatpaar geschrieben.
  3. Wechsle das Format, und das Ergebnis passt sich sofort an: ES2015 liefert Gr\u{FC}\u{DF}e \u{1F600}, HTML Gr&#xFC;&#xDF;e &#x1F600;, code points listet jedes Zeichen als U+0047 U+0072 U+00FC ….
  4. Für den Rückweg fügst du die Escapes ein und klickst Decode — das Tool erkennt das Format selbst, auch gemischte Formate in einem Text.

Noch tiefer: die Übersicht zum großen Bild, das Manual für jeden Reiter im Detail und die Tipps & Tricks für die Feinheiten. Ausprobieren kannst du alles direkt im Tool.