El clickjacking sigue siendo una amenaza silenciosa en la web, pero existen soluciones eficaces. Esta guía recoge las principales medidas recomendadas para desarrolladores y administradores de sistemas.

El clickjacking es una técnica maliciosa que permite a un atacante engañar a los usuarios para que hagan clic en elementos ocultos o disfrazados dentro de un sitio web, normalmente incrustado en un iframe. Esta vulnerabilidad puede tener graves consecuencias, como la ejecución involuntaria de comandos o la divulgación de información sensible.

Sin embargo, gracias a mecanismos modernos como las cabeceras HTTP específicas y técnicas de protección con JavaScript, es posible proteger eficazmente las aplicaciones web contra este tipo de ataques. A continuación, se detallan las tres formas más comunes de mitigar el clickjacking:

1. Uso de la cabecera HTTP X-Frame-Options

Esta cabecera permite controlar si una página puede ser cargada dentro de un iframe. Su configuración depende del nivel de protección requerido:

• X-Frame-Options: DENY: Ningún sitio puede incluir la página en un iframe.
• X-Frame-Options: SAMEORIGIN: Solo puede ser incrustada por páginas del mismo origen.
• X-Frame-Options: ALLOW-FROM uri: Permite la inclusión solo desde el URI especificado, aunque esta opción está obsoleta y no es compatible con navegadores modernos.

2. Uso de Content-Security-Policy (CSP) con frame-ancestors

La cabecera Content-Security-Policy es más versátil y moderna. Se recomienda su uso sobre X-Frame-Options en navegadores compatibles.

• Content-Security-Policy: frame-ancestors 'none': Prohíbe la carga en cualquier iframe.
• Content-Security-Policy: frame-ancestors 'self': Permite la carga solo desde el mismo origen.
• Content-Security-Policy: frame-ancestors https://ejemplo.com: Permite la carga solo desde el dominio especificado.

3. Uso de JavaScript para romper el iframe (Frame Busting)

Si por alguna razón no se pueden usar las cabeceras HTTP, una técnica complementaria es incluir código JavaScript que detecte si la página se está mostrando dentro de un iframe y, de ser así, redirija el navegador para salirse del marco.

<style>html { display: none; }</style>
<script>
if (self === top) {
  document.documentElement.style.display = 'block';
} else {
  top.location = self.location;
}
</script>
Lenguaje del código: HTML, XML (xml)

Ejemplos de implementación

Node.js

response.setHeader("X-Frame-Options", "DENY");
response.setHeader("Content-Security-Policy", "frame-ancestors 'none'");
Lenguaje del código: JavaScript (javascript)

Java

response.addHeader("X-Frame-Options", "DENY");
response.addHeader("Content-Security-Policy", "frame-ancestors 'none'");
Lenguaje del código: JavaScript (javascript)

Nginx

add_header X-Frame-Options "DENY";
add_header Content-Security-Policy "frame-ancestors 'none'";
Lenguaje del código: JavaScript (javascript)

Apache

Header set X-Frame-Options "DENY"
Header set Content-Security-Policy "frame-ancestors 'none'"
Lenguaje del código: JavaScript (javascript)

WordPress (wp-config.php)

header('X-Frame-Options: SAMEORIGIN');
header("Content-Security-Policy: frame-ancestors 'none'");
Lenguaje del código: JavaScript (javascript)

Conclusión

Prevenir el clickjacking es esencial para proteger la integridad de una aplicación web y la privacidad del usuario. Implementar correctamente las cabeceras X-Frame-Options y Content-Security-Policy, o en su defecto técnicas de «frame busting» con JavaScript, son prácticas altamente recomendadas y efectivas. En un entorno donde las amenazas evolucionan constantemente, reforzar estos aspectos básicos de seguridad sigue siendo una prioridad fundamental.

Para más detalles técnicos y ejemplos por lenguajes, puedes realizar un test gratis sobre tu web en clickjacker.io.