Como melhorar a privacidade do usuário e a experiência do desenvolvedor com as dicas de cliente HTTP do user agent

As dicas de cliente HTTP do user agent são uma nova expansão da API Client Hints. Com elas, os desenvolvedores podem acessar informações sobre o navegador de um usuário de maneira ergonômica e que preserva a privacidade.

Rowan Merewood

Yoav Weiss

As dicas de cliente permitem que os desenvolvedores solicitem ativamente informações sobre a dispositivo ou condições, em vez de precisar analisá-lo fora do user agent (UA) fio. Fornecer essa rota alternativa é a primeira etapa para reduzindo a granularidade da string do user agent.

Saiba como atualizar os recursos que dependem da análise do String do user agent para usar as dicas de cliente HTTP do user agent.

Atenção:se você já usa as dicas de cliente HTTP do user agent, saiba que, desde o Chrome 90, o formato do cabeçalho foi alterado, portanto, os tokens Accept-CH devem corresponder exatamente ao cabeçalhos retornados.

Contexto

Quando os navegadores da Web fazem solicitações, eles incluem informações sobre o navegador e seu ambiente para que os servidores possam permitir análises e personalizar a resposta. Ela foi definida desde 1996 (RFC 1945 para HTTP/1.0), em que é possível encontre a definição original da string do user agent, que inclui uma exemplo:

User-Agent: CERN-LineMode/2.15 libwww/2.17b3

Esse cabeçalho serve para especificar, em ordem de importância, o produto (por exemplo, navegador ou biblioteca) e um comentário (por exemplo, versão).

O estado da string do user agent

Ao longo das décadas, essa string acumulou vários outros detalhes sobre o cliente que fez a solicitação (assim como erros, devido ao compatibilidade). Ao analisar o user agent atual do Chrome, string:

