Clickjacking moderno com SVG para enganar usuários e burlar alertas

• Uma nova técnica de clickjacking usando filtros SVG foi apresentada, ampliando o antigo esquema de ataque de clique forçado simples para ataques interativos complexos
• feColorMatrix, feDisplacementMap e outros elementos de filtro SVG também podem ser aplicados em iframes cross-origin, o que torna possível manipulação visual e extração de dados
• Com combinações de filtros, fica viável a leitura de pixels, operações lógicas e manipulação de UI baseada em condições, permitindo clickjacking em múltiplas etapas ou ataques de indução de entrada
• Como prova real, um ataque usando uma vulnerabilidade no Google Docs foi bem-sucedido, e o pesquisador recebeu US$ 3.133,70 da recompensa do Google VRP
• Esta técnica revela uma nova superfície de ataque no modelo de segurança do navegador e demonstra como o uso lógico de filtros SVG pode se tornar uma ameaça de segurança

---

Visão geral do clickjacking com SVG

• O clickjacking tradicional é uma estrutura de ataque simples em que um iframe é sobreposto para induzir o usuário a clicar sem intenção
• O novo SVG clickjacking torna possível interação complexa e vazamento de dados por meio de filtros SVG
• Filtros como feColorMatrix e feDisplacementMap também podem ser aplicados em documentos cross-origin, o que permite manipulação visual de conteúdo externo

Componentes de filtro SVG

• Os principais elementos de filtro incluem <feImage> , <feFlood> , <feOffset> , <feDisplacementMap> , <feGaussianBlur> , <feTile> , <feMorphology> , <feBlend> , <feComposite> , <feColorMatrix>
• Eles combinam e transformam imagens de entrada para gerar novas imagens e podem ser conectados em cadeia
• Por meio dessas combinações, o atacante consegue implementar livremente efeitos visuais, mascaramento, manipulação de cores etc.

Exemplos de ataque

• Captcha falso: usa feDisplacementMap para distorcer texto e induzir o usuário a inserir um código sensível
• Ocultação de texto cinza (grey text hiding): remove instruções de campo ou mensagens de erro usando feComposite e feMorphology, induzindo o usuário a digitar a senha definida pelo atacante
• Leitura de pixel (pixel reading): detectar a cor de pixels específicos para controlar o funcionamento do filtro, o que permite ataques reativos com detecção de clique, hover e estado de entrada

Operações lógicas e ataques compostos

• Combinando feBlend e feComposite é possível implementar portas lógicas como AND, OR, XOR e NOT
• Isso permite montar um circuito lógico completo dentro de filtros SVG, viabilizando a automação de cenários de clickjacking em múltiplas etapas
• No ataque ao app ‘Securify’, por exemplo, foi implementada uma estrutura para enganar usuários com controle lógico de várias etapas, incluindo abertura de diálogo, clique em checkbox e clique em botão

Caso real: vulnerabilidade do Google Docs

• No Google Docs, após o clique no botão “Generate Document”, o popup e o campo de entrada que aparecem foram detectados e manipulados com lógica baseada em filtros SVG
• Estado de foco do campo, texto cinza, tela de carregamento etc. são detectados em tempo real para controlar o fluxo do ataque
• O ataque foi reportado à Google e recebeu US$ 3.133,70 de bug bounty

Aplicação em QR code

• É possível implementar lógica de geração de QR code dentro de filtros SVG, codificando dados de pixel em uma URL e exibindo-os em formato QR
• Quando o usuário escaneia o QR, os dados são enviados para um servidor controlado pelo atacante
• O feDisplacementMap e a correção de erros Reed–Solomon são usados para criar um QR code escaneável

Potencial de uso adicional

• Aplicações de ataque variadas são possíveis, como leitura de texto, exfiltração de dados baseada em cliques e inserção de cursor de mouse falso
• Ataques podem ser implementados apenas com CSS/SVG, sem JavaScript, o que também abre possibilidade de contornar o CSP

Contribuição científica

• O clickjacking baseado em operações lógicas com filtros SVG é uma nova técnica de ataque não tratada em pesquisas anteriores
• Pesquisas anteriores citavam SVG apenas como recurso de mascaramento visual; este estudo prova execução lógica e controle de interação
• O autor apresenta isso como uma nova classe de vulnerabilidade, reforçando a necessidade de rever o modelo de segurança do navegador

Conclusão

• Esta pesquisa é avaliada como o primeiro caso de ataque de segurança que usa filtros SVG como uma linguagem de programação
• O autor terá apresentação prevista no 39c3 no fim de 2025 e no Disobey 2026
• O post foi escrito com apenas 42kB de HTML/CSS/SVG, sem imagens ou JS, mostrando a criatividade da pesquisa de segurança experimental

