Sécurité Web : localStorage vs cookie pour stocker les jetons

La pratique la plus sécurisée consiste à stocker le jeton dans l'état d'application. Cependant, il est important de noter que si l'utilisateur actualise l'application, le token sera réinitialisé. Cela peut entraîner la perte du statut d'authentification de l'utilisateur.

C'est pourquoi les jetons doivent être stockés dans un cookie ou localStorage/sessionStorage.

cookie localStorage VS pour stocker les jetons

Le stockage de jetons d'authentification dans localStorage peut présenter un risque de sécurité, en particulier dans le contexte de vulnérabilités Cross-Site Scripting (XSS), conduisant potentiellement au vol de jetons par des acteurs malveillants.

Le choix de stocker les jetons dans des cookies, configurés avec l'attribut HttpOnly, peut améliorer la sécurité car ils sont inaccessibles au JavaScript côté client. Dans notre exemple d'application, nous utilisons js-cookie pour la gestion des cookies, en supposant que la véritable API appliquerait l'attribut HttpOnly pour une sécurité renforcée et que l'application n'a pas accès au cookie du côté client.

Implémentation avec React et Typescript

Pour implémenter une gestion sécurisée des jetons dans une application React TypeScript avec js-cookie, où la véritable API appliquerait l'attribut HttpOnly, vous pouvez suivre ces étapes :

1. Comprendre la configuration

Cookies HttpOnly : ces cookies sont définis par le serveur et ne sont pas accessibles via JavaScript, ce qui les rend plus sécurisés contre les attaques XSS.
Hypothèse : le serveur gérera la configuration et la gestion des cookies HttpOnly. Votre code côté client se concentrera sur la gestion des jetons via les réponses et requêtes API.

2. Configuration de React TypeScript

Tout d'abord, assurez-vous que js-cookie est installé :

npm install js-cookie

3. Configuration de la gestion des jetons

import React, { createContext, useContext, useEffect, useState } from 'react';
import Cookies from 'js-cookie';

interface AuthContextType {
  token: string | null;
  login: (token: string) => void;
  logout: () => void;
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

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

export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [token, setToken] = useState<string | null>(null);

  // Assuming the token is returned from a server and set as an HttpOnly cookie
  useEffect(() => {
    const fetchTokenFromServer = async () => {
      // Example API call to authenticate and retrieve token (token management handled by server)
      try {
        const response = await fetch('/api/authenticate', {
          method: 'POST',
          credentials: 'include', // This sends the HttpOnly cookie to the server
        });

        if (response.ok) {
          setToken(await response.text()); // Assume token returned in response body for simplicity
        }
      } catch (error) {
        console.error('Error fetching token:', error);
      }
    };

    fetchTokenFromServer();
  }, []);

  const login = (token: string) => {
    // If your server returns the token via a non-HttpOnly cookie or body, store it as needed
    Cookies.set('token', token); // Only use this if the token is not HttpOnly
    setToken(token);
  };

  const logout = () => {
    Cookies.remove('token');
    setToken(null);
  };

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

4. Utilisation du contexte d'authentification dans les composants

import React from 'react';
import { useAuth } from './AuthProvider';

const Dashboard: React.FC = () => {
  const { token, logout } = useAuth();

  if (!token) {
    return <p>You are not logged in.</p>;
  }

  return (
    <div>
      <h1>Dashboard</h1>
      <p>Your token is: {token}</p>
      <button onClick={logout}>Logout</button>
    </div>
  );
};

export default Dashboard;

5. Gestion des cookies HttpOnly

Étant donné que le code côté client ne peut pas accéder directement aux cookies HttpOnly, le serveur doit gérer ces cookies. Dans un scénario réel :

Connexion : lorsque l'utilisateur se connecte, le serveur définit le cookie HttpOnly et le client ne le gère pas directement.
Requêtes API : toutes les demandes nécessitant une authentification doivent inclure les informations d'identification : option "include" pour envoyer le cookie HttpOnly.

6. Implémentation côté serveur

Assurez-vous que votre API côté serveur définit le jeton en tant que cookie HttpOnly. Par exemple, dans un serveur Express.js :

res.cookie('token', token, { httpOnly: true, secure: true, sameSite: 'Strict' });

7. Sécurisez votre candidature

• Utilisez toujours https en production pour garantir que les cookies sont transmis en toute sécurité.

• Pensez à définir secure : true dans vos cookies pour vous assurer qu'ils sont envoyés uniquement via HTTPS.

• Utilisez SameSite=Strict ou Lax pour empêcher les attaques CSRF.

Merci d'avoir lu ! Si vous avez trouvé cet article utile, merci de lui donner un coup de pouce. Si vous avez des questions ou avez besoin de précisions sur un sujet abordé, n'hésitez pas à me contacter. Je suis là pour vous aider et j'aimerais avoir de vos nouvelles ! Vous pouvez me trouver sur Twitter ou LinkedIn. Au plaisir de communiquer avec vous !.

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!