Mozilla/5.0 (Linux; Android 10; Pixel 3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4076.0 Mobile Safari/537.36

A string acima contém informações sobre o sistema operacional do usuário e versão, o modelo do dispositivo, a marca do navegador e a versão completa, pistas suficientes para deduzir que se trata de um navegador de celular, sem mencionar várias referências a outros navegadores padrão por motivos históricos.

A combinação desses parâmetros com a grande diversidade de valores possíveis significa que a string do user agent pode conter informações suficientes para permitir que usuários e usuários sejam identificados de maneira exclusiva.

Essa string permite muitos casos de uso legítimos, e tem um propósito importante para desenvolvedores e proprietários de sites. No entanto, também é fundamental que os usuários a privacidade é protegida contra métodos ocultos de rastreamento, e enviar informações do UA por padrão vai contra essa meta.

Também é necessário melhorar a compatibilidade com a Web no que se refere ao user agent fio. Ele é desestruturado, então analisá-lo resulta em complexidade desnecessária, que geralmente é a causa de bugs e problemas de compatibilidade de sites que prejudicam os usuários. Esses problemas também prejudicam desproporcionalmente os usuários de navegadores menos comuns, já que podem não ter sido testados em relação à configuração.

Apresentação das novas dicas de cliente HTTP do user agent

Dicas de cliente HTTP do user agent acesso às mesmas informações, mas de uma maneira que preserva a privacidade, em permitir que os navegadores reduzam o padrão da string do user agent e transmitindo tudo. As dicas do cliente aplicam uma em que o servidor precisa solicitar ao navegador um conjunto de dados sobre o cliente (as dicas) e o navegador aplica suas próprias políticas ou configuração de usuário ao determinar quais dados são retornados. Isso significa que, em vez de expor todos as informações do user agent por padrão, o acesso agora é gerenciado de forma explícita auditável. Os desenvolvedores também se beneficiam de uma API mais simples. expressões

O conjunto atual de dicas do cliente descreve principalmente a exibição e o e recursos de conexão. Confira os detalhes em Como automatizar a seleção de recursos com dicas de cliente. mas aqui está uma atualização rápida do processo.

O servidor solicita dicas de cliente específicas por meio de um cabeçalho:

⬇️ Resposta do servidor

Accept-CH: Viewport-Width, Width

Ou uma metatag:

<meta http-equiv="Accept-CH" content="Viewport-Width, Width" />

O navegador pode optar por enviar os seguintes cabeçalhos de volta em solicitações:

⬆️ Solicitação posterior

Viewport-Width: 460
Width: 230

O servidor pode optar por variar suas respostas, por exemplo, exibindo imagens em uma com a resolução adequada.

Observação:há discussões em andamento sobre a ativação das dicas do cliente em uma solicitação inicial. mas considere usar o design responsivo ou aprimoramento progressivo antes de seguir esse caminho.

As dicas de cliente HTTP do user agent aumentam o número de propriedades com o Sec-CH-UA que pode ser especificado pelo cabeçalho de resposta do servidor Accept-CH. Para todos os detalhes, comece com a explicação e Depois, analise a proposta completa.

Observação:as dicas de cliente são enviadas apenas por conexões seguras. Verifique se você migrou seu site para HTTPS.

Dicas de cliente HTTP do user agent do Chromium 89

As dicas de cliente HTTP do user agent são ativadas por padrão no Chrome desde a versão 89.

Por padrão, o navegador retorna a marca do navegador, versão significativa / principal, plataforma e um indicador se o cliente for um aparelho celular:

⬆️ Todos os pedidos

Sec-CH-UA: "Chromium";v="93", "Google Chrome";v="93", " Not;A Brand";v="99"
Sec-CH-UA-Mobile: ?0
Sec-CH-UA-Platform: "macOS"

Atenção: essas propriedades são mais complexas do que apenas um único valor, por isso estruturados Cabeçalhos são usados para representar listas e booleanos.

Cabeçalhos de solicitação e resposta do user agent

⬇️ Resposta Accept-CH ⬆️ Cabeçalho da solicitação	⬆️ Valor de solicitação	Descrição
Sec-CH-UA	"Chromium";v="84", "Google Chrome";v="84"	Lista de marcas de navegadores e as versões relevantes delas.
Sec-CH-UA-Mobile	?1	Booleano que indica se o navegador está em um dispositivo móvel (?1 para verdadeiro) ou não (?0 para falso).
Sec-CH-UA-Full-Version	"84.0.4143.2"	[Descontinuado]A versão completa do navegador.
Sec-CH-UA-Full-Version-List	"Chromium";v="84.0.4143.2", "Google Chrome";v="84.0.4143.2"	Lista de marcas de navegador e a versão completa delas.
Sec-CH-UA-Platform	"Android"	A plataforma do dispositivo, geralmente o sistema operacional (SO).
Sec-CH-UA-Platform-Version	"10"	A versão da plataforma ou do SO.
Sec-CH-UA-Arch	"arm"	A arquitetura subjacente do dispositivo. Embora isso possa não ser relevante para a exibição da página, o site pode oferecer um download com o formato correto por padrão.
Sec-CH-UA-Model	"Pixel 3"	O modelo do dispositivo.
Sec-CH-UA-Bitness	"64"	A quantidade de bits da arquitetura subjacente (ou seja, o tamanho em bits de um número inteiro ou endereço de memória)

Importante:as considerações de privacidade e compatibilidade significam que o valor pode estar em branco, retornados, ou preenchidos com um valor variável. Isso é chamado de GREASE.

Exemplo de troca

Confira um exemplo de troca:

⬆️ Solicitação inicial do navegador
O navegador está solicitando a /downloads do site e envia o user agent básico padrão.

GET /downloads HTTP/1.1
Host: example.site

Sec-CH-UA: "Chromium";v="93", "Google Chrome";v="93", " Not;A Brand";v="99"
Sec-CH-UA-Mobile: ?1
Sec-CH-UA-Platform: "Android"

⬇️ Resposta do servidor
O servidor envia a página de volta e pede a versão completa do navegador e a plataforma.

HTTP/1.1 200 OK
Accept-CH: Sec-CH-UA-Full-Version-List

⬆️ Solicitações subsequentes
O navegador concede ao servidor acesso à informações adicionais e envia as dicas extras de volta em todas as solicitações.

GET /downloads/app1 HTTP/1.1
Host: example.site

Sec-CH-UA: " Not A;Brand";v="99", "Chromium";v="98", "Google Chrome";v="98"
Sec-CH-UA-Mobile: ?1
Sec-CH-UA-Full-Version-List: " Not A;Brand";v="99.0.0.0", "Chromium";v="98.0.4738.0", "Google Chrome";v="98.0.4738.0"
Sec-CH-UA-Platform: "Android"

JavaScript API

Além dos cabeçalhos, o user agent também pode ser acessado em JavaScript via navigator.userAgentData: Os valores padrão Sec-CH-UA, Sec-CH-UA-Mobile e As informações do cabeçalho Sec-CH-UA-Platform podem ser acessadas pelas APIs brands e mobile, respectivamente:

// Log the brand data
console.log(navigator.userAgentData.brands);

// output
[
  {
    brand: 'Chromium',
    version: '93',
  },
  {
    brand: 'Google Chrome',
    version: '93',
  },
  {
    brand: ' Not;A Brand',
    version: '99',
  },
];

// Log the mobile indicator
console.log(navigator.userAgentData.mobile);

// output
false;

// Log the platform value
console.log(navigator.userAgentData.platform);

// output
"macOS";

Os outros valores são acessados pela chamada getHighEntropyValues(). A "alta entropia" termo é uma referência à entropia da informação, em outros palavras: a quantidade de informações que esses valores revelam sobre a navegador. Assim como a solicitação de cabeçalhos adicionais, a tarefa é depende do navegador quais valores, se houver, serão retornados.

// Log the full user-agent data
navigator
  .userAgentData.getHighEntropyValues(
    ["architecture", "model", "bitness", "platformVersion",
     "fullVersionList"])
  .then(ua => { console.log(ua) });

// output
{
   "architecture":"x86",
   "bitness":"64",
   "brands":[
      {
         "brand":" Not A;Brand",
         "version":"99"
      },
      {
         "brand":"Chromium",
         "version":"98"
      },
      {
         "brand":"Google Chrome",
         "version":"98"
      }
   ],
   "fullVersionList":[
      {
         "brand":" Not A;Brand",
         "version":"99.0.0.0"
      },
      {
         "brand":"Chromium",
         "version":"98.0.4738.0"
      },
      {
         "brand":"Google Chrome",
         "version":"98.0.4738.0"
      }
   ],
   "mobile":false,
   "model":"",
   "platformVersion":"12.0.1"
}

Demonstração

Teste os cabeçalhos e a API JavaScript no seu dispositivo em user-agent-client-hints.glitch.me.

Observação:verifique se você está usando o Chrome 89 ou uma versão mais recente.

Vida útil e redefinição da dica

As dicas especificadas pelo cabeçalho Accept-CH serão enviadas durante o sessão do navegador ou até que um conjunto diferente de dicas seja especificado.

Isso significa que, se o servidor enviar:

⬇️ Resposta

Accept-CH: Sec-CH-UA-Full-Version-List

Depois, o navegador enviará o cabeçalho Sec-CH-UA-Full-Version-List em todas as solicitações. para esse site até que o navegador seja fechado.

⬆️ Pedidos subsequentes

Sec-CH-UA-Full-Version-List: " Not A;Brand";v="99.0.0.0", "Chromium";v="98.0.4738.0", "Google Chrome";v="98.0.4738.0"

No entanto, se outro cabeçalho Accept-CH for recebido, ele será completamente substituir as dicas atuais que o navegador está enviando.

⬇️ Resposta

Accept-CH: Sec-CH-UA-Bitness

⬆️ Pedidos subsequentes

Sec-CH-UA-Platform: "64"

O Sec-CH-UA-Full-Version-List solicitado anteriormente não será enviado.

É melhor pensar no cabeçalho Accept-CH como a especificação do conjunto completo de dicas desejadas para a página, ou seja, o navegador envia as dicas especificadas de todos os sub-recursos dessa página. As dicas vão persistir para a próxima navegação, o site não deve confiar nem presumir que serão entregues.

Sucesso:sempre garanta que você ainda possa proporcionar uma experiência significativa sem isso. informações imprecisas ou inadequadas. Isso serve para melhorar a experiência do usuário, não defini-la. É por isso que são chamadas de "dicas", e não "respostas" ou "requisitos".

Você também pode usar essa opção para limpar todas as dicas enviadas pelo navegador envie um Accept-CH em branco na resposta. Considere adicionar em qualquer lugar que o usuário está redefinindo as preferências ou saindo do site.

Esse padrão também corresponde a como as dicas funcionam por meio do <meta http-equiv="Accept-CH" …>. As dicas solicitadas só serão enviadas em solicitações iniciadas pela página e não em qualquer navegação subsequente.

Escopo de dica e solicitações de origem cruzada

Por padrão, as dicas de cliente serão enviadas somente em solicitações de mesma origem. Isso significa se você pedir dicas específicas sobre https://example.com, mas os recursos que você querem otimizar estão em https://downloads.example.com, mas não receber dicas.

Para permitir dicas em solicitações de origem cruzada, cada dica e origem precisam ser especificadas por um cabeçalho Permissions-Policy. Para aplicar isso a uma dica de cliente HTTP do user agent, É preciso colocar a dica em letras minúsculas e remover o prefixo sec-. Exemplo:

⬇️ Resposta de example.com

Accept-CH: Sec-CH-UA-Platform-Version, DPR
Permissions-Policy: ch-ua-platform-version=(self "downloads.example.com"),
                    ch-dpr=(self "cdn.provider" "img.example.com");

⬆️ Solicitação para downloads.example.com

Sec-CH-UA-Platform-Version: "10"

⬆️ Pedidos para cdn.provider ou img.example.com

DPR: 2

Onde usar as dicas de cliente HTTP do user agent?

A resposta rápida é refatorar todas as instâncias em que o cabeçalho User-Agent ou fazer uso de qualquer uma das chamadas JavaScript que acessar as mesmas informações (por exemplo, navigator.userAgent, navigator.appVersion, ou navigator.platform) para usar as dicas de cliente HTTP do user agent.

Indo mais além, você deve reexaminar o uso do user agent e substituí-las por outros métodos sempre que possível. Muitas vezes, é possível alcançar o mesmo objetivo usando o aprimoramento progressivo, recursos detecção ou design responsivo. O problema básico de confiar nos dados do user agent é que sempre estamos e manter um mapeamento entre a propriedade inspecionada e o comportamento do Google Cloud. É uma sobrecarga de manutenção para garantir que a detecção seja abrangentes e atualizadas.

Com essas advertências em mente, o repositório de dicas de cliente HTTP do user agent lista alguns casos de uso válidos para sites.

O que acontece com a string do user agent?

O plano é minimizar a capacidade de rastreamento oculto na Web, reduzindo a quantidade de informações de identificação expostas pela string do user agent sem causar interrupções indevidas nos sites atuais. Introdução ao user agent Com as dicas do cliente agora você tem a chance de entender e experimentar o novo antes que qualquer alteração seja feita nas strings do user agent.

Eventualmente, as informações na string do user agent são reduzidas para manter o em um formato legado e, ao mesmo tempo, fornecer apenas o mesmo navegador de alto nível informações de versão de acordo com as dicas padrão. No Chromium, essa alteração foi adiados até pelo menos 2022 para dar mais tempo ao ecossistema avaliar os novos recursos de dicas de cliente HTTP do user agent.

É possível testar uma versão desse recurso ativando a Sinalização about://flags/#reduce-user-agent do Chrome 93. Observação: esta sinalização foi chamada about://flags/#freeze-user-agent nas versões 84 a 92 do Chrome). Isso vai retornar uma string com as entradas históricas por motivos de compatibilidade, mas com esclarecedoras. Por exemplo, algo como:

Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.0.0 Mobile Safari/537.36

Miniatura de Sergey Zolkin ativado Exibir