Ondertekend token tussen twee PWA's: HMAC-SHA256 zonder backend

Je moet de gebruikersidentiteit van de ene PWA naar de andere doorgeven. Beide apps draaien op aparte Firebase-projecten. Ze delen geen database. Ze delen geen authenticatie.

Je kunt dit oplossen zonder backend-code te schrijven. Je hebt alleen de Web Crypto API van de browser en een ondertekende URL nodig.

Het probleem: Een interne tool genaamd PanelControl moet een andere site genaamd Orders openen. Wanneer een gebruiker op een knop klikt, moet de Orders-site weten wie de gebruiker is. Gebruikers mogen niet opnieuw hoeven in te loggen.

Drie manieren om dit te doen:

  • Shared Firebase: Vereist een gedeelde database. Niet mogelijk in dit geval.
  • postMessage: Vereist hetzelfde domein of een popup. Moeilijker te beheren.
  • HMAC ondertekende URL: Gebruik een link met een token. Dit werkt perfect.

Hoe het werkt: HMAC maakt een handtekening met behulp van een geheime sleutel (secret key). De ontvanger gebruikt dezelfde sleutel om de handtekening te controleren. Als ze overeenkomen, is de verzender vertrouwd.

De workflow:

  1. Aan de verzendende kant:
  • Maak een payload aan met de gebruikersnaam en een tijdstempel.
  • Onderteken de payload met HMAC-SHA256.
  • Voeg de handtekening en de payload toe aan een URL.
  1. Aan de ontvangende kant:
  • Lees het token uit de URL.
  • Splits de handtekening van de payload.
  • Bereken de handtekening opnieuw met behulp van de gedeelde geheime sleutel.
  • Controleer of het token is verlopen (bijv. na 5 minuten).
  • Als het geldig is, stel dan de gebruikersidentiteit in de app in.

Implementatiedetails: De Web Crypto API is ingebouwd in alle moderne browsers. Het werkt met ArrayBuffer en vereist geen extra bibliotheken.

Om het netjes te houden, wordt het script van de ontvanger in de <head> van het document uitgevoerd. Het verifieert het token, controleert de tijd en maakt de URL onmiddellijk schoon met behulp van history.replaceState. Hierdoor wordt het token uit de adresbalk van de browser verwijderd, zodat het verborgen blijft.

Een opmerking over beveiliging: De geheime sleutel staat in de clientcode. Iedereen die DevTools gebruikt, kan deze zien. Dit is prima voor interne zakelijke tools waarbij je alleen niet-gevoelige gegevens zoals een naam doorgeeft.

Als je een publieke app bouwt met gevoelige gegevens, gebruik dan in plaats daarvan een token aan de serverzijde. Voor interne tools is deze client-only methode snel en effectief.

Geen extra infrastructuur. Geen extra databases. Alleen native browser-tools.

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