Generierung eindeutiger IDs mit der Web Crypto API

Jeder Frontend-Entwickler steht irgendwann vor diesem Problem: Sie benötigen einen eindeutigen Identifier für clientseitige Daten, aber es gibt noch keine vom Server generierte ID. Vielleicht erstellen Sie eine Todo-Liste, verwalten Formularfelder oder tracken Elemente, bevor diese persistiert werden. Sie brauchen etwas Zuverlässiges, und zwar sofort.

Die gute Nachricht? Moderne Browser liefern eine integrierte Lösung mit. Die Web Crypto API stellt crypto.randomUUID() bereit – eine einfache, sichere Methode zur Generierung eindeutiger IDs im Browser, ohne dass Bibliotheken installiert werden müssen.

Warum crypto.randomUUID() Ihre Standard-Wahl sein sollte

Die Methode crypto.randomUUID() erzeugt RFC 9562 (ehemals RFC 4122) Version-4-UUIDs unter Verwendung eines kryptografisch sicheren Zufallszahlengenerators. Die Ausgabe sieht folgendermaßen aus:

550e8400-e29b-41d4-a716-446655440000

Das ist ein 36 Zeichen langer String mit 122 Bits an Zufälligkeit. Die Kollisionswahrscheinlichkeit ist astronomisch gering – Sie müssten etwa eine Milliarde UUIDs pro Sekunde über ungefähr 85 Jahre generieren, um eine 50%ige Chance auf eine einzige Kollision zu erreichen.

So einfach funktioniert es:

function generateId() {
  return crypto.randomUUID()
}

const newItem = { id: generateId(), label: 'My item' }

Diese Methode funktioniert in allen modernen Browsern (Chrome 92+, Firefox 95+, Safari 15.4+), läuft in Web Workers und benötigt keine Abhängigkeiten.

Die Anforderung eines sicheren Kontexts

Ein wichtiges Detail: crypto.randomUUID() funktioniert nur in sicheren Kontexten. Das bedeutet HTTPS in der Produktion oder localhost während der Entwicklung. Wenn Sie über einfaches HTTP auf einer Nicht-localhost-Domain testen, steht die Methode nicht zur Verfügung.

Diese Anforderung existiert, weil die Web Crypto API kryptografische Primitive bereitstellt, die in unsicheren Umgebungen nicht verfügbar gemacht werden sollten.

Warum ältere Ansätze zu kurz greifen

Bevor crypto.randomUUID() weithin verfügbar wurde, griffen Entwickler oft zu Alternativen, die vernünftig erscheinen, aber echte Probleme haben.

Math.random() ist nicht kryptografisch sicher. Die Ausgabe kann vorhersehbar sein, und Kollisionen sind in Produktionsanwendungen weitaus wahrscheinlicher, als Sie erwarten würden.

Zeitstempel (wie Date.now()) versagen, wenn mehrere IDs in derselben Millisekunde generiert werden – ein häufiges Szenario in Schleifen oder Batch-Operationen.

Ad-hoc-Generatoren, die Zeitstempel mit Zufallszahlen kombinieren, sind besser, aber sie erfinden ein bereits gelöstes Problem mit weniger Sorgfalt neu, als die Plattform nativ bietet.

Für sichere clientseitige ID-Generierung ist crypto.randomUUID() die klare Wahl.

Praktische Frontend-Überlegungen

Einmal generieren, sofort speichern

Der häufigste Fehler ist die Generierung von IDs während Render-Zyklen. Erstellen Sie stattdessen die ID bei der Objekterstellung und speichern Sie sie:

// ✓ Richtig: ID wird zum Zeitpunkt der Erstellung generiert
function addItem(label) {
  return { id: crypto.randomUUID(), label }
}

// ✗ Falsch: ID wird während des Renderns generiert
items.map(item => <li key={crypto.randomUUID()}>{item.label}</li>)

Die Generierung einer neuen UUID bei jedem Render verfehlt den Zweck stabiler Keys. React beispielsweise verwendet Keys, um Elemente über Re-Renders hinweg zu tracken. Ein neuer Key jedes Mal erzwingt unnötigen DOM-Abbau und Neuerstellung.

SSR und Browser-Umgebungen

Wenn Sie Server-Side Rendering verwenden, ist crypto.randomUUID() in Node.js 19+ und neueren Versionen anderer Laufzeitumgebungen verfügbar. Für ältere Node-Versionen oder Sonderfälle prüfen Sie die Verfügbarkeit vor dem Aufruf:

const id = typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'
  ? crypto.randomUUID()
  : fallbackGenerator()

Eine leichtgewichtige Fallback-Strategie

Für Umgebungen, in denen crypto.randomUUID() nicht verfügbar ist, hat crypto.getRandomValues() eine breitere Unterstützung (einschließlich Node.js 16+) und kann UUIDs ohne Bibliotheken generieren:

function fallbackUUID() {
  const bytes = crypto.getRandomValues(new Uint8Array(16))
  bytes[6] = (bytes[6] & 0x0f) | 0x40 // Version 4
  bytes[8] = (bytes[8] & 0x3f) | 0x80 // Variant 10
  
  const hex = [...bytes].map(b => b.toString(16).padStart(2, '0')).join('')
  return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`
}

Dies setzt manuell die Versions- und Varianten-Bits, um eine gültige v4-UUID zu erzeugen, wobei dieselbe kryptografisch sichere Zufallsquelle im Hintergrund verwendet wird.

Wann Bibliotheken noch Sinn ergeben

Obwohl crypto.randomUUID() die meisten Fälle abdeckt, könnten Sie zu einer Bibliothek wie uuid oder nanoid greifen, wenn Sie Folgendes benötigen:

• Nicht-v4-UUID-Versionen (v1, v5, v7)
• Kürzere IDs für URLs oder benutzerseitige Anzeigen
• Garantierte plattformübergreifende Kompatibilität mit älteren Laufzeitumgebungen

Aber für die standardmäßige sichere clientseitige ID-Generierung sollte die native API Ihr Ausgangspunkt sein.

Fazit

crypto.randomUUID() liefert Ihnen RFC-konforme, kryptografisch sichere UUIDs ohne jegliche Abhängigkeiten. Generieren Sie IDs zum Zeitpunkt der Objekterstellung, nicht während des Renderns. Verwenden Sie HTTPS in der Produktion. Für Sonderfälle greifen Sie auf crypto.getRandomValues() zurück. Der Browser hat bereits, was Sie brauchen – nutzen Sie es.

FAQs

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.