février 29, 2024

Comprendre les cookies et les sessions dans React —

Dans cet article, nous explorerons les techniques de mise en œuvre et les meilleures pratiques pour les cookies et les sessions dans React.

Les cookies et les sessions font partie intégrante du développement Web. Ils constituent un support de gestion des données utilisateur, de l’authentification et de l’état.

Les cookies sont de petits morceaux de données (4 096 octets maximum) stockés par le navigateur Web sur l’appareil de l’utilisateur pour le compte du serveur Web. Un exemple typique de cookie ressemble à ceci (il s’agit d’un Google Analytics — _ga – biscuit):

Name: _ga
Value: GA1.3.210706468.1583989741
Domain: .example.com
Path: /
Expires / Max-Age: 2022-03-12T05:12:53.000Z

Les cookies ne sont que des chaînes avec des paires clé-valeur.

Les « sessions » font référence au temps passé par les utilisateurs à parcourir un site Web. Ils représentent l’activité contiguë des utilisateurs sur une période donnée.

Dans React, les cookies et les sessions nous aident à créer des applications robustes et sécurisées.

Bases approfondies des cookies et des sessions

Comprendre les bases des cookies et des sessions est fondamental pour développer des applications Web dynamiques et centrées sur l’utilisateur.

Cette section approfondit les concepts de cookies et de sessions, en explorant leurs types, leur cycle de vie et leurs cas d’utilisation typiques.

Biscuits

Les cookies conservent principalement des données avec état entre le client et le serveur sur plusieurs requêtes. Les cookies vous permettent de stocker et de récupérer des données sur la machine de l’utilisateur, facilitant ainsi une expérience de navigation plus personnalisée/transparente.

Types de cookies

Il existe différents types de cookies, et chacun fonctionne bien pour le cas d’utilisation prévu.

Cookies de session sont temporaires et n’existent que pour la durée de la session d’un utilisateur. Ils stockent des informations transitoires, telles que les articles dans un panier :
```
document.cookie = "sessionID=abc123; path=/";
```
Cookies persistants ont une date d’expiration et restent plus longtemps sur la machine de l’utilisateur. Ils fonctionnent pour des fonctionnalités telles que la fonctionnalité « Se souvenir de moi » :
```
document.cookie =
  "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";
```

Cas d’utilisation des cookies dans React

Authentification d’utilisateur. Lorsque nous nous connectons avec succès, un jeton de session ou JWT (JSON Web Token) est souvent stocké dans un cookie :
```
document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; path=/";
```
Préférences de l’utilisateur. Les cookies stockent généralement les préférences de l’utilisateur, telles que les choix de thème ou les paramètres de langue, pour une expérience mieux personnalisée.
```
document.cookie = "theme=dark; path=/";
```

Séances

Définition et objectif

Les sessions représentent une entité logique côté serveur pour stocker des données spécifiques à l’utilisateur lors d’une visite. Les sessions sont étroitement liées aux cookies mais diffèrent par leur stockage ; un identifiant de session stocke souvent des cookies côté client. (Les données des cookies sont stockées sur le serveur.)

Sessions côté serveur ou côté client

Sessions côté serveur impliquent de stocker les données de session sur le serveur. Des cadres comme Express.js utilisez des sessions côté serveur pour gérer l’état des utilisateurs :


const express = require('express');
const session = require('express-session');const app = express();

app.use(session({
  secret: 'your-secret-key',
  resave: false,
  saveUninitialized: true,
}));

Sessions côté client. Avec le côté client, les sessions garantissent qu’il n’est pas nécessaire de répliquer entre les nœuds, de valider des sessions ou d’interroger un magasin de données. Bien que les « sessions côté client » puissent faire référence aux informations de stockage de session sur le client, cela implique souvent l’utilisation de cookies pour stocker les identifiants de session :
```
document.cookie = "sessionID=abc123; path=/";
```

Comprendre les nuances des cookies et des sessions permet de créer des applications Web dynamiques et interactives.

La section à venir explore les implémentations pratiques des cookies et des sessions dans les applications React.

Implémentation de cookies

Comme mentionné précédemment, les cookies constituent un élément fondamental du processus Web et d’une application React.

Les moyens d’implémenter les cookies dans React incluent :

en utilisant le document.cookie API
créer des crochets personnalisés
utiliser des bibliothèques tierces

Utilisation de l’API document.cookie

La manière la plus simple de travailler avec les cookies dans React consiste à utiliser document.cookie API. Il fournit une interface simple pour définir, obtenir et supprimer des cookies.

Définition d’un cookie :


const setCookie = (name, value, days) => {
 const expirationDate = new Date();
 expirationDate.setDate(expirationDate.getDate() + days);

 document.cookie = `${name}=${value}; expires=${expirationDate.toUTCString()}; path=/`;
};


