O surgimento de ataques sofisticados como o clickjacking tornou a segurança uma questão primordial no mundo online de hoje. Ao enganar os consumidores para que cliquem em algo diferente do que veem inicialmente, os invasores implantam um método nefasto chamado “clickjacking”, que pode ter resultados desastrosos. Ataques desse tipo têm o potencial de induzir as pessoas a baixar malware, enviar informações privadas ou até mesmo fazer coisas que não pretendiam, como comprar qualquer coisa. Para proteger contra esses tipos de ataques, o JavaScript é um componente essencial de aplicações web dinâmicas.

Nesta postagem do blog, vamos nos aprofundar em como funcionam os ataques de clickjacking, por que eles são tão perigosos e como você pode implementar técnicas de defesa contra clickjacking em JavaScript. Forneceremos exemplos práticos de códigos e estratégias para ajudar a proteger seus aplicativos da web e evitar esses ataques maliciosos.

Compreendendo os ataques de clickjacking

Clickjacking é um tipo de ataque em que um site malicioso incorpora outro site, normalmente usando um HTML, e o sobrepõe com elementos invisíveis ou enganosos, efetivamente “sequestrando” os cliques do usuário. Quando o usuário interage com a página incorporada, ele acredita que está clicando em um botão ou link no site visível, mas na verdade está interagindo com o site incorporado oculto.

Aqui está um exemplo básico de como um invasor pode realizar um ataque de clickjacking:

    
    


    
Click the button to win a prize!
    Claim Prize
     

No código acima, a página do invasor aparece como uma página da web normal, mas um iframe invisível que carrega a página de destino é sobreposto a ela. Os usuários pensam que estão interagindo com a página maliciosa, mas na verdade estão clicando em elementos do iframe.

Por que o clickjacking é perigoso

Clickjacking pode levar a consequências graves, incluindo:

Compras não intencionais: os usuários podem clicar em botões "Comprar" ocultos, resultando em transações indesejadas.

Comprometimento da conta: os invasores podem enganar os usuários para que alterem suas configurações ou enviem dados confidenciais em sites em que confiam.

Download de malware: o clickjacking pode ser usado para iniciar downloads de arquivos maliciosos, infectando os dispositivos dos usuários.

Perda de controle sobre as redes sociais: alguns ataques envolvem enganar os usuários para que gostem ou compartilhem conteúdo em plataformas de redes sociais.

Esses ataques são particularmente perigosos porque os usuários normalmente não têm ideia de que foram comprometidos até que seja tarde demais.

Defesa contra clickjacking em JavaScript

Agora que entendemos como funciona o clickjacking, vamos explorar várias técnicas de defesa que você pode implementar em JavaScript.

1. Usando o cabeçalho X-Frame-Options

O cabeçalho HTTP X-Frame-Options é uma das maneiras mais simples e eficazes de evitar que suas páginas da web sejam incorporadas em iframes em outros sites. Este cabeçalho instrui o navegador se o site pode ser incorporado em um iframe.

Existem três opções principais para o cabeçalho X-Frame-Options:

DENY: Impede que a página seja exibida inteiramente em um iframe.

SAMEORIGIN: Permite que a página seja incorporada apenas se a solicitação for originada do mesmo domínio.

ALLOW-FROM: permite que a página seja incorporada apenas por um domínio específico e confiável.

Veja como você pode definir este cabeçalho usando JavaScript em Node.js:

const express = require('express');
const helmet = require('helmet');

const app = express();

// Use helmet to set X-Frame-Options header
app.use(helmet.frameguard({ action: 'deny' }));

