Clickjacking, também conhecido como correção de IU, é um tipo de ataque em que atores mal-intencionados enganam os usuários para que cliquem em algo diferente do que eles percebem, incorporando páginas da web em iframes. Isso pode levar a ações não autorizadas e comprometer a segurança do usuário. Neste blog, exploraremos como evitar ataques de clickjacking usando JavaScript e configurações de servidor para Apache e Nginx, juntamente com exemplos fáceis de usar.

Compreendendo o clickjacking

Clickjacking envolve colocar um iframe transparente ou opaco sobre um elemento legítimo de uma página da Web, fazendo com que os usuários executem ações inadvertidamente, como alterar configurações ou transferir fundos.

Exemplo do mundo real

Considere um cenário em que um invasor incorpora um iframe oculto de um site bancário em uma página da web confiável. Quando um usuário clica em um botão aparentemente inofensivo, ele pode, na verdade, estar autorizando uma transação bancária.

Aqui está um exemplo de página vulnerável:

    
    
    


    
Welcome to Our Site
    Click Me
    

Prevenindo Clickjacking com JavaScript

Para evitar ataques de clickjacking, você pode usar JavaScript para garantir que seu site não esteja sendo enquadrado. Aqui está um guia passo a passo sobre como implementar essa proteção:

1. Quebra de quadro JavaScript
O bloqueio de quadros envolve o uso de JavaScript para detectar se o seu site está carregado dentro de um iframe e sair dele.

Exemplo:

    
    
    
    


    
Secure Site
    
This site is protected from clickjacking attacks.

Neste exemplo, o JavaScript verifica se a janela atual (window.self) não é a janela superior (window.top). Caso contrário, ele redireciona a janela superior para o URL da janela atual, saindo efetivamente do iframe.

2. Eliminação de quadros aprimorada com ouvintes de eventos
Você pode aprimorar ainda mais sua técnica de eliminação de quadros usando ouvintes de eventos para verificar continuamente se sua página está emoldurada.

Exemplo:

    
    
    
    


    
Secure Site
    
This site is protected from clickjacking attacks.

Neste exemplo, a função preventClickjacking é chamada nos eventos DOMContentLoaded, carrega e redimensiona para garantir proteção contínua.

Proteção do lado do servidor

Embora os métodos JavaScript sejam úteis, a implementação de proteções no lado do servidor fornece uma camada adicional de segurança. Veja como configurar cabeçalhos HTTP no Apache e Nginx para evitar clickjacking:

1. Cabeçalho de opções de quadro X
O cabeçalho X-Frame-Options permite especificar se o seu site pode ser incorporado em iframes. Existem três opções:

NEGAR: Impede que qualquer domínio incorpore sua página.
SAMEORIGIN: Permite incorporar apenas da mesma origem.
ALLOW-FROM uri: Permite a incorporação do URI especificado.
Exemplo:

X-Frame-Options: DENY

Configuração do Apache
Adicione este cabeçalho à configuração do seu servidor:

# Apache
Header always set X-Frame-Options "DENY"

Configuração Nginx
Adicione este cabeçalho à configuração do seu servidor:

2. Ancestrais do quadro da Política de Segurança de Conteúdo (CSP)
O CSP fornece uma abordagem mais flexível por meio da diretiva frame-ancestors, que especifica pais válidos que podem incorporar a página usando iframes.

Exemplo:

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

Configuração do Apache
Adicione este cabeçalho à configuração do seu servidor:

Exemplo:

# Apache
Header always set Content-Security-Policy "frame-ancestors 'self'"

Configuração Nginx
Adicione este cabeçalho à configuração do seu servidor:

# Nginx
add_header Content-Security-Policy "frame-ancestors 'self'";

Conclusão

Clickjacking é uma séria ameaça à segurança da web, mas ao implementar técnicas de bloqueio de quadros JavaScript e proteções do lado do servidor, como X-Frame-Options e cabeçalhos Content-Security-Policy, você pode proteger efetivamente seus aplicativos da web. Use os exemplos fornecidos para aumentar a segurança do seu site e fornecer uma experiência mais segura aos usuários.