setCookie("username", "john_doe", 7);

Obtenir un cookie :


const getCookie = (name) => {
 const cookies = document.cookie
   .split("; ")
   .find((row) => row.startsWith(`${name}=`));

 return cookies ? cookies.split("=")[1] : null;
};


const username = getCookie("username");

Supprimer un cookie :


const deleteCookie = (name) => {
 document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
};


deleteCookie("username");

Utiliser des hooks personnalisés pour les cookies

La création d’un hook React personnalisé encapsule les fonctionnalités liées aux cookies, ce qui le rend réutilisable dans tous les composants :


import { useState, useEffect } from "react";

const useCookie = (cookieName) => {
  const [cookieValue, setCookieValue] = useState("");

  useEffect(() => {
    const cookie = document.cookie
      .split("; ")
      .find((row) => row.startsWith(`${cookieName}=`));

    setCookieValue(cookie ? cookie.split("=")[1] : "");
  }, [cookieName]);

  const setCookie = (value, expirationDate) => {
    document.cookie = `${cookieName}=${value}; expires=${expirationDate.toUTCString()}; path=/`;
  };

  const deleteCookie = () => {
    document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
  };

  return [cookieValue, setCookie, deleteCookie];
};


const [username, setUsername, deleteUsername] = useCookie("username");

Ce crochet personnalisé, useCookierenvoie la valeur actuelle du cookie, une fonction pour définir une nouvelle valeur et une fonction pour supprimer le cookie.

Utiliser des bibliothèques tierces

Bibliothèques tierces, telles que js-cookiesimplifiez la gestion des cookies dans les applications React.

Installez la bibliothèque :
```
npm install js-cookie
```

Utilisation dans un composant React :


import React, { useEffect } from "react";
import Cookies from "js-cookie";

const MyComponent = () => {
 
 useEffect(() => {
   Cookies.set("user_token", "abc123", { expires: 7, path: "https://www.sitepoint.com/" });
 }, []);

 
 const userToken = Cookies.get("user_token");

 
 const logout = () => {
   Cookies.remove("user_token");
   
 };

 return (
   <div>
     <p>User Token: {userToken}</p>
     <button onClick={logout}>Logout</button>
   </div>
 );
};

export default MyComponent;

Utiliser des bibliothèques tierces comme js-cookie fournit une API propre et pratique pour la gestion des cookies dans les composants React.

Comprendre ces différentes approches nous aide à choisir la méthode la mieux adaptée aux exigences et à la complexité de nos applications React.

Séances de mise en œuvre

Dans les applications React, les sessions fonctionnent côté serveur et l’identifiant de session fonctionne côté client à l’aide de cookies.

Les moyens de mettre en œuvre les séances comprennent :

sessions côté serveur
authentification basée sur un jeton

Sessions côté serveur

Les sessions côté serveur impliquent le stockage des données de session sur le serveur. Dans React, cela signifie utiliser un framework côté serveur comme Express.js avec un middleware de gestion de session.

Configuration d’Express.js avec express-session :

Tout d’abord, installez les packages requis :
```
npm install express express-session
```
Maintenant, configurez Express :
```
const express = require("express");
const session = require("express-session");
const app = express();

app.use(
 session({
   secret: "your-secret-key",
   resave: false,
   saveUninitialized: true,
 })
);
```
Le secret signe le cookie d’identification de session, ajoutant une couche de sécurité supplémentaire.

Utiliser des sessions dans les itinéraires :

Lors de la configuration des sessions, nous pouvons les utiliser dans nos routes :


app.post("/login", (req, res) => {
 
 req.session.user = { id: 1, username: "john_doe" };
 res.send("Login successful!");
});

app.get("/profile", (req, res) => {
 
 const user = req.session.user;
 if (user) {
   res.json({ message: "Welcome to your profile!", user });
 } else {
   res.status(401).json({ message: "Unauthorized" });
 }
});

Après une connexion réussie, les informations utilisateur sont stockées dans la session. Les demandes ultérieures adressées au /profile route peut alors accéder à ces informations.

Authentification basée sur des jetons

L’authentification basée sur les jetons est une méthode de gestion des sessions dans les applications React modernes. Il s’agit de générer un jeton sur le serveur lors d’une authentification réussie, de l’envoyer au client et de l’inclure dans les en-têtes des requêtes ultérieures.

Générer et envoyer des jetons :

Côté serveur :


const jwt = require("jsonwebtoken");

app.post("/login", (req, res) => {
 
 const user = { id: 1, username: "john_doe" };
 const token = jwt.sign(user, "your-secret-key", { expiresIn: "1h" });
 res.json({ token });
});

Le serveur génère un JWT (JSON Web Token) et l’envoie au client.

Inclure un jeton dans les requêtes :

Côté client (React) :


import React, { createContext, useContext, useReducer } from "react";

