Tutorial de Cookies em JavaScript: Como Definir, Obter e Gerenciar Cookies com Segurança

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introdução

No desenvolvimento web usando JavaScript, cookies são amplamente utilizados como um mecanismo importante para armazenar informações relacionadas ao usuário.
Por exemplo, são comumente usados para manter sessões de login ou armazenar dados de carrinho de compras, melhorando significativamente a conveniência do usuário.

No entanto, para iniciantes, conceitos como “O que é um cookie?” ou “Como os cookies podem ser manipulados com JavaScript?” podem ser difíceis de entender.

Neste artigo, fornecemos uma explicação detalhada sobre manipulação de cookies em JavaScript, desde conceitos básicos até usos avançados.
Com exemplos de código práticos, este guia foi projetado para ser útil tanto para iniciantes quanto para desenvolvedores intermediários.

2. O que é um Cookie?

Conceito Básico de Cookies

Um cookie é um pequeno pedaço de dados armazenado em um navegador web.
Ele é usado principalmente para os seguintes propósitos:

• Armazenar informações inseridas pelos usuários em um site (por exemplo, credenciais de login).
• Registrar o comportamento dos visitantes para fins de marketing e análise.
• Preservar configurações (por exemplo, preferências de idioma ou tema) para melhorar a experiência do usuário.

Como os Cookies Funcionam

Os cookies são compostos por pares chave-valor e são armazenados no seguinte formato:

name=value; expires=Wed, 31 Dec 2025 23:59:59 GMT; path=/

Neste exemplo, a chave name recebe o valor value, juntamente com uma data de expiração e um caminho especificado.

Principais Componentes de um Cookie

1. Nome e Valor (name=value) – As informações básicas do cookie.
2. Expiração (expires ou max-age) – Especifica por quanto tempo o cookie permanece válido.
3. Path – Define o diretório ou páginas onde o cookie está acessível.
4. Atributo Secure – Garante que o cookie seja enviado apenas em conexões HTTPS.
5. Atributo SameSite – Ajuda a proteger contra ataques de requisições entre sites.

Essas configurações flexíveis tornam os cookies úteis para melhorar a experiência do usuário ao mesmo tempo que reforçam a segurança.

3. Operações Básicas com Cookies em JavaScript

Em JavaScript, os cookies são manipulados usando a propriedade document.cookie.
Esta seção apresenta as operações básicas.

Definindo um Cookie

Abaixo está um exemplo de como criar um novo cookie.

document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

Pontos Principais:

• username=John : Especifica a chave e o valor.
• expires : Define a data de expiração. Se omitido, o cookie é excluído quando o navegador é fechado.
• path=/ : Torna o cookie disponível em todo o site.

Obtendo Cookies

Todos os cookies podem ser obtidos da seguinte forma:

console.log(document.cookie);

Exemplo de saída:

username=John; theme=dark; lang=ja

Como vários cookies são separados por ponto e vírgula (;), é necessário dividir a string ao processar valores individuais.

Excluindo um Cookie

Para excluir um cookie, defina sua data de expiração para uma data passada.

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

Este código remove o cookie chamado username.

4. Configurações de Atributos de Cookie

Os atributos de cookie desempenham um papel importante na segurança e no controle de expiração.

Definindo a Expiração

1. Usando o atributo expires (baseado em data)

   document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";
   

2. Usando o atributo max-age (baseado em segundos)

   document.cookie = "username=John; max-age=3600; path=/";
   

Esta configuração exclui automaticamente o cookie após uma hora.

Atributos de Segurança

1. Atributo secure (somente HTTPS)

   document.cookie = "username=John; secure";
   

2. Atributo SameSite (proteção contra requisições entre sites)

   document.cookie = "username=John; SameSite=Strict";
   

Ao configurar corretamente esses atributos, você pode melhorar significativamente a segurança e a proteção da privacidade.

5. Exemplos Práticos de Código

Contando Visitas de Usuário

function getCookie(name) {
  let cookies = document.cookie.split('; ');
  for (let i = 0; i < cookies.length; i++) {
    let parts = cookies[i].split('=');
    if (parts[0] === name) return parts[1];
  }
  return null;
}

