Acesso assíncrono a cookies HTTP

Victor Costan
X GitHub

O que é a API Cookie Store?

A API Cookie Store expõe cookies HTTP a service workers e oferece uma alternativa assíncrona ao document.cookie. Com a API, mais fácil:

  • Para evitar instabilidade na linha de execução principal, acesse cookies de forma assíncrona.
  • Evite pesquisar cookies, porque é possível observar mudanças nos cookies.
  • Acessar cookies de service workers.

Leia a explicação

Status atual

Etapa Status
1. Criar explicação Concluído
2. Criar um rascunho inicial da especificação Concluído
**3. Colete feedback e iterar de acordo com as especificações** **Em andamento**
4. Teste de origem Pausada
5. Lançamento Não iniciado

Como usar o armazenamento de cookies assíncrono?

Ativar o teste de origem

Para testá-la localmente, ative a API na linha de comando:

chrome --enable-blink-features=CookieStore

Transmitir essa sinalização na linha de comando ativa a API globalmente no Chrome para da sessão atual.

Como alternativa, você pode ativar #enable-experimental-web-platform-features em chrome://flags.

Você (provavelmente) não precisa de cookies

Antes de mergulhar na nova API, gostaria de afirmar que os cookies ainda são a interface pior primitivo de armazenamento do lado do cliente da plataforma e ainda como último recurso. Não é um acidente. Os cookies foram o primeiro recurso da Web mecanismo de armazenamento do Google Cloud, e aprendemos muito desde então.

Os principais motivos para evitar cookies são:

  • Os cookies transferem seu esquema de armazenamento para sua API de back-end. Cada solicitação HTTP carrega um snapshot do cookie jar. Isso facilita engenheiros de back-end a fim de introduzir dependências no formato de cookie atual. Uma vez o front-end não poderá alterar o esquema de armazenamento sem implantar uma alteração correspondente no back-end.

  • Os cookies têm um modelo de segurança complexo. Os recursos da plataforma moderna da Web seguem a mesma política de origem, ou seja, cada aplicativo recebe seu próprio sandbox e é completamente independente e outros aplicativos que o usuário possa estar executando. Escopos de cookies criar uma situação de segurança significativamente mais complexa e apenas tentar resumir que isso dobraria o tamanho deste artigo.

  • Os cookies têm custos de alto desempenho. Os navegadores precisam incluir um snapshot dos os cookies em cada solicitação HTTP, de modo que toda alteração nos cookies deve ser propagadas pelas pilhas de rede e armazenamento. Os navegadores modernos têm implementações otimizadas de cookies, mas nunca conseguiremos fazer os cookies são tão eficientes quanto os outros mecanismos de armazenamento, que não precisam se comunicar à pilha de rede.

Por todas as razões acima, os aplicativos da Web modernos devem evitar cookies e em vez disso, armazenar um identificador de sessão em IndexedDB adicionar explicitamente o identificador ao cabeçalho ou corpo de solicitações HTTP específicas usando a API fetch.

Dito isso, você ainda está lendo este artigo porque tem uma boa motivo para usar cookies...

Os veneráveis document.cookie A API é uma fonte bastante garantida de instabilidade para o aplicativo. Por exemplo: sempre que você usa o getter document.cookie, o navegador precisa parar a execução JavaScript até que ele tenha as informações de cookie que você solicitou. Isso pode demorar um pouco ou uma leitura de disco, e vai causar instabilidade na interface.

Uma solução simples para esse problema é mudar da document.cookie getter à API Cookie Store assíncrona.

await cookieStore.get('session_id');

// {
//   domain: "example.com",
//   expires: 1593745721000,
//   name: "session_id",
//   path: "/",
//   sameSite: "unrestricted",
//   secure: true,
//   value: "yxlgco2xtqb.ly25tv3tkb8"
// }

O setter document.cookie pode ser substituído de maneira semelhante. Observação importante que a mudança só tem garantia de ser aplicada após a promessa retornada pelo cookieStore.set resolve.

await cookieStore.set({name: 'opt_out', value: '1'});

// undefined

Observar, não fazer enquete

Um aplicativo popular para acessar cookies a partir do JavaScript está detectando quando o usuário faz logout e atualiza a interface. No momento, isso é feito por meio de pesquisas document.cookie, que gera instabilidade e tem um impacto negativo na bateria. vida.

A API Cookie Store oferece um método alternativo para observar cookies que não exigem sondagem.

cookieStore.addEventListener('change', event => {
  for (const cookie of event.changed) {
    if (cookie.name === 'session_id') sessionCookieChanged(cookie.value);
  }
  for (const cookie of event.deleted) {
    if (cookie.name === 'session_id') sessionCookieChanged(null);
  }
});

Dê boas-vindas aos service workers

Devido ao design síncrono, a API document.cookie não foi feita disponível para service workers. A API Cookie Store é assíncrona e, portanto, é permitida no serviço trabalhadores

A interação com os cookies funciona da mesma forma em contextos de documentos e service workers.

// Works in documents and service workers.
async function logOut() {
  await cookieStore.delete('session_id');
}

No entanto, observar as mudanças dos cookies é um pouco diferente nos service workers. Despertar um service worker pode ser muito caro, então temos que descrever explicitamente o cookie muda o interesse do worker.

No exemplo abaixo, um aplicativo que usa o IndexedDB para armazenar dados do usuário em cache monitora alterações no cookie de sessão e descarta os dados armazenados em cache quando o o usuário faz logout.

// Specify the cookie changes we're interested in during the install event.
self.addEventListener('install', event => {
  event.waitUntil(cookieStore.subscribeToChanges([{name: 'session_id'}]));
});

// Delete cached data when the user logs out.
self.addEventListener('cookiechange', event => {
  for (const cookie of event.deleted) {
    if (cookie.name === 'session_id') {
      indexedDB.deleteDatabase('user_cache');
      break;
    }
  }
});

Práticas recomendadas

Em breve.

Feedback

Se você testar essa API, conte para nós o que achou. Direto feedback sobre o formato da API para repositório de especificações, e informar bugs de implementação ao Blink>Storage>CookiesAPI Componente Blink.

Estamos especialmente interessados em aprender sobre medidas de desempenho e usar casos além dos descritos na explicação.

Outros recursos