Signiertes Token zwischen zwei PWAs: HMAC-SHA256 ohne Backend

Sie müssen die Benutzeridentität von einer PWA an eine andere übergeben. Beide Apps laufen in separaten Firebase-Projekten. Sie teilen sich keine Datenbank. Sie teilen sich keine Authentifizierung.

Sie können dies lösen, ohne Backend-Code zu schreiben. Sie benötigen lediglich die Web Crypto API des Browsers und eine signierte URL.

Das Problem: Ein internes Tool namens PanelControl muss eine andere Seite namens Orders öffnen. Wenn ein Benutzer auf eine Schaltfläche klickt, muss die Orders-Seite wissen, wer der Benutzer ist. Benutzer sollten sich nicht ein zweites Mal anmelden müssen.

Drei Möglichkeiten, dies umzusetzen:

  • Shared Firebase: Erfordert eine gemeinsame Datenbank. Hier nicht möglich.
  • postMessage: Erfordert dieselbe Domain oder ein Popup. Schwerer zu verwalten.
  • HMAC-signierte URL: Verwenden Sie einen Link mit einem Token. Das funktioniert perfekt.

So funktioniert es: HMAC erstellt eine Signatur mithilfe eines geheimen Schlüssels (Secret Key). Der Empfänger verwendet denselben Schlüssel, um die Signatur zu überprüfen. Wenn sie übereinstimmen, gilt der Absender als vertrauenswürdig.

Der Workflow:

  1. Sender-Seite:
  • Erstellen Sie ein Payload mit dem Benutzernamen und einem Zeitstempel.
  • Signieren Sie das Payload mit HMAC-SHA256.
  • Hängen Sie die Signatur und das Payload an eine URL an.
  1. Empfänger-Seite:
  • Lesen Sie das Token aus der URL.
  • Trennen Sie die Signatur vom Payload.
  • Berechnen Sie die Signatur mithilfe des gemeinsamen Secrets neu.
  • Prüfen Sie, ob das Token abgelaufen ist (z. B. nach 5 Minuten).
  • Wenn gültig, setzen Sie die Benutzeridentität in der App.

Implementierungsdetails: Die Web Crypto API ist in allen modernen Browsern nativ enthalten. Sie arbeitet mit ArrayBuffer und benötigt keine zusätzlichen Bibliotheken.

Um alles sauber zu halten, wird das Empfänger-Skript im <head> des Dokuments ausgeführt. Es verifiziert das Token, prüft die Zeit und bereinigt die URL sofort mithilfe von history.replaceState. Dadurch wird das Token aus der Adressleiste des Browsers entfernt, sodass es verborgen bleibt.

Ein Hinweis zur Sicherheit: Der geheime Schlüssel befindet sich im Client-Code. Jeder, der die DevTools verwendet, kann ihn sehen. Dies ist völlig in Ordnung für interne Business-Tools, bei denen Sie nur nicht-sensible Daten wie einen Namen übergeben.

Wenn Sie eine öffentliche App mit sensiblen Daten entwickeln, verwenden Sie stattdessen ein serverseitiges Token. Für interne Tools ist diese rein clientseitige Methode schnell und effektiv.

Keine zusätzliche Infrastruktur. Keine zusätzlichen Datenbanken. Nur native Browser-Tools.

Quelle: https://dev.to/androve2k/signed-token-between-two-pwas-hmac-sha256-with-no-backend-3jod