app.get('/', (req, res) => {
    res.send('Clickjacking prevention with X-Frame-Options');
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

Neste exemplo, o middleware capacete.frameguard() garante que o cabeçalho X-Frame-Options seja definido como DENY para todas as respostas, evitando efetivamente o clickjacking ao proibir a incorporação de iframe.

1. Política de segurança de conteúdo (CSP)

Outro mecanismo de defesa eficaz é usar o cabeçalho Content-Security-Policy (CSP). O cabeçalho CSP fornece um controle mais refinado sobre como e onde seu conteúdo pode ser incorporado.

Para evitar clickjacking, você pode incluir a diretiva frame-ancestors em seu cabeçalho CSP. Esta diretiva permite que você especifique quais domínios têm permissão para incorporar seu site.

Exemplo de cabeçalho CSP:

Política de Segurança de Conteúdo: frame-ancestors 'self';

Esta política garante que apenas a mesma origem ('self') pode incorporar a página em um iframe, evitando efetivamente que outros sites o façam.

Veja como implementar CSP em um aplicativo Node.js:

const express = require('express');
const app = express();

app.use((req, res, next) => {
    res.setHeader("Content-Security-Policy", "frame-ancestors 'self'");
    next();
});

app.get('/', (req, res) => {
    res.send('CSP frame-ancestors directive in action!');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

1. Técnicas de eliminação de quadros JavaScript

Embora depender de cabeçalhos como X-Frame-Options e CSP seja geralmente mais confiável, você também pode implementar o bloqueio de quadros usando JavaScript. Os scripts de eliminação de quadros detectam quando sua página está sendo incorporada em um iframe e forçam-na a sair do iframe.

Aqui está um snippet JavaScript simples para detectar e impedir a incorporação de iframe:

if (window.top !== window.self) {
    // The page is embedded in an iframe, so redirect it
    window.top.location = window.self.location;
}

Este código verifica se a janela atual está sendo carregada dentro de um iframe (window.top !== window.self). Se for, ele redireciona o quadro pai (window.top) para o local atual do iframe (window.self), saindo efetivamente do iframe.

Esta é uma técnica básica e pode ser contornada por invasores avançados, portanto deve ser usada como um mecanismo de defesa secundário em conjunto com cabeçalhos como X-Frame-Options e CSP.

1. Verificação dupla de ações de clique com JavaScript

Outra técnica defensiva é adicionar caixas de diálogo de confirmação para ações críticas que podem ser exploradas em um ataque de clickjacking. Ao exigir que os usuários confirmem suas ações, você pode reduzir o risco de cliques não autorizados.

Aqui está um exemplo de adição de uma caixa de diálogo de confirmação a um evento de clique de botão:

Delete Account

Neste exemplo, quando o usuário clica no botão "Excluir conta", uma caixa de diálogo de confirmação é exibida. Se o usuário cancelar, a ação será impedida.

1. Implementação de atributos de sandbox para conteúdo incorporado

Ao incorporar conteúdo em seu próprio site, você pode usar o atributo sandbox em iframes para restringir a funcionalidade do conteúdo incorporado. Isso é útil ao incorporar conteúdo de terceiros não confiável, pois limita o que o conteúdo incorporado pode fazer.

Por exemplo:

O atributo sandbox aplica restrições ao iframe, como desabilitar formulários, scripts e impedir que o iframe navegue na página pai. Você pode permitir seletivamente determinadas funcionalidades adicionando valores como permitir scripts ou permitir a mesma origem.

Conclusão: Fortalecendo as defesas contra clickjacking

Clickjacking é um sério risco de segurança que os desenvolvedores da web devem enfrentar para proteger usuários e dados. Ao implementar técnicas de defesa, como definir os cabeçalhos X-Frame-Options e Content-Security-Policy, usar técnicas de bloqueio de quadros JavaScript e adicionar caixas de diálogo de confirmação do usuário para ações críticas, você pode reduzir significativamente o risco de ataques de clickjacking em seus aplicativos da web.

É essencial colocar em camadas esses mecanismos de defesa para garantir uma proteção abrangente, já que nenhum método é infalível por si só. Ao combinar várias estratégias, você pode tornar seus aplicativos da web mais resistentes a clickjacking e outras formas de ataques.

Links de referência:

OWASP: Folha de dicas de defesa contra clickjacking

MDN Web Docs: Política de segurança de conteúdo (CSP)

Fundamentos da Web do Google: evite o clickjacking

Ao manter-se informado e vigilante, você pode proteger seus usuários e seus dados dos perigos do clickjacking, garantindo uma experiência de navegação mais segura.