Comprendre les cookies et les séances dans la réaction

Points clés

• Les cookies et les sessions sont des composants essentiels du développement Web et sont utilisés pour gérer les données des utilisateurs, l'authentification et le statut. Les cookies sont de petites quantités de morceaux de données stockés par un navigateur Web sur l'appareil d'un utilisateur, et la session fait référence au moment où un utilisateur parcourt un site Web.
• Dans React, vous pouvez utiliser l'API document.cookie, créer des crochets personnalisés ou utiliser des bibliothèques tierces pour implémenter des cookies. La session dans React peut être implémentée via une session côté serveur ou une authentification basée sur les jetons.
• Les meilleures pratiques pour gérer la session et les cookies dans React comprennent: la protection des cookies avec les drapeaux HttpOnly et secure, d'activation l'expiration de la session et de rafraîchir les jetons, de crypter des données sensibles, en utilisant les attributs SameSite et la séparation de l'authentification et de l'état de l'application.
• Les bibliothèques tierces telles que JS-Cookies peuvent simplifier la gestion des cookies dans les applications React. Il est recommandé de mettre à jour régulièrement les dépendances pour bénéficier des correctifs de sécurité et des améliorations.
• Les audits de sécurité réguliers et les tests sont essentiels pour assurer la sécurité des applications. Des outils et des pratiques tels que la politique de sécurité du contenu (CSP) peuvent être utilisés pour réduire les risques de sécurité.

Cet article explorera les technologies et les meilleures pratiques pour mettre en œuvre des cookies et des sessions dans React.

Les cookies et la session sont des composants indispensables du développement Web. Ils sont le moyen de gérer les données des utilisateurs, l'authentification et le statut.

