Entwickeln Sie kundenorientierte Entwicklerwerkzeuge, die kein blindes Vertrauen erfordern.

Das Einfügen eines Produkt-JWTs in den ersten Dekoder, den eine Suchmaschine vorschlägt, ist eine gängige Praxis. Das Ziel besteht lediglich darin, die Claims zu lesen, doch der Token verlässt dennoch das Gerät. Dasselbe Muster zeigt sich bei .env-Dateien in Konvertierern sowie Fotos in EXIF-Entfernern: Eine Datenschutzrichtlinie behauptet, der Server speichere nichts, und diese Aussage wird einfach geglaubt.

KitDev Space existiert, um dieses Vertrauen zu verringern. Alltägliche Entwicklerwerkzeuge sollten nicht davon abhängen, einem Betreiber zu vertrauen – auch nicht demjenigen, der die Website erstellt hat. Die Produktgestaltung folgt einer frühen Regel, die schriftlich festgehalten und anschließend als unverhandelbar angesehen wurde.

Die Regel

Bevorzugen Sie die Ausführung auf der Client-Seite. Beziehen Sie den Backend nur dann ein, wenn die Seite tatsächlich nicht in der Lage ist, die Aufgabe zu erledigen.

Der erste Teil ist unumstritten. Der zweite Teil erfordert eine klare Definition, sonst wandern alle bequemen Lösungswege auf die Serverseite. Die tatsächlich erfüllten Fälle blieben knapp beschrieben:

1. Die Aufgabe benötigt eine native Bibliothek. Die Kodierung von AVIF oder die Rasterisierung von SVG erfordert einen echten Codec. Das Öffnen eines TLS-Handshakes benötigt einen Socket.
2. Die Aufgabe muss mit einem anderen Host kommunizieren. DNS, Antwort-Header, RDAP sowie OpenGraph-Voransichten versagen oder sollten aufgrund von CORS von einer Seite aus versagen.
3. Die Aufgabe benötigt eine Laufzeit-API ohne entsprechende Browser-Version, wie zum Beispiel Bun.dns oder Bun.Archive.
4. Die Eingabedaten sind zu groß, um bequem in einem Tab dargestellt zu werden.

Falls ein Tool keines dieser Kriterien erfüllt, bleibt es auf der Client-Seite. Aus Bequemlichkeit wurden Ausnahmen in Betracht gezogen, wenn der Serverpfad zwanzig Zeilen und der Browserpfad zweihundert Zeilen lang wäre – doch solche Ausnahmen wurden nicht implementiert.

Der Browser leistet mehr, als erwartet

Ursprüngliche Schätzungen gingen von aufwändigem Servercode aus. Die meisten Arbeiten mit Entwicklerwerkzeugen passen bereits in Plattform-APIs oder in kleine Abhängigkeiten, die ohne Verlassen der Seite ausgeführt werden.

• Digest-Hilfsfunktionen für SHA-1 bis SHA-512 über crypto.subtle.digest
• Entropie und Identifikatoren über crypto.getRandomValues
• Symmetrische Kryptofunktionen – AES-256-GCM, PBKDF2, HMAC – über crypto.subtle
• Geometrische Bearbeitungen (Anpassung der Größe, Drehen, Ausschneiden) mit OffscreenCanvas zusammen mit createImageBitmap
• Export von Stillbildern in JPEG, PNG oder WebP mithilfe von OffscreenCanvas.convertToBlob
• Lesung von EXIF- und GPS-Daten durch Durchlaufen der Dateibyten mit DataView
• Kompression und Archivierung (gzip, deflate, tar) über fflate
• Konfigurationsformate wie YAML, TOML, JSONC und JSON5 über confbox

In-Memory-SQL mit sql.js, das als WebAssembly ausgeführt wird

Das JWT-Panel überprüft HS256-Signaturen mit Web Crypto und verzichtet vollständig auf HTTP. Der AES-Bereich erzeugt die notwendigen Materialien mithilfe von PBKDF2 innerhalb der Registerkarte. Der Archiv-Browser öffnet tar-Dateien ohne Hochladen. Das SQLite-Studio speichert die Datenbank im Speicher. Das Muster ist einfach: Zuerst wird die Plattform durchgesehen, anschließend wird nur dann eine Funktion hinzugefügt, wenn etwas fehlt.

