Quais são os Caracteres Permitidos em Cookies?

Práticas comuns dos navegadores

Os navegadores web lidam com as restrições de caracteres em cookies de maneira similar para seguir os padrões da web. Aqui estão algumas práticas comuns:

Codificação URL de caracteres especiais

Os navegadores aplicam codificação URL aos caracteres especiais nos valores dos cookies. Isso converte caracteres não permitidos em URLs para um formato seguro.

document.cookie = "user_info=John Doe & Co.; path=/";
// O navegador armazena como: user_info=John%20Doe%20%26%20Co.

Tratamento de caracteres não ASCII

A maioria dos navegadores suporta codificação UTF-8 para caracteres não ASCII em valores de cookies. É melhor codificar esses caracteres manualmente:

const userName = "José";
document.cookie = `user=${encodeURIComponent(userName)}; path=/`;
// O navegador armazena como: user=Jos%C3%A9

Limitações específicas dos navegadores

Os navegadores geralmente seguem práticas semelhantes, mas pode haver diferenças na forma como lidam com cookies.

Estratégias para trabalhar com as limitações dos navegadores

1. Dividir dados grandes em múltiplos 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=/`;
    }
}

// Uso
setLargeCookie("user_data", "string_muito_longa_de_dados_do_usuário");

2. Usar armazenamento local para dados do lado do cliente que não precisam ser enviados com cada requisição

// Armazenando dados grandes no armazenamento local
localStorage.setItem('user_preferences', JSON.stringify(objetoGrandePreferenciasUsuario));

// Recuperando dados do armazenamento local
const userPreferences = JSON.parse(localStorage.getItem('user_preferences'));

3. Implementar um mecanismo de fallback para navegadores com limites mais rigorosos

function setCookie(name, value, days) {
    try {
        document.cookie = `${name}=${value}; max-age=${days * 24 * 60 * 60}; path=/`;
    } catch (error) {
        console.warn(`Falha ao definir 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);
}

Lidando com caracteres internacionais

Ao lidar com caracteres internacionais em cookies, considere estas abordagens:

1. Use encodeURIComponent() para codificação e decodeURIComponent() para decodificação
2. Para cenários mais complexos, use btoa() e atob() para codificação Base64

// Codificando caracteres internacionais
const internationalName = "안녕하세요";
document.cookie = `greeting=${encodeURIComponent(internationalName)}; path=/`;

// Decodificando
const storedGreeting = decodeURIComponent(getCookie('greeting'));

// Codificação Base64 para dados complexos
const complexData = { name: "José", age: 30, city: "São Paulo" };
document.cookie = `userData=${btoa(JSON.stringify(complexData))}; path=/`;

// Decodificando Base64
const decodedData = JSON.parse(atob(getCookie('userData')));

Atributo de domínio e limitações de caracteres

O atributo de domínio em cookies define quais hosts podem receber o cookie. Aqui estão os pontos-chave sobre o atributo de domínio e suas limitações de caracteres:

Caracteres permitidos

• Caracteres alfanuméricos (a-z, A-Z, 0-9)
• Hifens (-)
• Pontos (.)

Regras para nomes de domínio

• Devem começar e terminar com caracteres alfanuméricos
• Não podem conter pontos consecutivos
• Comprimento máximo de 253 caracteres

Considerações sobre subdomínios

• Definir o domínio para um subdomínio específico limita o cookie a esse subdomínio
• Usar um ponto inicial (.) permite que o cookie seja compartilhado com subdomínios

// Cookie para subdomínio específico
document.cookie = "name=value; domain=subdomain.example.com";

// Cookie compartilhado com todos os subdomínios
document.cookie = "name=value; domain=example.com";

Atributos Expires e Max-Age

Os atributos Expires e Max-Age controlam quando um cookie deve ser excluído.

Atributo Expires

• Usa o fuso horário GMT/UTC
• Formato: "Wdy, DD-Mon-YYYY HH:MM:SS GMT"
• Exemplo: "Wed, 21 Oct 2023 07:28:00 GMT"

Atributo Max-Age

• Inteiro positivo representando segundos
• Valor máximo depende da implementação do navegador (normalmente cerca de 2^31 - 1)

// Usando o atributo Expires
const expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 7);
document.cookie = `name=value; expires=${expirationDate.toUTCString()}`;

// Usando o atributo Max-Age (7 dias em segundos)
document.cookie = "name=value; max-age=604800";

Atributos adicionais de cookies

Atributo Secure

• Garante que o cookie só seja enviado por HTTPS
• Uso: document.cookie = "name=value; secure";

Atributo HttpOnly

• Impede o acesso ao cookie por scripts do lado do cliente
• Ajuda a reduzir ataques de cross-site scripting (XSS)
• Uso: document.cookie = "name=value; HttpOnly";

Atributo SameSite

Controla quando os cookies são enviados com requisições cross-site:

• Strict: Envia apenas para requisições do mesmo site
• Lax: Envia para o mesmo site e navegação de nível superior de sites externos
• None: Permite envio cross-site (requer o atributo Secure)

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