Les cookies sont de petites quantités de données (jusqu'à 4096 octets) stockées dans le navigateur Web sur l'appareil de l'utilisateur. Un cookie typique ressemble à ceci (il s'agit d'une Google Analytics - _ga - cookie):

<code>名称：_ga
值：GA1.3.210706468.1583989741
域：.example.com
路径：/
过期/最大年龄：2022-03-12T05:12:53.000Z</code>

Le cookie n'est qu'une chaîne avec des paires de valeurs clés.

"Session" fait référence au moment où l'utilisateur parcourt le site Web. Ils représentent l'activité continue de l'utilisateur sur une période de temps.

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 le fondement du développement d'applications Web dynamiques et centrées sur l'utilisateur.

Cette section explorera les concepts de cookies et de sessions de manière plus approfondie, explorant leurs types, leurs cycles de vie et leurs cas d'utilisation typiques.

cookie

Les cookies maintiennent principalement les données d'état entre le client et le serveur dans plusieurs demandes. Les cookies vous permettent de stocker et de récupérer des données des machines des utilisateurs, offrant une expérience de navigation plus personnalisée / sans couture.

Type de cookie

Il existe différents types de cookies, dont chacun est parfait pour son cas d'utilisation prévu.

1. Les cookies de session sont temporaires et n'existent que pendant les séances utilisateur. Ils stockent des informations brèves, telles que les articles dans un panier:

   <code>名称：_ga
   值：GA1.3.210706468.1583989741
   域：.example.com
   路径：/
   过期/最大年龄：2022-03-12T05:12:53.000Z</code>

2. Cookie de permanence a une date d'expiration et restera sur la machine de l'utilisateur pendant une période plus longue. Ils conviennent à des fonctionnalités comme la fonctionnalité Remember Me:

   <code class="language-javascript">// 示例：设置会话 Cookie
   document.cookie = "sessionID=abc123; path=/";</code>

Usercases de cookies dans React

• Authentification utilisateur. Lorsqu'un utilisateur se connecte avec succès, un jeton de session ou JWT (jeton Web JSON) est généralement stocké dans un cookie:

  <code class="language-javascript">// 示例：设置具有过期日期的持久性 Cookie
  document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";</code>

• Préférences des utilisateurs. Les cookies stockent généralement les préférences des utilisateurs, telles que la sélection de thème ou les paramètres de la langue, pour une meilleure expérience personnalisée.

  <code class="language-javascript">document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; path=/";</code>

Session

Définition et utilisation

La session représente une entité logique côté serveur qui stocke les données spécifiques à l'utilisateur pendant l'accès. La session est étroitement liée aux cookies, mais est stocké de différentes manières; (Les données des cookies sont stockées sur le serveur.)

côté serveur et session client

• La session côté serveur implique le stockage des données de session sur le serveur. Des cadres comme express.js utilisent la session côté serveur pour gérer l'état de l'utilisateur:

  <code class="language-javascript">// 示例：在 Cookie 中存储用户偏好设置
  document.cookie = "theme=dark; path=/";</code>

• Session client. Lorsque vous utilisez des sessions clients, il n'est pas nécessaire de reproduire, de vérifier la session ou de demander le magasin de données entre les nœuds. Bien que la «session du client» puisse se référer aux informations de stockage de session sur le client, elle implique généralement l'utilisation de cookies pour stocker les identificateurs de session:

  <code class="language-javascript">// 使用 express-session 中间件
  const express = require('express');
  const session = require('express-session');
  const app = express();
  
  app.use(session({
    secret: 'your-secret-key',
    resave: false,
    saveUninitialized: true,
  }));</code>

Comprendre les subtilités des cookies et des sessions aide à créer des applications Web dynamiques et interactives.

La section suivante explorera la mise en œuvre réelle des cookies et des sessions dans les applications React.

Implémentation Cookies

Comme mentionné précédemment, les cookies sont un composant de base des processus Web et des applications de réaction.

Comment implémenter les cookies dans React incluent:

• en utilisant document.cookie api
• Créer un crochet personnalisé
• en utilisant des bibliothèques tierces

en utilisant document.cookie api

La façon la plus élémentaire d'utiliser des cookies dans React est via l'API document.cookie. Il fournit une interface simple pour définir, obtenir et supprimer des cookies.

1. Définir les cookies:

   <code class="language-javascript">// 示例：在客户端的 Cookie 中存储 Session ID
   document.cookie = "sessionID=abc123; path=/";</code>

2. Obtenez des cookies:

   <code class="language-javascript">// 设置 Cookie 的函数
   const setCookie = (name, value, days) => {
     const expirationDate = new Date();
     expirationDate.setDate(expirationDate.getDate() + days);
   
     document.cookie = `${name}=${value}; expires=${expirationDate.toUTCString()}; path=/`;
   };
   
   // 示例：设置一个在 7 天后过期的用户名 Cookie
   setCookie("username", "john_doe", 7);</code>

3. Supprimer le cookie:

   <code class="language-javascript">// 按名称获取 Cookie 值的函数
   const getCookie = (name) => {
     const cookies = document.cookie
       .split("; ")
       .find((row) => row.startsWith(`${name}=`));
   
     return cookies ? cookies.split("=")[1] : null;
   };
   
   // 示例：获取“username” Cookie 的值
   const username = getCookie("username");</code>

Utilisez des crochets personnalisés pour gérer les cookies

Créez un crochet React personnalisé pour encapsuler les fonctionnalités liées aux cookies afin qu'il puisse être réutilisé entre les composants:

<code class="language-javascript">// 按名称删除 Cookie 的函数
const deleteCookie = (name) => {
  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
};

// 示例：删除“username” Cookie
deleteCookie("username");</code>

Ce crochet personnalisé useCookie renvoie la valeur actuelle du cookie, la fonction qui définit la nouvelle valeur et la fonction qui supprime le cookie.

en utilisant des bibliothèques tierces

Les bibliothèques tierces telles que JS-Cookies simplifient la gestion des cookies dans les applications React.

1. Bibliothèque d'installation:

   <code class="language-javascript">// useCookie.js
   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];
   };
   
   // 在 React 组件中的用法
   const [username, setUsername, deleteUsername] = useCookie("username");</code>

2. Utilisation dans les composants de réaction:

   <code>名称：_ga
   值：GA1.3.210706468.1583989741
   域：.example.com
   路径：/
   过期/最大年龄：2022-03-12T05:12:53.000Z</code>

L'utilisation de bibliothèques tierces telles que JS-Cookies fournit une API simple et pratique pour la gestion des cookies dans les composants React.

Comprendre ces différentes approches nous aide à choisir celui qui convient le mieux aux besoins et à la complexité de nos applications de réaction.

Implémentez la session