Web Crypto weist immer noch Lücken auf: Es gibt keine MD5-, CRC32- oder xxHash-Funktionen. Eine reine JavaScript-MD5-Bibliothek könnte das Hashing vollständig lokal durchführen, doch das Hash-Tool bietet auch xxhash64 und wyhash an. Es schien unangemessen, diese selten genutzten Algorithmen jedem Besucher zur Verfügung zu stellen. Diese Optionen erfordern einen Serveraufruf, und die Benutzeroberfläche erklärt diese Wahl in einfachen Worten, wenn sie ausgewählt wird. Anstatt so zu tun, als würde nichts geschehen, ist es besser, klar anzugeben, in welchem Modus die Maschine arbeitet.

Ein Modul, zwei Wege

Die Aufrechterhaltung von Browser- und Server-Versionen derselben Tool führt zu stillschweigendem Auseinanderdriften. Zwei Konverter entwickeln sich unabhängig voneinander, und identische Eingaben weichen plötzlich in ihrer Ausführung ab. Ein früher Formatkonverter stieß genau auf dieses Problem.

Die robuste Struktur besteht aus einem gemeinsamen Modul, das sowohl den Arbeitsprozess als auch einen kleinen Funktionsprüfer exportiert. Die Benutzeroberfläche fragt den Prüfer ab, und der API-Path importiert dasselbe Modul. Die Hashing-Logik befindet sich somit an einem Ort.

// shared/utils/crypto/hash.ts
const SUBTLE_NAMES = {
 sha1: 'SHA-1',
 sha256: 'SHA-256',
 sha384: 'SHA-384',
 sha512: 'SHA-512'
}

export function canHashInBrowser(algorithm: HashAlgorithm): boolean {
 return algorithm in SUBTLE_NAMES
}

// simplified page logic
const result = canHashInBrowser(algorithm)
 ? await hashInBrowser(input, algorithm)
 : await $fetch('/api/hash', { method: 'POST', body: { input, algorithm } })

Hashing, Formatumwandlung, Codeformatierung sowie Semver folgen alle dieser Struktur. Neue Tools mit doppeltem Pfad erben dieselbe Architektur, anstatt eine weitere Trennung zu schaffen.

Zu welchem Zweck der Server tatsächlich dient

Hintergrunddienst-basierte Hilfsprogramme laufen auf Bun. Jedes davon existiert aufgrund einer bestimmten Ausnahmesituation:

• Die Überprüfung von Zertifikaten erfordert die Eröffnung eines echten Sockets, um Zertifikatsketten, SANs sowie ausgehandelte Verschlüsselungsmethoden abzurufen.

Die Tools zur Überprüfung von Namen und E-Mails verlangen A/MX/TXT sowie SPF, DKIM und DMARC.

Die Prüfung von Headern, OpenGraph-Voransichten und RDAP erfordern Abrufe von Drittanbietern.

Image Studio und die Erstellung von Favicon-Dateien rufen Bun.Image auf, wenn AVIF oder ICO erzeugt werden müssen.

Die Transpilation von TS/JSX sowie die AST-Playgrounds sind von der nativen Implementierung von OXC abhängig.

Server-Routen gelten als Risiken und teilen sich eine gemeinsame Prüfliste vor dem Senden. URLs müssen validiert werden und dürfen nur http oder https verwenden. Lokale Hosts, private Adressbereiche, link-lokale Adressen, Cloud-Metadaten-Endpunkte sowie IPv6-Übergangsformate, die IPv4 verbergen (NAT64 und Teredo wurden bei der Erstellung dieser Denylist berücksichtigt), werden abgelehnt. Zielportnummern sind begrenzt, sodass eine TLS-Überprüfung das Netzwerk nicht scannen kann. Die Länge des Inhalts wird überprüft, die Daten werden gestreamt und das Lesen stoppt bei einer festgelegten Obergrenze, anstatt ewig im Puffer zu bleiben. Die Rate-Limits nutzen einen Client-Schlüssel, der nichts mit x-forwarded-for zu tun hat – dieser lässt sich leicht fälschen. Hochgeladene Dateien bleiben im Speicher und nie auf der Festplatte. Eingaben und Ausgaben werden nicht gespeichert.

Auch die Analytik folgt denselben Richtlinien. Ereignisse enthalten lediglich eine Tool-ID und nichts weiter. Die Verwendung des Cron-Visualisierers ist sichtbar; die eingegebene Formel hingegen nicht.

Die Regel sichtbar machen

Eine Regel, die niemand sehen kann, ist das Marketing – keine Datenschutzsteuerung. Die Navigation weist daher den Ausführungsort an.

