La aparición de ataques sofisticados como el clickjacking ha convertido la seguridad en un problema primordial en el mundo online actual. Al engañar a los consumidores para que hagan clic en algo que difiere de lo que ven inicialmente, los atacantes implementan un método nefasto llamado "clickjacking", que puede tener resultados desastrosos. Los ataques de este tipo tienen el potencial de engañar a las personas para que descarguen malware, envíen información privada o incluso hagan cosas que no eran sus intenciones, como comprar cualquier cosa. Para protegerse contra este tipo de ataques, JavaScript es un componente esencial de las aplicaciones web dinámicas.

En esta publicación de blog, profundizaremos en cómo funcionan los ataques de clickjacking, por qué son tan peligrosos y cómo se pueden implementar técnicas de defensa contra el clickjacking en JavaScript. Proporcionaremos ejemplos de código prácticos y estrategias para ayudar a proteger sus aplicaciones web y prevenir estos ataques maliciosos.

Comprensión de los ataques de clickjacking

El clickjacking es un tipo de ataque en el que un sitio web malicioso inserta otro sitio web, generalmente mediante el uso de HTML, y lo superpone con elementos invisibles o engañosos, "secuestrando" efectivamente los clics del usuario. Cuando el usuario interactúa con la página incrustada, cree que está haciendo clic en un botón o en un enlace en el sitio visible, pero en realidad está interactuando con el sitio incrustado oculto.

A continuación se muestra un ejemplo básico de cómo un atacante podría realizar un ataque de clickjacking:

    
Click the button to win a prize!
    Claim Prize
     

En el código anterior, la página del atacante aparece como una página web normal, pero encima de ella se superpone un iframe invisible que carga la página de destino. Los usuarios creen que están interactuando con la página maliciosa, pero en realidad están haciendo clic en elementos dentro del iframe.

Por qué el clickjacking es peligroso

El clickjacking puede tener consecuencias graves, entre ellas:

Compras no intencionales: los usuarios pueden hacer clic en botones ocultos "Comprar", lo que genera transacciones no deseadas.

Cuenta comprometida: los atacantes pueden engañar a los usuarios para que cambien su configuración o envíen datos confidenciales en sitios web en los que confían.

Descarga de malware: Clickjacking se puede utilizar para iniciar descargas de archivos maliciosos, infectando los dispositivos de los usuarios.

Pérdida de control sobre las redes sociales: algunos ataques implican engañar a los usuarios para que les guste o compartan contenido en plataformas de redes sociales.

Estos ataques son particularmente peligrosos porque los usuarios normalmente no tienen idea de que han sido comprometidos hasta que es demasiado tarde.

Defensa contra el clickjacking en JavaScript

Ahora que entendemos cómo funciona el clickjacking, exploremos varias técnicas de defensa que puedes implementar en JavaScript.

1. Usando el encabezado de opciones de X-Frame

El encabezado HTTP X-Frame-Options es una de las formas más simples y efectivas de evitar que sus páginas web se incrusten en iframes de otros sitios web. Este encabezado indica al navegador si el sitio se puede incrustar dentro de un iframe.

Hay tres opciones principales para el encabezado X-Frame-Options:

DENEGAR: evita que la página se muestre en un iframe por completo.

SAMEORIGIN: Permite incrustar la página solo si la solicitud se origina en el mismo dominio.

ALLOW-FROM: permite que la página sea incrustada solo por un dominio específico y confiable.

Así es como puedes configurar este encabezado usando JavaScript en 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');
});

En este ejemplo, el middleware casco.frameguard() garantiza que el encabezado X-Frame-Options esté configurado en DENEGAR para todas las respuestas, lo que previene eficazmente el clickjacking al no permitir la incrustación de iframe.

1. Política de seguridad de contenido (CSP)

Otro mecanismo de defensa eficaz es utilizar el encabezado Content-Security-Policy (CSP). El encabezado CSP proporciona un control más detallado sobre cómo y dónde se puede incrustar su contenido.

Para evitar el secuestro de clics, puede incluir la directiva frame-ancestros en el encabezado de su CSP. Esta directiva le permite especificar qué dominios pueden insertar su sitio.

Ejemplo de encabezado CSP:

Política-de-seguridad-de-contenido: frame-ancestros 'self';

Esta política garantiza que solo el mismo origen ("yo") pueda incrustar la página en un iframe, evitando de manera efectiva que otros sitios web lo hagan.

A continuación se explica cómo implementar CSP en una aplicación 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 destrucción de marcos de JavaScript

Aunque confiar en encabezados como X-Frame-Options y CSP es generalmente más confiable, también puedes implementar la destrucción de cuadros usando JavaScript. Los scripts de eliminación de marcos detectan cuando su página está incrustada en un iframe y la obligan a salir del iframe.

Aquí hay un fragmento de JavaScript simple para detectar y evitar la incrustación 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 si la ventana actual se está cargando dentro de un iframe (window.top!== window.self). Si es así, redirige el marco principal (window.top) a la ubicación actual del iframe (window.self), rompiendo efectivamente el iframe.

Esta es una técnica básica y los atacantes avanzados pueden eludirla, por lo que debe usarse como mecanismo de defensa secundario junto con encabezados como X-Frame-Options y CSP.

1. Acciones de clic de doble verificación con JavaScript

Otra técnica defensiva es agregar cuadros de diálogo de confirmación para acciones críticas que podrían explotarse en un ataque de clickjacking. Al solicitar a los usuarios que confirmen sus acciones, puede reducir el riesgo de clics no autorizados.

A continuación se muestra un ejemplo de cómo agregar un cuadro de diálogo de confirmación a un evento de clic en un botón:

Delete Account

En este ejemplo, cuando el usuario hace clic en el botón "Eliminar cuenta", aparece un cuadro de diálogo de confirmación. Si el usuario cancela, se impide la acción.

1. Implementación de atributos de Sandbox para contenido incrustado

Al incrustar contenido en su propio sitio, puede utilizar el atributo sandbox en iframes para restringir la funcionalidad del contenido incrustado. Esto resulta útil al incrustar contenido de terceros que no es de confianza, ya que limita lo que puede hacer el contenido incrustado.

Por ejemplo:

El atributo sandbox aplica restricciones en el iframe, como deshabilitar formularios, secuencias de comandos y evitar que el iframe navegue por la página principal. Puede permitir selectivamente ciertas funcionalidades agregando valores como enable-scripts o enable-same-origin.

Conclusión: Fortalecimiento de las defensas contra el clickjacking

El clickjacking es un riesgo de seguridad grave que los desarrolladores web deben abordar para proteger a los usuarios y los datos. Al implementar técnicas de defensa, como configurar los encabezados X-Frame-Options y Content-Security-Policy, utilizar técnicas de destrucción de marcos de JavaScript y agregar cuadros de diálogo de confirmación del usuario para acciones críticas, puede reducir significativamente el riesgo de ataques de clickjacking en sus aplicaciones web.

Es esencial superponer estos mecanismos de defensa para garantizar una protección integral, ya que ningún método es infalible por sí solo. Al combinar múltiples estrategias, puede hacer que sus aplicaciones web sean más resistentes al clickjacking y otras formas de ataques.

Enlaces de referencia:

OWASP: Hoja de trucos para la defensa contra el clickjacking

MDN Web Docs: Política de seguridad de contenido (CSP)

Fundamentos web de Google: evitar el clickjacking

Al mantenerse informado y atento, puede proteger a sus usuarios y sus datos de los peligros del clickjacking, garantizando una experiencia de navegación más segura.