5.1 Propriedades principais dos cookies
Cookies são pequenos pedaços de dados que os sites podem armazenar no lado do cliente (no navegador). Eles apareceram 20 anos antes do localStorage e desde então têm ajudado a realizar várias funções. Ainda hoje, eles são frequentemente usados para armazenar informações de estado de sessão, preferências do usuário, rastreamento e outras tarefas.
Principais propriedades dos cookies:
- Nome e valor (name=value): um par chave-valor que armazena dados.
- Domínio e caminho (domain, path): determinam para quais URLs e domínios os cookies são aplicáveis.
- Tempo de vida (expires, max-age): determina quando o cookie expira e é removido.
- Segurança (secure, HttpOnly): especifica como e quando os cookies podem ser transmitidos.
Configurando cookies
Os cookies podem ser configurados com JavaScript ou código do lado do servidor. No JavaScript, isso é feito usando a propriedade document.cookie.
Exemplo de configuração de cookie com JavaScript:
document.cookie = "username=JohnDoe";
Parâmetros adicionais de cookies:
- expires: especifica a data de expiração do cookie. Após essa data, o cookie será removido.
- path: define o caminho para o qual o cookie é válido. Normalmente é usado / para tornar o cookie acessível por todo o site.
- domain: define o domínio para o qual o cookie é válido.
- secure: se definido, o cookie será transmitido apenas em HTTPS.
- HttpOnly: se definido, o cookie não pode ser acessado através do JavaScript (apenas do lado do servidor).
Exemplo de configuração de cookie com parâmetros adicionais:
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
5.2 Gerenciamento de cookies
1. Leitura de cookies
Todos os cookies para o documento atual são armazenados em uma única string longa em document.cookie. Para obter o valor de um cookie, você precisa analisar essa string.
Exemplo de leitura de cookies:
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
return null;
}
// Obtendo o valor do cookie "username"
const username = getCookie('username');
console.log(username); // Exibirá: JohnDoe
2. Atualização de cookies
Para atualizar o valor do cookie, basta defini-lo novamente com o mesmo nome, mas com novos valores e parâmetros.
Exemplo de atualização de cookies:
document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
3. Remoção de cookies
Para remover um cookie, você precisa definir para ele um prazo expirado.
Exemplo de remoção de cookies:
// Definindo prazo expirado
document.cookie = "username=JohnDoe; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
5.3 Exemplos de trabalho com cookies
Explicação:
setCookie: configura um cookie com o nome, valor e tempo de vida (em dias) especificadosgetCookie: retorna o valor do cookie pelo nome especificadodeleteCookie: remove um cookie pelo nome especificado
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Cookie Example</title>
</head>
<body>
<button onclick="handleSetCookie()">Set Cookie</button>
<button onclick="handleGetCookie()">Get Cookie</button>
<button onclick="handleDeleteCookie()">Delete Cookie</button>
<script>
function setCookie(name, value, days) {
let expires = "";
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i].trim();
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function deleteCookie(name) {
document.cookie = name + '=; Max-Age=0; path=/';
}
function handleSetCookie() {
setCookie('username', 'JohnDoe', 7);
alert('Cookie "username" atribuído valor "JohnDoe" por 7 dias');
}
function handleGetCookie() {
const cookieValue = getCookie('username');
if (cookieValue) {
alert('Cookie "username" tem valor: ' + cookieValue);
} else {
alert('Cookie "username" não encontrado');
}
}
function handleDeleteCookie() {
deleteCookie('username');
alert('Cookie "username" removido');
}
</script>
</body>
</html>
5.4 Configurando cookie no lado do servidor
Vamos analisar como funcionam os cookies HttpOnly e Secure no servidor (Node.js).
Exemplo:
const express = require('express');
const app = express();
app.get('/setcookie', (req, res) => {
res.cookie('secureServerCookie', 'ServerJohnDoe', {
maxAge: 7 * 24 * 60 * 60 * 1000, // 7 dias
httpOnly: true,
secure: true,
sameSite: 'strict'
});
res.send('Cookie seguro do servidor configurado');
});
app.get('/getcookie', (req, res) => {
const cookie = req.cookies.secureServerCookie;
res.send(`Valor do cookie: ${cookie}`);
});
app.listen(3000, () => {
console.log('Servidor rodando na porta 3000');
});
Exemplos de uso de cookies:
- Autenticação: cookies são frequentemente usados para armazenar tokens de sessão que autenticam o usuário entre as solicitações.
- Preferências do usuário: cookies podem armazenar as configurações do usuário, como idioma da interface ou temas.
- Rastreamento de usuários: cookies podem ser usados para rastrear o comportamento dos usuários no site para análise e personalização de conteúdo.
GO TO FULL VERSION