Quels sont les caractères autorisés dans les cookies ?

Pratiques courantes des navigateurs

Les navigateurs web gèrent les restrictions de caractères des cookies de manière similaire pour suivre les normes web. Voici quelques pratiques courantes :

Encodage URL des caractères spéciaux

Les navigateurs appliquent un encodage URL aux caractères spéciaux dans les valeurs des cookies. Cela convertit les caractères non autorisés dans les URL en un format sécurisé.

document.cookie = "user_info=John Doe & Co.; path=/";
// Le navigateur le stocke comme : user_info=John%20Doe%20%26%20Co.

Gestion des caractères non-ASCII

La plupart des navigateurs prennent en charge l'encodage UTF-8 pour les caractères non-ASCII dans les valeurs des cookies. Il est préférable d'encoder manuellement ces caractères :

const userName = "José";
document.cookie = `user=${encodeURIComponent(userName)}; path=/`;
// Le navigateur le stocke comme : user=Jos%C3%A9

Limitations spécifiques aux navigateurs

Les navigateurs suivent généralement des pratiques similaires, mais il peut y avoir des différences dans la façon dont ils gèrent les cookies.

Stratégies pour travailler avec les limitations des navigateurs

1. Diviser les données volumineuses en plusieurs cookies

function setLargeCookie(name, value) {
    const maxLength = 4000;
    const parts = Math.ceil(value.length / maxLength);

    for (let i = 0; i < parts; i++) {
        const part = value.substr(i * maxLength, maxLength);
        document.cookie = `${name}_${i}=${part}; path=/`;
    }
}

// Utilisation
setLargeCookie("user_data", "très_longue_chaîne_de_données_utilisateur");

2. Utiliser le stockage local pour les données côté client qui n'ont pas besoin d'être envoyées avec chaque requête

// Stockage de données volumineuses dans le stockage local
localStorage.setItem('user_preferences', JSON.stringify(objetPréférencesUtilisateurVolumineux));

// Récupération des données du stockage local
const userPreferences = JSON.parse(localStorage.getItem('user_preferences'));

3. Mettre en place un mécanisme de repli pour les navigateurs avec des limites plus strictes

function setCookie(name, value, days) {
    try {
        document.cookie = `${name}=${value}; max-age=${days * 24 * 60 * 60}; path=/`;
    } catch (error) {
        console.warn(`Échec de la définition du cookie : ${error.message}`);
        localStorage.setItem(name, value);
    }
}

function getCookie(name) {
    const value = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
    return value ? value.pop() : localStorage.getItem(name);
}

Gestion des caractères internationaux

Lors de la gestion de caractères internationaux dans les cookies, considérez ces approches :

1. Utiliser encodeURIComponent() pour l'encodage et decodeURIComponent() pour le décodage
2. Pour des scénarios plus complexes, utiliser btoa() et atob() pour l'encodage en Base64

// Encodage des caractères internationaux
const internationalName = "안녕하세요";
document.cookie = `greeting=${encodeURIComponent(internationalName)}; path=/`;

// Décodage
const storedGreeting = decodeURIComponent(getCookie('greeting'));

// Encodage Base64 pour des données complexes
const complexData = { name: "José", age: 30, city: "São Paulo" };
document.cookie = `userData=${btoa(JSON.stringify(complexData))}; path=/`;

// Décodage Base64
const decodedData = JSON.parse(atob(getCookie('userData')));

Attribut de domaine et limitations de caractères

L'attribut de domaine dans les cookies définit quels hôtes peuvent recevoir le cookie. Voici les points clés concernant l'attribut de domaine et ses limitations de caractères :

Caractères autorisés

• Caractères alphanumériques (a-z, A-Z, 0-9)
• Traits d'union (-)
• Points (.)

Règles des noms de domaine

• Doivent commencer et se terminer par des caractères alphanumériques
• Ne peuvent pas contenir de points consécutifs
• Longueur maximale de 253 caractères

Considérations sur les sous-domaines

• Définir le domaine sur un sous-domaine spécifique limite le cookie à ce sous-domaine
• Utiliser un point initial (.) permet au cookie d'être partagé avec les sous-domaines

// Cookie pour un sous-domaine spécifique
document.cookie = "name=value; domain=subdomain.example.com";

// Cookie partagé avec tous les sous-domaines
document.cookie = "name=value; domain=example.com";

Attributs Expires et Max-Age

Les attributs Expires et Max-Age contrôlent le moment où un cookie doit être supprimé.

Attribut Expires

• Utilise le fuseau horaire GMT/UTC
• Format : "Wdy, DD-Mon-YYYY HH:MM:SS GMT"
• Exemple : "Wed, 21 Oct 2023 07:28:00 GMT"

Attribut Max-Age

• Entier positif représentant des secondes
• La valeur maximale dépend de l'implémentation du navigateur (généralement autour de 2^31 - 1)

// Utilisation de l'attribut Expires
const expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 7);
document.cookie = `name=value; expires=${expirationDate.toUTCString()}`;

// Utilisation de l'attribut Max-Age (7 jours en secondes)
document.cookie = "name=value; max-age=604800";

Attributs supplémentaires des cookies

Attribut Secure

• Assure que le cookie est envoyé uniquement via HTTPS
• Utilisation : document.cookie = "name=value; secure";

Attribut HttpOnly

• Empêche l'accès au cookie via des scripts côté client
• Aide à réduire les attaques de type cross-site scripting (XSS)
• Utilisation : document.cookie = "name=value; HttpOnly";

Attribut SameSite

Contrôle quand les cookies sont envoyés avec des requêtes cross-site :

• Strict : Envoyer uniquement pour les requêtes du même site
• Lax : Envoyer pour le même site et la navigation de premier niveau depuis des sites externes
• None : Autoriser l'envoi cross-site (nécessite l'attribut Secure)

document.cookie = "name=value; SameSite=Strict";