Jeton signé entre deux PWA : HMAC-SHA256 sans backend

Vous devez transmettre l'identité d'un utilisateur d'une PWA à une autre. Les deux applications fonctionnent sur des projets Firebase distincts. Elles ne partagent aucune base de données. Elles ne partagent aucune authentification.

Vous pouvez résoudre ce problème sans écrire de code backend. Vous avez seulement besoin de l'API Web Crypto du navigateur et d'une URL signée.

Le problème : Un outil interne appelé PanelControl doit ouvrir un autre site appelé Orders. Lorsqu'un utilisateur clique sur un bouton, le site Orders doit savoir qui est l'utilisateur. Les utilisateurs ne doivent pas avoir à se reconnecter une seconde fois.

Trois façons de procéder :

  • Firebase partagé : Nécessite une base de données commune. Ce n'est pas possible ici.
  • postMessage : Nécessite le même domaine ou une fenêtre contextuelle (popup). Plus difficile à gérer.
  • URL signée HMAC : Utilisez un lien avec un jeton. Cela fonctionne parfaitement.

Comment ça marche : HMAC crée une signature à l'aide d'une clé secrète. Le destinataire utilise la même clé pour vérifier la signature. Si elles correspondent, l'émetteur est considéré comme fiable.

Le flux de travail :

  1. Côté émetteur :
  • Créer une charge utile (payload) avec le nom de l'utilisateur et un horodatage.
  • Signer la charge utile en utilisant HMAC-SHA256.
  • Ajouter la signature et la charge utile à une URL.
  1. Côté destinataire :
  • Lire le jeton depuis l'URL.
  • Séparer la signature de la charge utile.
  • Recalculer la signature en utilisant le secret partagé.
  • Vérifier si le jeton est expiré (par exemple, après 5 minutes).
  • Si le jeton est valide, définir l'identité de l'utilisateur dans l'application.

Détails d'implémentation : L'API Web Crypto est native à tous les navigateurs modernes. Elle fonctionne avec ArrayBuffer et ne nécessite aucune bibliothèque supplémentaire.

Pour garder les choses propres, le script du destinataire s'exécute dans le <head> du document. Il vérifie le jeton, contrôle l'heure et nettoie immédiatement l'URL à l'aide de history.replaceState. Cela supprime le jeton de la barre d'adresse du navigateur afin qu'il reste caché.

Note sur la sécurité : La clé secrète réside dans le code client. Toute personne utilisant les DevTools peut la voir. Cela convient pour des outils métier internes où vous ne transmettez que des données non sensibles, comme un nom.

Si vous construisez une application publique contenant des données sensibles, utilisez plutôt un jeton côté serveur. Pour les outils internes, cette méthode exclusivement côté client est rapide et efficace.

Pas d'infrastructure supplémentaire. Pas de bases de données supplémentaires. Juste des outils de navigateur natifs.

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