const AuthContext = createContext();

const authReducer = (state, action) => {
 switch (action.type) {
   case "LOGIN":
     return { ...state, isAuthenticated: true, token: action.token };
   case "LOGOUT":
     return { ...state, isAuthenticated: false, token: null };
   default:
     return state;
 }
};

const AuthProvider = ({ children }) => {
 const [state, dispatch] = useReducer(authReducer, {
   isAuthenticated: false,
   token: null,
 });

 const login = (token) => dispatch({ type: "LOGIN", token });
 const logout = () => dispatch({ type: "LOGOUT" });

 return (
   <AuthContext.Provider value={{ state, login, logout }}>
     {children}
   </AuthContext.Provider>
 );
};

const useAuth = () => {
 const context = useContext(AuthContext);
 if (!context) {
   throw new Error("useAuth must be used within an AuthProvider");
 }
 return context;
};

export { AuthProvider, useAuth };

Ce qui précède utilise React Context pour gérer l’état d’authentification. Le login La fonction met à jour l’état avec le jeton reçu.

Utiliser des jetons dans les requêtes :

Avec le token disponible, incluez-le dans les en-têtes de nos requêtes :


import axios from "axios";
import { useAuth } from "./AuthProvider";

const api = axios.create({
 baseURL: "https://your-api-url.com",
});

api.interceptors.request.use((config) => {
 const { state } = useAuth();

 if (state.isAuthenticated) {
   config.headers.Authorization = `Bearer ${state.token}`;
 }

 return config;
});

export default api;

Lorsque vous faites des demandes auprès de Axiosle token fonctionne automatiquement dans les en-têtes.

Les deux méthodes nous aident à gérer les sessions efficacement, offrant une expérience sécurisée et transparente.

Bonnes pratiques ou gestion des sessions et des cookies dans React

La gestion des sessions et des cookies dans les applications React est essentielle pour créer des applications Web sécurisées, conviviales et performantes.

Pour vous assurer que notre application React fonctionne, procédez comme suit.

Sécuriser les cookies avec HttpOnly et les indicateurs sécurisés

Incluez toujours le HttpOnly et Secure drapeaux le cas échéant.

HttpOnly. Le drapeau empêche les attaques sur le cookie via JavaScript ou tout autre code malveillant, réduisant ainsi le risque d’attaques de type cross-site scripting (XSS). Il garantit que les cookies ne sont accessibles qu’au serveur :
```
document.cookie = "sessionID=abc123; HttpOnly; path=/";
```
Secure. Cet indicateur garantit que le cookie n’envoie que via des connexions sécurisées et cryptées (HTTPS). Il atténue le risque d’interception par des utilisateurs malveillants :
```
document.cookie = "sessionID=abc123; Secure; path=/";
```

Implémentation de l’expiration de la session et de l’actualisation des jetons

Pour améliorer la sécurité, implémentez les propriétés d’expiration de session et d’actualisation de jeton. L’actualisation régulière des jetons ou la définition d’un délai d’expiration de session permettent d’atténuer le risque d’accès non autorisé.

Actualisation du jeton. Actualisez les jetons d’authentification pour garantir que les utilisateurs restent authentifiés. C’est pertinent pour les applications avec de longues sessions utilisateur.
Expiration de la session. Définissez un délai d’expiration de session raisonnable pour limiter la durée de la session d’un utilisateur. Il aide à se protéger contre le détournement de session.


const express = require("express");
const jwt = require("jsonwebtoken");

const app = express();
app.use(express.json());

const secretKey = "your-secret-key";


const generateToken = (user) => {
  return jwt.sign(user, secretKey, { expiresIn: "15m" });
};

app.post("/login", (req, res) => {
  

  
  const user = { id: 1, username: "john_doe" };
  const token = generateToken(user);

  res.json({ token });
});

app.post("/refresh-token", (req, res) => {
  const refreshToken = req.body.refreshToken;

  

  
  const user = decodeRefreshToken(refreshToken); 
  const newToken = generateToken(user);

  res.json({ token: newToken });
});

app.listen(3001, () => {
  console.log("Server is running on port 3001");
});

Le /login le point de terminaison renvoie un jeton JWT initial en cas d’authentification réussie. Le /refresh-token le point de terminaison génère un nouveau jeton d’accès à l’aide d’un jeton d’actualisation.

Chiffrement des données sensibles

Évitez de stocker des informations sensibles directement dans des cookies ou des sessions. Pour préserver les données sensibles dans les cas inévitables, chiffrez-les avant de les stocker. Le chiffrement ajoute une couche de sécurité supplémentaire, rendant plus difficile l’accès des utilisateurs malveillants aux informations sensibles, même s’ils interceptent les données :


const sensitiveData = encrypt(data);
document.cookie = `sensitiveData=${sensitiveData}; Secure; HttpOnly; path=/`;