Dans les applications React, la session fonctionne du côté du serveur, tandis que les identificateurs de session utilisent des cookies pour travailler du côté client.

Les méthodes pour implémenter la session comprennent:

• Session côté serveur
• Authentification basée sur les jetons

Session côté serveur

La session côté serveur implique le stockage des données de session sur le serveur. Dans React, cela signifie l'utilisation de cadres côté serveur comme Express.js et Middleware de gestion de session.

1. Set Express.js en utilisant Express-Session: Tout d'abord, installez le package requis:

   <code class="language-javascript">// 示例：设置会话 Cookie
   document.cookie = "sessionID=abc123; path=/";</code>

   Maintenant, configure express:

   <code class="language-javascript">// 示例：设置具有过期日期的持久性 Cookie
   document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";</code>

   secret Utilisé pour signer des cookies d'ID de session, ajoutant une couche supplémentaire de sécurité.

2. Utiliser la session dans le routage: Après la configuration de la session, nous pouvons les utiliser dans l'itinéraire:

   <code class="language-javascript">document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; path=/";</code>

   Après avoir réussi à se connecter, les informations de l'utilisateur seront stockées dans la session. Ces informations sont accessibles par des demandes ultérieures pour l'itinéraire /profile.

Authentification basée sur les jetons

L'authentification basée sur les jetons est un moyen de gérer les sessions dans les applications REACT modernes. Il s'agit de générer un jeton après une authentification réussie sur le serveur, de l'envoyer au client et de l'inclure dans l'en-tête des demandes suivantes.

1. générer et envoyer des jetons: Du côté du serveur:

   <code class="language-javascript">// 示例：在 Cookie 中存储用户偏好设置
   document.cookie = "theme=dark; path=/";</code>

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

2. Inclure le jeton dans la demande: Sur le client (react):

   <code class="language-javascript">// 使用 express-session 中间件
   const express = require('express');
   const session = require('express-session');
   const app = express();
   
   app.use(session({
     secret: 'your-secret-key',
     resave: false,
     saveUninitialized: true,
   }));</code>

   Ce qui précède utilise le contexte React pour gérer l'état d'authentification. La fonction login met à jour l'état à l'aide du jeton reçu.

3. utiliser des jetons dans la demande: Avec le jeton, incluez-le dans l'en-tête de la demande:

   <code class="language-javascript">// 示例：在客户端的 Cookie 中存储 Session ID
   document.cookie = "sessionID=abc123; path=/";</code>

   Lors de la demande avec Axios, le jeton est automatiquement ajouté à l'en-tête.

Les deux méthodes nous aident à gérer efficacement notre session, offrant une expérience sûre et transparente.

meilleures pratiques pour gérer les séances et les cookies dans React

Les séances de gestion et les cookies dans les applications React sont essentielles pour créer des applications Web sécurisées, conviviales et hautes performances.

Pour vous assurer que notre application React fonctionne correctement, veuillez effectuer ce qui suit.

Utiliser HttpOnly et secure Cookies de protection du logo

incluez toujours les logos HttpOnly et secure le cas échéant.

• HttpOnly. Ce drapeau empêche les attaques contre les cookies via JavaScript ou tout autre code malveillant, réduisant le risque d'attaques de scripts croisés (XSS). Il garantit que les cookies sont accessibles uniquement par le serveur:

  <code>名称：_ga
  值：GA1.3.210706468.1583989741
  域：.example.com
  路径：/
  过期/最大年龄：2022-03-12T05:12:53.000Z</code>

• secure. Ce drapeau garantit que les cookies sont envoyés uniquement sur des connexions cryptées sécurisées (HTTPS). Il peut atténuer le risque d'interception malveillante des utilisateurs:

  <code class="language-javascript">// 示例：设置会话 Cookie
  document.cookie = "sessionID=abc123; path=/";</code>

Implémentez l'expiration de la session et la rafraîchissement des jetons

Pour une sécurité améliorée, implémenter l'expiration de la session et les propriétés de rafraîchissement des jetons. Rafraîchir régulièrement le jeton ou la définition du temps d'expiration de la session peut aider à atténuer le risque d'accès non autorisé.

