O que são Client Rects?
Client Rects são um conjunto de APIs fornecidas pelo navegador para obter informações de layout dos elementos de uma página web, incluindo a posição exata e as dimensões dos elementos na página. Essas informações são retornadas na forma de “retângulos” (rects), contendo dados detalhados como topo, parte inferior, lado esquerdo, lado direito, largura e altura do elemento.
Como os Client Rects se tornam uma impressão digital?
A razão principal pela qual os Client Rects podem se tornar uma técnica de rastreamento por impressão digital do navegador é a seguinte: mesmo que dois dispositivos abram exatamente a mesma página web, devido a diferenças em fatores como configuração de hardware, sistema operacional, tipo e versão do navegador, resolução da tela e configurações de fonte, as informações de layout dos elementos renderizados no final podem ser diferentes.
Por exemplo: o mesmo trecho de texto ou o mesmo botão pode aparecer um pouco maior em um dispositivo, enquanto em outro pode ter uma posição ligeiramente deslocada. Essas diferenças sutis são difíceis de perceber a olho nu, mas podem ser capturadas com precisão por meio da API Client Rects.
Processo de geração da impressão digital por Client Rects
Quando um site obtém uma impressão digital do navegador por meio de Client Rects, normalmente inclui as seguintes etapas:
Primeira etapa: selecionar ou gerar o elemento-alvo
Primeiro, o site precisa selecionar um elemento para coletar informações de layout, que pode ser uma caixa de texto, um botão ou qualquer elemento já existente na página. Para melhorar a estabilidade e a singularidade da impressão digital, o site também pode gerar dinamicamente um elemento oculto especificamente para a coleta da impressão digital.
Segunda etapa: obter os Client Rects do elemento
Por meio de JavaScript, chama-se o método getClientRects() do elemento para obter suas informações de layout. Os dados retornados incluem informações de posição e dimensões do elemento——topo (top), parte inferior (bottom), lado esquerdo (left), lado direito (right), largura (width) e altura (height), entre outras.
Terceira etapa: registrar ou processar os dados
O site registrará esses dados brutos ou fará um processamento adicional. Por exemplo, calculará a área do elemento (largura × altura), calculará a relação de posição relativa entre o elemento e outros elementos, etc.
Quarta etapa: gerar a impressão digital do navegador
Por fim, o site combina essas informações de layout com outros dados (como endereço IP, string de agente do usuário, etc.) e, por meio de um algoritmo específico, gera uma impressão digital única do navegador, usada para identificar e rastrear usuários.
É importante observar que este é apenas um exemplo simplificado. Na prática, os sites podem coletar dados de Client Rects de vários elementos e realizar estatísticas e análises mais complexas para aumentar a singularidade e a estabilidade da impressão digital.
Os Client Rects podem ser entendidos como uma “régua” do site——ela mede com precisão como o seu navegador renderiza e organiza os elementos da página, e esses resultados de medição apresentam diferenças pequenas, mas identificáveis, entre diferentes dispositivos.