Utilisation de l’attribut SameSite

Le SameSite L’attribut aide à se protéger contre les attaques de falsification de requêtes intersites (CSRF) en spécifiant quand envoyer des cookies avec des requêtes intersites.

Strict. Les cookies sont envoyés uniquement dans un contexte de première partie, empêchant les sites Web tiers d’effectuer des demandes au nom de l’utilisateur.
```
document.cookie =
  "sessionID=abc123; Secure; HttpOnly; SameSite=Strict; path=/";
```
Relâché. Nous permet d’envoyer des cookies avec des navigations de niveau supérieur (comme lorsque vous cliquez sur un lien), mais pas avec des requêtes POST intersites initiées par des sites Web tiers :
```
document.cookie = "sessionID=abc123; Secure; HttpOnly; SameSite=Lax; path=/";
```

Séparer l’authentification et l’état de l’application

Évitez de stocker l’intégralité de l’état de l’application dans des cookies ou des sessions. Séparez les données d’authentification des autres états liés à l’application pour maintenir la clarté et minimiser le risque d’exposition d’informations sensibles :


document.cookie = "authToken=xyz789; Secure; HttpOnly; path=/";

Utilisation de bibliothèques tierces pour la gestion des cookies

Pensez à utiliser des bibliothèques tierces bien établies pour la gestion des cookies. Les bibliothèques aiment js-cookie fournir une API propre et pratique, éliminant les complexités du natif document.cookie API :


import Cookies from "js-cookie";

Cookies.set("username", "john_doe", { expires: 7, path: "https://www.sitepoint.com/" });
const username = Cookies.get("username");
Cookies.remove("username");

Mettre régulièrement à jour les dépendances

Maintenez les bibliothèques et frameworks tiers à jour pour bénéficier des correctifs et améliorations de sécurité. La mise à jour régulière des dépendances garantit que notre application est moins sensible aux vulnérabilités connues.

Tester les mesures de sécurité

Effectuez régulièrement des audits de sécurité et des tests sur votre application. Il comprend des tests pour les vulnérabilités courantes telles que XSS et CSRF. Pensez à utiliser des outils et des pratiques de sécurité, comme les politiques de sécurité du contenu (CSP), pour atténuer les risques de sécurité.

Résumé

Les cookies et les sessions sont des outils utiles pour créer des applications React sécurisées et efficaces. Ils fonctionnent pour gérer l’authentification des utilisateurs, préserver les préférences des utilisateurs ou mettre en œuvre des interactions avec état.

En suivant les meilleures pratiques et en utilisant des bibliothèques établies, nous créons des applications robustes et fiables qui offrent une expérience utilisateur transparente tout en donnant la priorité à la sécurité.

Si vous avez apprécié cet article React, consultez ces superbes ressources de SitePoint :

Blog ARC Optimizer

février 29, 2024

Comprendre les cookies et les sessions dans React —

Bases approfondies des cookies et des sessions

Biscuits

Types de cookies

Cas d’utilisation des cookies dans React

Séances

Définition et objectif

Sessions côté serveur ou côté client

Implémentation de cookies

Utilisation de l’API document.cookie

Utiliser des hooks personnalisés pour les cookies

Utiliser des bibliothèques tierces

Séances de mise en œuvre

Sessions côté serveur

Authentification basée sur des jetons

Bonnes pratiques ou gestion des sessions et des cookies dans React

Sécuriser les cookies avec HttpOnly et les indicateurs sécurisés

Implémentation de l’expiration de la session et de l’actualisation des jetons

Chiffrement des données sensibles

Utilisation de l’attribut SameSite

Séparer l’authentification et l’état de l’application

Utilisation de bibliothèques tierces pour la gestion des cookies

Mettre régulièrement à jour les dépendances

Tester les mesures de sécurité

Résumé

Articles similaires

Blog ARC Optimizer

Bases approfondies des cookies et des sessions

Biscuits

Types de cookies

Cas d’utilisation des cookies dans React

Séances

Définition et objectif

Sessions côté serveur ou côté client

Implémentation de cookies

Utilisation de l’API document.cookie

Utiliser des hooks personnalisés pour les cookies

Utiliser des bibliothèques tierces

Séances de mise en œuvre

Sessions côté serveur

Authentification basée sur des jetons

Bonnes pratiques ou gestion des sessions et des cookies dans React

Sécuriser les cookies avec HttpOnly et les indicateurs sécurisés

Implémentation de l’expiration de la session et de l’actualisation des jetons

Chiffrement des données sensibles

Utilisation de l’attribut SameSite

Séparer l’authentification et l’état de l’application

Utilisation de bibliothèques tierces pour la gestion des cookies

Mettre régulièrement à jour les dépendances

Tester les mesures de sécurité

Résumé

Partager :

Articles similaires