Conseils de gestion des cookies rapides

Hé développeurs! J'ai récemment lutté avec la gestion des cookies dans mon projet, le commerce électronique-Smoky-mega.vercel.app, et je pensais partager mes apprentissages. Faisons des cookies fonctionner plus intelligemment!

Que sont les cookies?

Un cookie est un petit paquet de données envoyé d'un serveur au navigateur d'un utilisateur. Les navigateurs stockent, créent, les modifient et les rendent au serveur avec des demandes ultérieures. Ceci est crucial pour la gestion, la personnalisation et le suivi des sessions.

Cookie Essentials

Considérez les cookies comme de petites notes que votre serveur laisse dans le navigateur de l'utilisateur. Ils sont parfaits pour garder les utilisateurs connectés ou se souvenir de leurs préférences.

Configuration des cookies côté serveur

<code class="language-javascript">const options = {
    httpOnly: true,
    secure: true,
    sameSite: "none"
};

return res
    .status(200)
    .cookie("accessToken", accessToken, options)
    .cookie("refreshToken", refreshToken, options)
    .json(
        new Apiresponse(
            200,
            { user: loggedInUser },
            "User logged in successfully"
        )
    );</code>

Cet exemple montre la définition de deux cookies: un jeton d'accès (authentification à court terme) et un jeton de rafraîchissement (pour obtenir de nouveaux jetons d'accès). L'objet options configure des paramètres de sécurité cruciaux:

• httpOnly: true: Empêche l'accès JavaScript côté client, atténuer les attaques XSS.
• secure: true: Assure que les cookies ne sont envoyés que sur https.
• sameSite: "none": Permet des cookies dans les demandes d'origine croisée (essentiels pour la communication Frontend-Backend). J'ai d'abord lutté avec ce cadre.

Traitement des cookies côté client

<code class="language-javascript">const loginResponse = await axios.post(
    `${base_URL}/api/v1/users/signin`,
    { email, password },
    { withCredentials: true }
);

if (loginResponse.data.data) {
    const userResponse = await axios.get(
        `${base_URL}/api/v1/users/getuser`,
        { withCredentials: true } // Automatically sends cookies
    );
}</code>

Après une connexion réussie (le serveur envoie des cookies), withCredentials: true dans la demande côté client garantit que le navigateur renvoie les cookies au serveur pour la récupération des données de l'utilisateur. Simple, non?

Options de cookies avancées

<code class="language-javascript">const options = {
    expires: new Date(Date.now() + 24 * 60 * 60 * 1000), // Expires in 24 hours
    maxAge: 24 * 60 * 60 * 1000, // Alternative expiry (milliseconds)
    domain: '.example.com',    // All subdomains
    path: '/',                 // Entire domain

};</code>

• expires vs maxAge: Utilisez-en un, pas les deux. maxAge (millisecondes depuis maintenant) est généralement préférée.
• domain: Utilisez avec prudence en raison des implications de sécurité. Définir uniquement si un accès croisé de subdomaïque est nécessaire.
• sameSite: strict (le plus sécurisé, limite les demandes de site croisé), lax (bonne défaut), none (nécessite secure: true).
• signed: nécessite une clé secrète côté serveur.
• partitioned: Une fonctionnalité de confidentialité plus récente, pas universellement prise en charge.

c'est tout! J'espère que cela aide. Ceci est mon premier article, donc les commentaires sont les bienvenus!

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!