Stocker le token dans cookie HttpOnly côté client web

Protège ton auth token des failles XSS: apprends à créer un helper TypeScript Hono pour lire et placer un cookie HttpOnly, sûr 30 jours, compatible CSRF.

2 min read
Code de la leçon

Pourquoi utiliser un cookie HttpOnly ?

Un cookie HttpOnly est invisible pour JavaScript côté navigateur.
Résultat : même si un script malveillant s’exécute (XSS), il ne pourra pas lire ton token. Le serveur seul y accède via l’en-tête Cookie.

Créer un helper réutilisable

src/lib/auth/cookie.ts
1
import type { Context } from "hono";

2
import { getCookie, setCookie } from "hono/cookie";

3


4
export const TOKEN_COOKIE_NAME = "auth_token";

5


6
export function getAuthToken(c: Context): string | undefined {

7
  return getCookie(c, TOKEN_COOKIE_NAME); // ^? Tooltip: Lit le cookie si présent

8
}

9


10
export function setAuthToken(c: Context, token: string): void {

11
  setCookie(c, TOKEN_COOKIE_NAME, token, {

12
    httpOnly: true,           // ^? Tooltip: Inaccessible via document.cookie

13
    path: "/",                // ^? Tooltip: Disponible partout dans l'app

14
    maxAge: 60 * 60 * 24 * 30, // ^? Tooltip: 30 jours (en secondes)

15
    sameSite: "Lax",          // ^? Tooltip: Protège contre la plupart des CSRF

16
  });

17
}

Explications ligne par ligne :

  1. TOKEN_COOKIE_NAME : un seul endroit à modifier si tu changes le nom.
  2. getAuthToken : lit la valeur stockée, retourne undefined si le cookie n’existe pas.
  3. setAuthToken :
    • httpOnly: true → sécurité XSS.
    • path: "/" → le cookie suit toutes les routes.
    • maxAge → 30 jours de durée de vie, assez long pour éviter des reconnexions fréquentes.
    • sameSite: "Lax" → meilleures protections CSRF sans bloquer la navigation normale.

Quand appeler ces fonctions ?

  • Après une connexion réussie : tu fournis le token signé par ton backend.
  • Sur chaque requête protégée : tu lis le cookie côté serveur pour authentifier l’utilisateur.

Aller plus loin

Prochaine étape : intégrer ces helpers dans ton middleware de protection de routes.

Quiz

Testez vos connaissances avec 5 questions

1Question 1 sur 5
  1. Pourquoi stocker le token d’authentification dans un cookie marqué HttpOnly ? Indice de la bonne réponse : 0 Explication : Un cookie HttpOnly est inaccessible via JavaScript, ce qui empêche un script XSS de lire le token ; les autres réponses n’ont aucun lien avec la protection XSS.
2Question 2 sur 5
  1. Dans la fonction setAuthToken, quel paramètre rend le cookie disponible sur toutes les routes de l’application ? Indice de la bonne réponse : 1 Explication : L’attribut path:"/" étend la portée du cookie à l’ensemble des chemins ; les autres attributs ont d’autres rôles (sécurité, durée, CSRF).
3Question 3 sur 5
  1. Quelle expression est utilisée pour fixer la durée de vie du cookie à 30 jours ? Indice de la bonne réponse : 0 Explication : 60 * 60 * 24 * 30 correspond exactement à 30 jours en secondes.
4Question 4 sur 5
  1. L’attribut sameSite:"Lax" sert principalement à : Indice de la bonne réponse : 0 Explication : "Lax" limite l’envoi du cookie aux requêtes de navigation courantes, bloquant la plupart des attaques CSRF sans gêner l’expérience utilisateur.
5Question 5 sur 5
  1. Sélectionne tous les moments appropriés pour utiliser nos helpers getAuthToken et setAuthToken : Indices des bonnes réponses : 0,1 Explication : On écrit le cookie après une connexion réussie et on le lit à chaque requête protégée ; les deux autres moments n’ont aucun lien avec l’authentification.

Sélectionnez toutes les réponses qui s'appliquent