El clickjacking, también conocido como reparación de UI, es un tipo de ataque en el que actores maliciosos engañan a los usuarios para que hagan clic en algo diferente de lo que perciben al insertar páginas web dentro de iframes. Esto puede dar lugar a acciones no autorizadas y comprometer la seguridad del usuario. En este blog, exploraremos cómo prevenir ataques de clickjacking usando JavaScript y configuraciones de servidor para Apache y Nginx, junto con ejemplos fáciles de usar.

Entendiendo el clickjacking

El clickjacking implica colocar un iframe transparente u opaco sobre un elemento legítimo de una página web, lo que hace que los usuarios realicen acciones sin saberlo, como cambiar la configuración o transferir fondos.

Ejemplo del mundo real

Considere un escenario en el que un atacante incorpora un iframe oculto de un sitio bancario en una página web confiable. Cuando un usuario hace clic en un botón aparentemente inofensivo, es posible que en realidad esté autorizando una transacción bancaria.

Aquí hay un ejemplo de una página vulnerable:

    
    
    


    
Welcome to Our Site
    Click Me
    

Prevenir el clickjacking con JavaScript

Para evitar ataques de clickjacking, puede utilizar JavaScript para asegurarse de que su sitio web no esté enmarcado. Aquí hay una guía paso a paso sobre cómo implementar esta protección:

1. Eliminación de marcos de JavaScript
La destrucción de marcos implica el uso de JavaScript para detectar si su sitio web está cargado dentro de un iframe y salir de él.

Ejemplo:

    
    
    
    


    
Secure Site
    
This site is protected from clickjacking attacks.

En este ejemplo, JavaScript comprueba si la ventana actual (window.self) no es la ventana superior (window.top). Si no es así, redirige la ventana superior a la URL de la ventana actual, rompiendo efectivamente el iframe.

2. Eliminación de fotogramas mejorada con detectores de eventos
Puedes mejorar aún más tu técnica de eliminación de marcos utilizando detectores de eventos para verificar continuamente si tu página está enmarcada.

Ejemplo:

    
    
    
    


    
Secure Site
    
This site is protected from clickjacking attacks.

En este ejemplo, la función preventClickjacking se llama en los eventos DOMContentLoaded, carga y cambia el tamaño para garantizar una protección continua.

Protección del lado del servidor

Si bien los métodos JavaScript son útiles, la implementación de protecciones del lado del servidor proporciona una capa adicional de seguridad. A continuación se explica cómo configurar encabezados HTTP en Apache y Nginx para evitar el secuestro de clics:

1. Encabezado de opciones de X-Frame
El encabezado X-Frame-Options le permite especificar si su sitio se puede incrustar en iframes. Hay tres opciones:

DENEGAR: evita que cualquier dominio inserte su página.
SAMEORIGIN: Permite incrustar solo desde el mismo origen.
ALLOW-FROM uri: permite incrustar desde el URI especificado.
Ejemplo:

X-Frame-Options: DENY

Configuración de Apache
Agregue este encabezado a la configuración de su servidor:

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

Configuración de Nginx
Agregue este encabezado a la configuración de su servidor:

2. Antepasados ​​del marco de política de seguridad de contenido (CSP)
CSP proporciona un enfoque más flexible a través de la directiva frame-ancestros, que especifica padres válidos que pueden incrustar la página mediante iframes.

Ejemplo:

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

Configuración de Apache
Agregue este encabezado a la configuración de su servidor:

Ejemplo:

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

Configuración de Nginx
Agregue este encabezado a la configuración de su servidor:

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

Conclusión

El clickjacking es una amenaza grave para la seguridad web, pero al implementar técnicas de destrucción de marcos de JavaScript y protecciones del lado del servidor como X-Frame-Options y encabezados Content-Security-Policy, puede proteger eficazmente sus aplicaciones web. Utilice los ejemplos proporcionados para mejorar la seguridad de su sitio y brindar una experiencia más segura a sus usuarios.