Compreensão dos cookies

Um cookie é um bloco de dados armazenado no navegador que é usado para manter o estado e outras informações de que um site precisa para executar seus recursos.

Rowan Merewood

Um cookie é um pequeno arquivo que os sites armazenam na máquina dos usuários. Essa informação é transmitida entre o navegador e o site.

Cada cookie é um par de chave-valor com uma série de atributos que controlam quando e onde o cookie é usado. Esses atributos são usados para definir datas de validade ou indicar que o cookie só deve ser enviado por HTTPS. É possível definir um cookie em um cabeçalho HTTP ou por meio da interface JavaScript.

Os cookies são um dos métodos disponíveis para adicionar o estado persistente aos sites. Ao longo dos anos, os recursos cresceram e evoluíram, mas deixaram a plataforma com alguns problemas legados problemáticos. Para resolver isso, os navegadores (incluindo o Chrome, o Firefox e o Edge) estão mudando o comportamento para aplicar mais padrões que preservam a privacidade.

Cookies em ação

Suponha que você tenha um blog no qual deseja exibir uma promoção "Novidades" para seus usuários. Os usuários podem dispensar a promoção e, depois, não a verão novamente por um tempo. É possível armazenar essa preferência em um cookie, configurá-la para expirar em um mês (2.600.000 segundos) e enviá-la apenas por HTTPS. Esse cabeçalho ficaria assim:

Set-Cookie: promo_shown=1; Max-Age=2600000; Secure

Quando o leitor visualiza uma página que atende a esses requisitos (se está usando uma conexão segura e o cookie tem menos de um mês), o navegador envia este cabeçalho na solicitação:

Cookie: promo_shown=1

Também é possível adicionar e ler os cookies disponíveis para esse site em JavaScript usando document.cookie. Fazer uma atribuição a document.cookie vai criar ou substituir um cookie com essa chave. Por exemplo, tente o seguinte no console JavaScript do seu navegador:

→ document.cookie = "promo_shown=1; Max-Age=2600000; Secure"
← "promo_shown=1; Max-Age=2600000; Secure"

A leitura de document.cookie produzirá todos os cookies acessíveis no contexto atual, com cada cookie separado por ponto e vírgula:

→ document.cookie;
← "promo_shown=1; color_theme=peachpuff; sidebar_loc=left"

Se você testar isso em uma seleção de sites populares, vai perceber que a maioria deles define muito mais do que apenas três cookies. Na maioria dos casos, esses cookies são enviados em cada solicitação para esse domínio, o que tem várias implicações. Para seus usuários, a largura de banda de upload geralmente é mais restrita do que o download. Portanto, a sobrecarga em todas as solicitações de saída está adicionando um atraso no tempo para o primeiro byte. Seja conservador com relação ao número e ao tamanho dos cookies que você define. Use o atributo Max-Age para garantir que os cookies não fiquem pendentes por mais tempo do que o necessário.

O que são cookies primários e de terceiros?

Se você voltar à mesma seleção de sites que estava vendo antes, provavelmente notou que havia cookies presentes para vários domínios, não apenas o que você estava visitando no momento. Os cookies que correspondem ao domínio do site atual, ou seja, ao que é exibido na barra de endereço do navegador, são chamados de cookies primários. Da mesma forma, os cookies de domínios diferentes do site atual são chamados de cookies de terceiros. Esse não é um rótulo absoluto, mas está relacionado ao contexto do usuário. O mesmo cookie pode ser primário ou de terceiros, dependendo do site em que o usuário está no momento.

Continuando com o exemplo acima, digamos que uma das suas postagens do blog tenha uma foto de um gato especialmente incrível nela e esteja hospedada em /blog/img/amazing-cat.png. Como é uma imagem incrível, outra pessoa a usa diretamente no site dela. Se um visitante tiver acessado seu blog e tiver o cookie promo_shown, quando ele visualizar amazing-cat.png no site da outra pessoa, esse cookie será enviado na solicitação da imagem. Isso não é particularmente útil para ninguém, já que promo_shown não é usado para nada no site dessa outra pessoa. Ele apenas adiciona sobrecarga à solicitação.

Caso esse seja um efeito não intencional, por que você faria isso? É esse mecanismo que permite aos sites manter o estado quando estão sendo usados em um contexto de terceiros. Por exemplo, se você incorporar um vídeo do YouTube ao seu site, os visitantes verão uma opção "Assistir mais tarde" no player. Se o visitante já tiver feito login no YouTube, essa sessão será disponibilizada no player incorporado por um cookie de terceiros. Isso significa que o botão "Assistir mais tarde" salvará o vídeo de uma só vez, em vez de solicitar que ele faça login ou tenha que navegá-lo para fora da sua página e voltar para o YouTube.

Uma das propriedades culturais da Web é que ela tende a ser aberta por padrão. Isso faz parte do que tornou possível para tantas pessoas criarem conteúdo e apps próprios. No entanto, isso também trouxe várias preocupações com segurança e privacidade. Os ataques de falsificação de solicitações entre sites (CSRF, na sigla em inglês) dependem do fato de que os cookies são anexados a qualquer solicitação a uma determinada origem, independentemente de quem a inicie. Por exemplo, se você visitar evil.example, ele poderá acionar solicitações para your-blog.example, e seu navegador anexará os cookies associados. Se seu blog não tiver cuidado com a forma como valida essas solicitações, o evil.example poderá acionar ações como excluir postagens ou adicionar o próprio conteúdo.

Os usuários também estão cada vez mais conscientes de como os cookies podem ser usados para rastrear as atividades deles em vários sites. No entanto, até agora, não havia uma maneira de declarar explicitamente sua intent com o cookie. Seu cookie promo_shown só pode ser enviado em um contexto próprio, enquanto um cookie de sessão de um widget que tem a intenção de ser incorporado em outros sites é intencionalmente lá para fornecer o estado de login em um contexto de terceiros.

Defina o atributo SameSite adequado para declarar explicitamente sua intent com um cookie.

Para identificar seus cookies primários e definir atributos adequados, confira Receitas de cookies primários.