Jeder Eintrag trägt ein Symbol. „Client“ bedeutet, dass die Seite niemals eine Anfrage an den Server sendet. „Bun“ bedeutet, dass jede Aktion auf die Backend-Plattform übertragen wird. Tools mit beiden Optionen lassen das Symbol weg und dokumentieren, welche Aktion die Registerkarte verlässt. Diese Markierungen werden aus zwei Registry-Flags erzeugt – derselben Registry, die auch Titel und Suchfunktionen steuert – sodass die Beschreibungen nicht im Widerspruch zur Implementierung stehen können.

Die Quelle ist unter MIT-Lizenz verfügbar und im Fußbereich verlinkt. Ein „Client“-Symbol kann überprüft werden, indem das Modul geöffnet und bestätigt wird, dass es keine Anfragen an bestimmte Routen sendet. Überprüfung statt Vertrauen ist der letzte Bestandteil des Designs.

Was ist darin enthalten

Die Größe des Katalogs ändert sich fast jede Woche, daher wäre eine Anzahlung bereits morgen falsch. Die am häufigsten genutzten Tools sind nach ihrer Funktion gruppiert:

Datenverarbeitung: ansprechend formatierte JSON-Dateien, die auch JSON5/JSONC akzeptieren; Erzeugung von TypeScript-Typen aus JSON; freier Wechsel zwischen YAML, TOML, XML und CSV (einschließlich Umwandlung von CSV-Zeilen in SQL-Einträge); Durchsuchung großer CSV-Tabellen sowie Ausführung des SQLite-Studios im Browser.

Entwickler-Hilfsmittel: ein Regex-Notizblock, der jeden Token erläutert; ein Cron-Kalender für zukünftige Ausführungen; Konverter von cURL zu fetch, Axios, Python oder Go; HTML/SVG-Konverter für JSX oder Vue; ein Glob-Playground sowie der lokale Tar-Browser.

Netzwerküberprüfungen: Prüfung der Zertifikatskette, DNS-Anfragen, Überprüfung der Authentifizierungsintegrität von Postfächern, Analyse von rohen HTTP-Headern, CIDR-Berechnungen, Dekodierung von Cookies sowie RDAP-Suchen.

Kryptografische Hilfsmittel: Digests, HMAC, Prüfung von JWTs, TOTP-Codes, AES-Verschlüsselung/Entschlüsselung sowie Generatoren für UUIDs und Passwörter.

Farbwerkzeuge: OKLCH-Umwandlung, Kontrastbewertung nach WCAG, Farbverläufe für Tailwind, Erstellung von CSS-Gradienten sowie Extraktion einer Palette aus einem Bild.

Bildwerkzeuge: Kombinierte Funktionen zum Schneiden/Vergrößern/Drehen/Umwandeln von Bildern, Überprüfung oder Entfernung von EXIF-Daten, Rasterisierung von SVGs in PNG/WebP im 1x/2x/4x-Format sowie ein Tool zum Erstellen von Favicon-Paketen in ZIP-Format.

Konten und Paywalls sind nicht vorhanden. Das Theme folgt den Einstellungen des Betriebssystems, sodass es keine separate Helligkeits-/Dunkelmodus-Einstellung gibt.

Hinter den Kulissen

Der Implementierungsstack bleibt absichtlich einfach: Nuxt 4 mit Nuxt UI 4 im Browser, VueUse-Composables, CodeMirror-Editor, von Bun angetriebene Routen, Vitest in Kombination mit Playwright für die Testsicherheit sowie Deployment auf Vercel.

Ich bräuchte Ihre Hilfe

Ich habe https://kitdev.space ausprobiert – zwei Berichte sind am nützlichsten: welches Tool fehlt und ob ein Tool Daten auf Serverseite gesendet hat, obwohl sie lokal bleiben sollten. Der zweite Bericht deutet darauf hin, dass es eine Lücke in der Regel gibt.

Der Repository-Link befindet sich nur einen Klick vom Fußbereich entfernt. Neue Tools, Fehlerbehebungen oder Korrekturen von Abzeichen sind willkommen. Ein solches Zentrum wird durch mehr Beteiligung besser – das ist der Hauptgrund, warum die Quelle offen ist.

Wenn Sie ähnliche Tools an anderer Stelle entwickeln, behalten Sie dieselbe kurze Liste der Fälle bei, in denen der Browser tatsächlich nicht fertig werden kann. Alles Weitere sollte auf dem Rechner des Benutzers ausgeführt werden.