function setCookie(name, value, days) {
  let expires = "";
  if (days) {
    let date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + value + expires + "; path=/";
}

let visits = getCookie("visits") ? parseInt(getCookie("visits")) : 0;
visits++;
setCookie("visits", visits, 365);
alert("Your number of visits: " + visits);

Este código armazena o número de visitas do usuário em um cookie e atualiza a contagem a cada visita.

6. Usando Bibliotecas de Terceiros

Embora os cookies possam ser gerenciados usando a propriedade document.cookie em JavaScript, manipular strings e definir atributos pode se tornar trabalhoso.
Isso costuma resultar em código mais longo e menor legibilidade.

Para simplificar o gerenciamento de cookies, usar bibliotecas de terceiros é uma abordagem comum e eficaz.
Nesta seção, focamos em uma das bibliotecas mais populares: js-cookie.

1. O que é a Biblioteca js-cookie?

js-cookie é uma biblioteca JavaScript leve que simplifica as operações com cookies.
Principais recursos incluem:

• API Simples : Defina, obtenha e exclua cookies com facilidade.
• Extensibilidade e flexibilidade : Suporta opções de segurança e configurações personalizadas.
• Leve : Aproximadamente 2 KB após minificação.

2. Instalando js-cookie

Carregando via CDN

Adicione o código a seguir dentro da tag <head> do seu arquivo HTML.

<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>

Instalando via npm ou yarn

Se você gerencia dependências no seu projeto, use um dos comandos abaixo:

npm install js-cookie

ou

yarn add js-cookie

3. Uso Básico

Definindo um Cookie

Cookies.set('username', 'John', { expires: 7 }); // Valid for 7 days

Obtendo um Cookie

let username = Cookies.get('username');
console.log(username); // Output: John

Excluindo um Cookie

Cookies.remove('username');

4. Configurações Avançadas de Opções

Definindo expiração e caminho

Cookies.set('session', 'active', { expires: 1, path: '/' });

• expires : Expira após 1 dia.
• path : Torna o cookie disponível em todo o site.

Adicionando o atributo secure

Cookies.set('secureData', 'secret', { secure: true });

• secure: true : Envia o cookie apenas via HTTPS.

Especificando o atributo SameSite

Cookies.set('strictCookie', 'value', { sameSite: 'Strict' });

• sameSite: ‘Strict’ : Bloqueia solicitações entre sites e aumenta a segurança.

7. Segurança e Considerações de Privacidade

Ao trabalhar com cookies em JavaScript, medidas de segurança e proteção de privacidade são extremamente importantes.
Um manuseio inadequado pode levar a vazamentos de dados ou acesso não autorizado.
Esta seção explica as melhores práticas para um gerenciamento seguro de cookies.

1. Medidas de Segurança

Usando HTTPS e o Atributo Secure

Defina o atributo Secure para que os cookies sejam enviados apenas em conexões HTTPS.
Isso ajuda a prevenir a interceptação e a adulteração de dados.

Exemplo:

document.cookie = "sessionID=abc123; Secure";

Ao usar a biblioteca de terceiros js-cookie, você pode configurá‑la da seguinte forma:

Cookies.set('sessionID', 'abc123', { secure: true });

Usando o Atributo HttpOnly (Configuração no Lado do Servidor)

JavaScript não pode definir o atributo HttpOnly no lado do cliente.
Entretanto, configurá‑lo no lado do servidor ajuda a prevenir ataques de XSS (Cross‑Site Scripting).

Exemplo: Configuração no lado do servidor (PHP)

setcookie('sessionID', 'abc123', [
    'httponly' => true,
    'secure' => true,
    'samesite' => 'Strict'
]);

Prevenindo Ataques CSRF com o Atributo SameSite

Para prevenir ataques CSRF (Cross-Site Request Forgery),
configure o atributo SameSite.

Exemplo:

document.cookie = "token=secureToken; SameSite=Strict";

2. Proteção de Privacidade

Limitar o Tipo de Informação Armazenada

Evite armazenar informações pessoais ou sensíveis (como senhas) em cookies.
Em vez disso, armazene identificadores anônimos, como IDs de sessão, e valide‑os no lado do servidor.

Exemplo: Usando um ID de sessão

Cookies.set('sessionID', 'randomString123', { secure: true, httpOnly: true });

Conformidade com GDPR e Regulamentações de Privacidade

Devido a regulamentações como o GDPR (Regulamento Geral de Proteção de Dados) na UE
e a Lei de Proteção de Informações Pessoais do Japão,
os seguintes requisitos se aplicam ao uso de cookies:

1. Consentimento obrigatório do usuário – Os usuários devem ser informados sobre a finalidade do uso de cookies e fornecer consentimento explícito.
2. Oferecer opções de opt‑in e opt‑out – Os usuários devem poder recusar cookies não essenciais.

Exemplo: Banner de consentimento de cookies (JavaScript)

if (!Cookies.get('cookieConsent')) {
  let consent = confirm('This site uses cookies. Do you allow cookies?');
  if (consent) {
    Cookies.set('cookieConsent', 'true', { expires: 365 });
  }
}

8. Como Verificar Cookies no Seu Navegador

Ao definir, recuperar ou excluir cookies com JavaScript,
você pode verificar seu comportamento usando as ferramentas de desenvolvedor do navegador.
Esta seção explica como checar cookies nos principais navegadores.

1. Verificando Cookies no Google Chrome

Abrindo as Ferramentas de Desenvolvedor

1. Clique com o botão direito na página e selecione “Inspecionar” ou “Inspecionar Elemento”.
2. Ou pressione F12 ou Ctrl + Shift + I (no Mac: Cmd + Opt + I).

Passos para Visualizar Cookies

1. Selecione a aba “Application” nas ferramentas de desenvolvedor.
2. No menu à esquerda, clique em “Storage” → “Cookies”.
3. Selecione o domínio alvo na lista.

Visualizando Detalhes dos Cookies

Os cookies do site selecionado são exibidos em formato de tabela.
Cada coluna representa as seguintes informações:

Editando e Excluindo Cookies

• Editar: Clique duas vezes em uma linha para modificar seu valor.
• Excluir: Selecione uma linha e pressione a tecla Delete, ou clique com o botão direito e escolha Delete.

2. Verificando Cookies no Firefox

Abrindo as Ferramentas de Desenvolvedor

1. Clique com o botão direito na página e selecione “Inspecionar”.
2. Ou pressione F12 ou Ctrl + Shift + I.

Visualizando Cookies

1. Selecione a aba “Storage”.
2. Clique em “Cookies” no menu à esquerda.
3. Selecione o site alvo entre os domínios exibidos.

Editando e Excluindo

Assim como no Chrome, você pode editar valores diretamente ou excluir cookies.

3. Verificando Cookies no Safari (para Usuários de Mac)

Habilitando as Ferramentas de Desenvolvedor

1. Abra “Preferências” no menu Safari.
2. Selecione a aba “Avançado” e marque “Mostrar menu Desenvolver na barra de menus”.

Abrindo as Ferramentas de Desenvolvedor

1. Clique com o botão direito na página e selecione “Inspecionar Elemento”.
2. Ou pressione Cmd + Opt + I.

Visualizando Cookies

1. Selecione a aba “Storage”.
2. Escolha “Cookies” para revisar seu conteúdo.

4. Verificando Cookies via Console

Os cookies também podem ser inspecionados usando o console JavaScript.

Exemplo: Exibir todos os cookies

console.log(document.cookie);

Exemplo: Recuperar um cookie específico

let cookies = document.cookie.split('; ');
let username = cookies.find(row => row.startsWith('username=')).split('=')[1];
console.log(username);

Cookies também podem ser adicionados ou removidos diretamente pelo console.

9. Resumo

Nas seções anteriores, cobrimos o manuseio de cookies em JavaScript
desde conceitos básicos até casos de uso avançados.
Esta seção revisa os pontos principais e resume as melhores práticas aplicáveis.

1. Fundamentos de Cookies e Como Eles Funcionam

Cookies são um mecanismo para armazenar pequenas peças de dados em um navegador web.

• Casos de uso : Manter sessões de login, gerenciar preferências do usuário e rastrear comportamento.
• Componentes : Pares chave-valor, configurações de expiração, caminhos, domínios e atributos de segurança.

Compreender esses fundamentos permite que você adapte cookies de forma flexível a vários cenários.

2. Operações com Cookies em JavaScript

Em JavaScript, você pode definir, recuperar e excluir cookies facilmente usando a
propriedade document.cookie.

Exemplo: Definindo um cookie

document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

Exemplo: Obtendo cookies

console.log(document.cookie);

Exemplo: Excluindo um cookie

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

Esses exemplos cobrem os conceitos básicos, mas para requisitos mais complexos,
recomenda-se o uso de uma biblioteca de terceiros.

3. Usando Bibliotecas de Terceiros

Bibliotecas facilitam significativamente o gerenciamento de cookies e tornam o código mais legível.

Exemplo usando js-cookie

Cookies.set('username', 'John', { expires: 7, secure: true });
let username = Cookies.get('username');
Cookies.remove('username');

Vantagens:

• Código curto e intuitivo.
• Configuração fácil de atributos de segurança e opções.
• Compatibilidade suave entre navegadores.

4. Medidas de Segurança e Privacidade

Cookies devem sempre ser usados com configurações adequadas de
segurança e proteção à privacidade.

Práticas de segurança principais

1. Use HTTPS e o atributo Secure : Impede a interceptação de dados.
2. Defina o atributo SameSite : Protege contra ataques CSRF.
3. Use o atributo HttpOnly : Mitiga ataques XSS (configuração no lado do servidor).

Práticas de privacidade principais

1. Não armazene informações pessoais : Armazene apenas IDs ou tokens e gerencie os dados reais no servidor.
2. Cumpra as regulamentações : Implemente gerenciamento de consentimento de acordo com o GDPR e leis relacionadas.
3. Criptografe dados sensíveis : Sempre criptografe informações críticas antes do armazenamento.

5. Verificando e Depurando Cookies

Usar ferramentas de desenvolvedor ajuda a verificar e depurar o comportamento de cookies de forma eficiente.

Ferramentas específicas do navegador

• Google Chrome : Interface altamente funcional e amigável ao usuário.
• Firefox : Recursos avançados de gerenciamento de armazenamento.
• Edge e Safari : Gerenciados usando etapas semelhantes ao Chrome.

Usando o console do JavaScript

console.log(document.cookie);

Isso permite testes rápidos e depuração.

6. Melhores Práticas Aplicáveis

A seguir, recomendações concretas para um gerenciamento seguro e eficiente de cookies:

1. Armazene apenas os dados mínimos necessários Evite cookies desnecessários e gerencie dados críticos no servidor.
2. Defina períodos de expiração apropriados Use tempos de expiração curtos e exclua cookies não utilizados.
3. Reforce as configurações de segurança Sempre configure os atributos Secure, HttpOnly e SameSite.
4. Obtenha consentimento do usuário Implante um banner de consentimento que cumpra o GDPR e outras regulamentações de privacidade.
5. Use ferramentas de depuração de forma eficaz Inspecione cookies regularmente usando ferramentas de desenvolvedor do navegador.
6. Aproveite bibliotecas de terceiros Use bibliotecas como js-cookie para simplificar o gerenciamento e melhorar a legibilidade.

Conclusão

Este artigo forneceu uma visão abrangente do gerenciamento de cookies em JavaScript,
abrangendo desde o uso básico até considerações de segurança e privacidade.

Principais lições

• Os fundamentos de como os cookies funcionam e quando usá-los.
• Como definir, recuperar e excluir cookies usando JavaScript.
• A importância de medidas de segurança e conformidade legal.
• Fluxos de trabalho eficientes usando ferramentas de desenvolvedor e bibliotecas de terceiros.

Próximos passos
Use este guia como referência para implementar o gerenciamento de cookies em projetos do mundo real.
Para permanecer seguro e em conformidade com as leis de privacidade em evolução,
o aprendizado contínuo e revisões regulares das melhores práticas são essenciais.

Continue incorporando novas tecnologias e conhecimentos para construir aplicações web mais seguras,
e amigáveis ao usuário.