• Rafraîchissement du jeton. Actualisez le jeton d'authentification pour vous assurer que l'utilisateur reste authentifié. Ceci est lié aux applications avec des séances utilisateur plus longues.
• La session a expiré. Définissez un temps d'expiration raisonnable pour limiter la durée de la session utilisateur. Cela aide à prévenir le détournement de session.

<code class="language-javascript">// 示例：设置具有过期日期的持久性 Cookie
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";</code>

/login Le point de terminaison renvoie le jeton JWT initial après une authentification réussie. /refresh-token Le point de terminaison utilise le jeton de rafraîchissement pour générer un nouveau jeton d'accès.

crypter les données sensibles

Évitez de stocker des informations sensibles directement dans les cookies ou les sessions. Pour conserver des données sensibles dans des circonstances inévitables, cryptez-la avant de les stocker. Le chiffrement ajoute une couche de sécurité supplémentaire, ce qui rend plus difficile d'accéder aux informations sensibles même si les utilisateurs malveillants interceptent les données:

<code class="language-javascript">document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; path=/";</code>

en utilisant SameSite Propriétés

L'attribut

SameSite aide à prévenir les attaques de contrefaçon de demande de site transversal (CSRF) en spécifiant lorsque les cookies sont envoyés avec des demandes de site transversal.

• Strict. Les cookies ne sont envoyés que dans un contexte de premier parti, empêchant les sites Web tiers de faire des demandes au nom des utilisateurs.

  <code class="language-javascript">// 示例：在 Cookie 中存储用户偏好设置
  document.cookie = "theme=dark; path=/";</code>

• Lax. Permettez-nous d'envoyer des cookies en utilisant une navigation de niveau supérieur (comme lors du clic sur un lien), mais pas des demandes de publication inter-sites initiées par des sites Web tiers:

  <code class="language-javascript">// 使用 express-session 中间件
  const express = require('express');
  const session = require('express-session');
  const app = express();
  
  app.use(session({
    secret: 'your-secret-key',
    resave: false,
    saveUninitialized: true,
  }));</code>

Authentification et état de l'application séparés

Évitez de stocker l'intégralité de l'état d'application dans un cookie ou une session. Séparer les données d'authentification des autres états liés à l'application pour maintenir la clarté et minimiser le risque d'exposition à des informations sensibles:

<code class="language-javascript">// 示例：在客户端的 Cookie 中存储 Session ID
document.cookie = "sessionID=abc123; path=/";</code>

Utilisez des bibliothèques tierces pour la gestion des cookies

Envisagez d'utiliser une bibliothèque tierce mature pour la gestion des cookies. La bibliothèque comme JS-Cookie fournit une API simple et pratique qui résume la complexité de l'API native document.cookie:

<code class="language-javascript">// 设置 Cookie 的函数
const setCookie = (name, value, days) => {
  const expirationDate = new Date();
  expirationDate.setDate(expirationDate.getDate() + days);

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

// 示例：设置一个在 7 天后过期的用户名 Cookie
setCookie("username", "john_doe", 7);</code>

Mises à jour connexes aux dépendances

Gardez les bibliothèques et les cadres tiers à jour pour bénéficier des correctifs de sécurité et des améliorations. Les mises à jour régulières des dépendances garantissent que nos applications ne sont pas sensibles aux vulnérabilités connues.

Mesures de sécurité des tests

Discutez régulièrement de votre application pour les audits de sécurité et les tests. Cela comprend le test des vulnérabilités communes telles que XSS et CSRF. Envisagez d'utiliser des outils de sécurité et des pratiques telles que la politique de sécurité du contenu (CSP) pour réduire les risques de sécurité.

Résumé

Les cookies et la session sont des outils utiles pour créer des applications de réaction sûres et efficaces. Ils sont utilisés pour gérer l'authentification des utilisateurs, préserver les préférences des utilisateurs ou activer les interactions avec état.

En suivant les meilleures pratiques et en utilisant des bibliothèques éprouvées, nous pouvons créer des applications robustes et fiables qui offrent une expérience utilisateur transparente tout en priorisant la sécurité.

Si vous aimez cet article, veuillez consulter d'autres ressources passionnantes de SitePoint:

• Réagir l'optimisation des performances
• Meilleure bibliothèque du graphique de réaction de 2024
• 6 techniques de rendu conditionnel dans React, avec des exemples

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!