Clickjacking. El fallo invisible que secuestra tu UI

1. El Engaño Visual: ¿Qué es realmente el Clickjacking?

El Clickjacking (también conocido como UI Redress Attack) es una técnica maliciosa en la que un atacante utiliza múltiples capas transparentes u opacas para engañar a un usuario para que haga clic en un botón o enlace de otra página cuando pretendía hacer clic en la página del nivel superior.

Imagina que estás en una página web que promete “Ver fotos exclusivas”. El botón de “Ver Fotos” está ahí, brillante y tentador. Sin embargo, lo que no ves es que el atacante ha cargado, de forma invisible (con opacity: 0), la página de configuración de tu cuenta bancaria o de tu panel de administración de WordPress justo encima. Cuando haces clic en “Ver Fotos”, en realidad estás pulsando “Transferir Fondos” o “Eliminar Usuario”.

La Ilusión del Control

A diferencia del XSS, donde el atacante inyecta scripts, en el Clickjacking el atacante usa tu propio sitio legítimo contra el usuario. El navegador cree que el usuario está interactuando voluntariamente con tu sitio porque, técnicamente, el clic ocurre sobre tu elemento legítimo.

2. Los Dos Guardianes: XFO vs. CSP frame-ancestors

Para detener el clickjacking, debemos decirle al navegador: “No permitas que NADIE cargue mi página dentro de un iframe, a menos que yo lo autorice”. Tenemos dos herramientas principales para esto.

X-Frame-Options (El Guardián Clásico)

Introducido hace más de una década, el header X-Frame-Options (XFO) es simple. Solo tiene dos valores que realmente importan hoy:

• DENY: Prohíbe totalmente que la página sea embebida, incluso por el mismo sitio. Es la configuración de seguridad máxima por defecto.
• SAMEORIGIN: Solo las páginas del mismo dominio pueden cargar esta página en un iframe. Útil si tienes una aplicación compleja que usa iframes internos.

Content Security Policy: frame-ancestors (El Sucesor Granular)

XFO tenía un problema: no podías autorizar a un tercero específico (ej. un partner) sin abrir la puerta a todos. frame-ancestors soluciona esto permitiendo una lista blanca de dominios específicos.

IMPORTANTE: Si un navegador detecta ambos headers, frame-ancestors tiene prioridad absoluta segun el estándar CSP Nivel 2.

3. Impacto de Negocio: Más allá de lo Técnico

No implementar protección contra Clickjacking no es solo un descuido técnico. Es una vulnerabilidad de cumplimiento RGPD. La AEPD sanciona duramente la falta de control sobre la integridad de la interacción del usuario.

Si un atacante usa Clickjacking para que tus usuarios “acepten” nuevos términos de privacidad o den consentimiento para ceder sus datos a terceros, ese consentimiento es nulo de pleno derecho. Como empresa, eres responsable de asegurar que el entorno donde se presta el consentimiento es legítimo y no ha sido manipulado.

La Analogía del Contrato Invisible

Es como si un cliente viniera a firmar un contrato a tu oficina, pero tú pusieras un papel en blanco encima de otro contrato diferente mediante un juego de luces. El cliente cree que firma una cosa, pero su firma queda grabada en la otra. En el mundo digital, CSP y XFO son el cristal blindado que impide este truco.

4. Evolución de los Ataques: Cursorjacking y Drag-and-Drop

El ataque clásico de “clic invisible” es el más conocido, pero los atacantes han evolucionado:

1. Cursorjacking: El atacante oculta el cursor real del usuario (vía CSS cursor: none) y dibuja un cursor falso desplazado unos píxeles. El usuario cree que el cursor está sobre un elemento inofensivo, pero el clic real ocurre sobre un botón crítico.
2. Drag-and-Drop Clickjacking: Trata de engañar al usuario para que arrastre un elemento (que contiene información sensible como tokens de sesión o emails) hacia un campo controlado por el atacante. frame-ancestors bloquea este vector al impedir que la página origen sea cargada en un contexto malicioso.

5. Implementación en Frameworks Modernos

Next.js e Integración de Headers

En Next.js, la forma más limpia es usar el archivo next.config.js o un middleware.ts para inyectar estos headers de forma global.

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'Content-Security-Policy', value: "frame-ancestors 'none';" }
        ],
      },
    ]
  },
}

El Caso Especial: Sitios de Membresía y Dashboards

Si tu sitio ofrece un “Widget” que tus clientes deben embeber en sus propias webs (como un chat de soporte o un reproductor de video), NO PUEDES usar DENY. Aquí es donde brilla CSP:

Content-Security-Policy: frame-ancestors 'self' https://dominio-cliente.com;

6. Preguntas Frecuentes (FAQ) sobre Clickjacking