[GN⁺]

Comentários do Hacker News

• Se os desenvolvedores configurarem corretamente o cabeçalho X-Frame-Options, esse problema é resolvido
  Mas, na prática, parece mais provável que a reação seja correr atrás de problemas de segurança e acabar removendo metade da especificação de SVG dos navegadores

  • Não está totalmente resolvido. Alguns aplicativos (por exemplo, Google Docs) precisam de framing
    Além disso, esse ataque também é possível em sites onde é viável fazer injeção de HTML, não apenas em frames
  • Há minas terrestres de segurança demais no SVG. Especialmente quando ele não é confiável, como no caso de SVG fornecido pelo usuário, o mais simples é simplesmente desativá-lo

• Eu já deixo SVG desativado por motivos de segurança
  Mas hoje em dia começo a pensar que talvez seja preciso desativar até o CSS
  Eu gostaria que o CSS tivesse permanecido como algo só para decorar texto, mas agora ele virou quase uma linguagem de programação, o que facilita o abuso por hackers ou anunciantes

  • Concordo com a ideia de que “seria bom se o CSS tivesse permanecido simples”, mas na verdade esse tipo de ataque era muito mais fácil de fazer no fim dos anos 2000
    Hoje é quase impossível
  • Em vez de quebrar o navegador para reforçar a segurança, eu acho melhor manter os dados sensíveis fora do navegador
  • O núcleo do problema não é o CSS, e sim o iFrame. Ele é a origem de vulnerabilidades de segurança desde os primeiros tempos do navegador
  • Fico curioso se existe algum outro motivo de segurança além deste demo. Na maioria das plataformas, esse ataque não funciona
  • Isso é uma reação exagerada. A chance de cair nesse tipo de ataque é muito baixa, e ele também não consegue romper sandbox nem cookies de sessão

• Fiquei completamente confuso ao ver o “exemplo que detecta se um pixel é preto puro para ligar ou desligar o filtro”
  Não faço ideia de por que HTML/CSS ficou tão complexo assim
  Há um <checkbox> oculto e um <label>; ao clicar, o checkbox alterna, e só com CSS o estilo muda de acordo com o estado
  O SVG na verdade não desenha nada; ele apenas define filtros
  Também é estranho usar dois <feTile> para separar a área de mosaico da área de saída
  E o que são elementos como <fake-frame> ou <art-frame>?

  • Eu acho essa estrutura bem legal. Dá para criar conteúdo interativo sem JavaScript
    Quando se clica em um <label>, o checkbox alterna porque esse é o comportamento padrão do HTML
    O estado é detectado com o seletor :has() do CSS
    <feTile> é um único elemento de filtro, usado para aplicar mosaico ou recortar a imagem de entrada
    <fake-frame> e <art-frame> são elementos customizados definidos pelo próprio autor
    Organizei o conteúdo relacionado neste post do blog
  • Na verdade, a maior parte dessas funcionalidades não é tanto “moderna”, e sim coisa que existe desde os anos 90
    O foco mudar ao clicar em <label> segue a tradição das interfaces de desktop
    Mudar o estilo com base no estado do checkbox já existia desde a época do Firefox 1
    Embutir filtros SVG diretamente em HTML também é uma funcionalidade antiga
    Ou seja, o problema não é o HTML novo, e sim a combinação de recursos antigos

• Esse demo me lembrou antigos hacks do Flash Player
  É parecido com aquele método que enganava o usuário para permitir armazenamento do sistema
  Gráficos vetoriais realmente parecem algo incapaz de se controlar sozinho

• O adder em SVG parece uma obra de arte. Muito legal

  • Foi um demo muito poderoso. Só hoje descobri que, para completude de Turing, não basta apenas completude funcional; também são necessários armazenamento e acesso aleatório
    Consultei este post no Stack Overflow sobre o assunto

• No meu Chrome do Android (mais exatamente no navegador Kiwi), a tela fica quebrada ou aparece estranha, talvez por causa do modo escuro
  Queria saber se mais alguém vê isso também

  • No Firefox, foi preciso desligar o Dark Reader para o exemplo aparecer corretamente
  • O exemplo relacionado a QR quebra quando o nível de zoom não está em 100%

• Este post me lembrou um demo antigo de cálculo em CSS que eu tinha visto antes

• Trabalho realmente impressionante. Não sei como corrigir isso, mas precisa de uma correção o quanto antes

• Post sensacional. Foi divertido do começo ao fim da leitura