Clickjacking a fondo y con ejemplos

Hoy voy a cumplir un poco con mi fama de obsesionado por la seguridad, y voy a escribir un artículo sobre clickjacking, ese extraño y misterioso término que no para de aparecer por la blogosfera y las páginas de noticias…

Y es que en seguridad informática, todos los días suceden cosas graves, pero algunas, saltan a los medios populares, se convierten en “noticia” y perciben cierto protagonismo, como si otros problemas de seguridad, no fuesen igual de recientes y graves…pero vaya, esto es como cuando un caso de asesinato salta a la prensa amarillista: lo mismo.

El clickjacking no es un agujero de seguridad en si mismo, es una forma de darle la vuelta a las tecnologías que utilizamos hoy en día, para engañar al usuario y hacerle creer que ciertas cosas, son lo que realmente no son.

Este ataque consiste en cargar una página web externa dentro de un iframe invisible (con opacidad 0, por ejemplo) y poner debajo del iframe invisible (con menor z-index), elementos xhtml para que el usuario haga click, pero que realmente, tienen el iframe invisible encima, y es quien recibirá el click.

Dicho de otra forma, imaginaos un cristal (opacidad 0) con algo debajo, intentamos tocar con el dedo lo que hay debajo, pero tocamos el cristal, esto es lo mismo que sucede cuando ponemos un iframe con opacidad 0 (invisible) encima de ciertos elementos de nuestra web: el usuario irá a hacer click en nuestros elementos, pero hará click dentro del iframe.

Ahora imaginemos que cargamos en el iframe una página de noticias, como meneame, fresqui, o digg, lo volvemos transparente, y debajo metemos un botón que diga: haz click aquí, posicionándolo justo exactamente debajo de donde aparece el botón para votar a la noticia, dentro de la página de noticias.

Cuando el usuario haga click en nuestro botón, que está debajo del iframe transparente, justo donde está el botón para votar de la web de noticias que hay cargada dentro del iframe, hará click en el botón votar de la pagina que hay dentro del iframe.

Creo que lo mejor para acabar de entenderlo es una imagen:

Sin embargo, muchos de vosotros pensaréis: y para que tanta historia, si para simular el click de un usuario, podemos realizar la petición, cargando un iframe con la dirección de destino?…es decir, podemos realizar un ataque CSRF (Cross-site request forgery).

Para entrar bien a fondo en el tema del clickjacking, tenemos que comprender primero los ataques CSRF, ya que el clickjacking es una extensión de los CSRF (a mi modo de verlo🙂.

Un ataque CSRF consiste en que si en una web, digamos: http://www.example.com, hay una página de noticias, y para votar una noticia, digamos la noticia número 51, se usa un enlace tal como:

http://www.example.com/noticias.php?votar=51

Podríamos crear una página con un iframe invisible apuntando a esa dirección, y cuando el usuario entre a nuestra web, sin saberlo, votará la noticia 51.

Eso es un típico ejemplo de CSRF.

Sin embargo, cuando ese tipo de ataques empezó a popularizarse, muchos sitios web, como meneame, fresqui, etc empezaron a agregar números de control a las peticiones, es decir, para realizar acciones en la web, las peticiones deben incluir un número aleatorio que te dan cuando cargas la página, de esta forma, sin ese número, no puedes hacer una petición como la anterior y votar una noticia, además, el número de control cambia por cada petición que haces.

Con esta técnica, parecía que los CSRF habían muerto, y ahí es donde aparece el clickjacking, podemos crear una web, y utilizar lo explicado arriba, para inducir a un usuario a hacer click en un botón, que realmente tiene encima, de forma invisible, un botón de otra web.

De esta forma, los números de control son enviados por el javascript de la página original, y todo sucede de forma normal.

Cabe decir, después de toda esta explicación, que existen alguna páginas que no son vulnerables a este ataque, como por ejemplo meneame, ya que no permite que cargues la web dentro de un iframe, lo mismo pasa con gmail, entre otras.

Aunque a mi me gusta hacer los experimentos con meneame, contactar con Ricardo antes de publicar nada, para que lo arregle, y entonces hacer el artículo, esta vez no puedo, por que meneame no es vulnerable a clickjacking, así que voy a hacer el experimento con fresqui.

He creado una página que utilizando las técnicas de clickjacking, crea un botón, que de pulsarlo, estarías votando esta noticia de fresqui:

http://tec.fresqui.com/cientificos-descubren-que-el-sol-no-es-una-esfera-perfecta

El ejemplo, lo podéis ver aquí, y solo funciona en firefox (paso de internet explorer :):

http://eyeideas.es/clickjacking.html

Como se puede ver en el código, hay una función javascript:

function initBoton() {
var obj = document.getElementById(“boton”);
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == ‘number’ ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in ‘standards compliant mode’
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
var finalW = myWidth-910;
finalW = finalW/2;
//910-722 = 188 (mas tamaño…238)
finalW = finalW + 248;
obj.style.position=’absolute’;
obj.style.right=finalW+’px’;
obj.style.top=’244px’;
obj.style.display=’block’;
}

Que de forma un poco sucia, posiciona el botón rojo justo debajo del botón para votar la noticia en fresqui.

El iframe es algo así:

<iframe src=”http://tec.fresqui.com/cientificos-descubren-que-el-sol-no-es-una-esfera-perfecta&#8221; style=”opacity:0;position:absolute;top:0px;left:0px;width:99%;height:95%;margin:0px;padding:0px;z-index:100;”></iframe>

Como conclusión, decir que el ataque no es tan peligroso como lo pintan, aunque tiene su potencial impacto en la seguridad del usuario.

Por cierto, el ejemplo no se lo bien que irá en otras resoluciones y tal, he intentado hacerlo bastante portable, pero no lo he probado en otro sistema mas que el mio, es una simple prueba de concepto.

45 Responses to “Clickjacking a fondo y con ejemplos”


  1. 1 vierito5 octubre 5, 2008 a las 11:03 pm

    Buena explicación! Aún no me había parado a leer de que iba exactamente el tema.

  2. 2 rooibo octubre 6, 2008 a las 12:18 am

    Hola vierito5, gracias por el comentario!

    A mi me dio estos días por mirármelo, me esperaba mas, aunque tiene su gracia…

  3. 3 Alberto Gomez octubre 6, 2008 a las 6:58 am

    Yo habría añadido las formas de protegerse y porque NoScript por defecto no protege… aunque es obvio una vez leido el artículo.
    Se debe activar la opcion “bloquear IFRAME” que no viene activada por defecto.
    Muy buen artículo Jose Carlos, me anoto tu Blog, muy interesante.

  4. 4 Alberto Gomez octubre 6, 2008 a las 7:11 am

    Un apunte más… ¿A quien consideramos vulnerable? a meneame por permitir que sea cargada en un Iframe? o a la otra web por incluir codigo javascript malicioso que realiza el ClicJacking cargando a meneame en un iframe?
    Yo diría que a esta segunda… no? puesto que para permitir esto la vulnerabilidad real ha sido una inyeccion de codigo.

  5. 5 rooibo octubre 6, 2008 a las 11:36 am

    Hola Alberto, gracias por los comentarios.

    Yo creo que vulnerable es la web que ha sido modificada con el código vulnerable. Además, en todo caso, meneame no permite ser cargada en un iframe, fresqui si.

    Muy buena reflexión esta última.

  6. 6 Antonio Ricaurte octubre 6, 2008 a las 4:50 pm

    Lo probe en Chrome y pareciera Clickjacking-proof. Pero está muy buena la explicación. Saludos. AR

  7. 7 Zerial octubre 6, 2008 a las 5:46 pm

    Interesante y muy buena la explicación.

    saludos

  8. 8 eddie octubre 6, 2008 a las 6:34 pm

    Le he encontrado dos defectos al clickjacking.

    El primero es que si tengo noscript activado, entonces el javascript no funcionará hasta que de permisos a la página. Cuando le doy al noscript para dar los permisos, sale el dominio fresqui.com

    Si estoy en el dominio tias-en-pelotas.com y al querer activar el contenido activo (los videos guarretes en flash video streaming) me sale en el noscript hacienda.es o bbva.com, pues es bastante sospechoso.

    EL otro, a toro pasado, es que cuando hago click en el botón rojo me sale en la barra de status la conexión a tec.fresqui.com, que aunque ya no se pueda hacer nada (la petición ya está hecha), pues pone sobre aviso.

  9. 9 Marc Palau octubre 6, 2008 a las 6:38 pm

    Bien explicado, queda muy claro que puedes poner un IFRAME con TU publicidad oculta (visibility:hidden), que siga al ratón y cuando cliquen en cualquier parte de la página te harán un bonito clic a la publicidad. Eso con un random y un script PHP que te valide que la IP es de telefónica, ono y algún operador más ya te vale para ir haciendo unos centimillos.

    ala, saludos y sigue con el rollo XSS que es muy chachi.

    ops por cierto, ¿conoces algún “cliente” .js o .swf con un “servidor” donde se conecte los clientes y te permitan utilizar capacidades de su navegador? (útil para explotar XSRF, sobrecargar servidores, etc…)

  10. 10 bakmax octubre 6, 2008 a las 9:16 pm

    Interesante, ojala esto no se prolifere para ataques hacia nuestros ordenadores, con eso de que Windows es coladera de virus.

  11. 11 Galois octubre 6, 2008 a las 9:52 pm

    Excelente explicación. Había leído sobre el tema en Kriptópolis, pero este post lo deja todo bastante claro. Ahora bien, me surge la siguiente duda: si una de las recomendaciones es no habilitar iframes en el navegador (uso Opera 9.52 y en en menor medida Firefox 3.0.2), es imposible acceder a la vista estándar en Gmail, además de por ejemplo simples vídeos de YouTube, GoogleVídeo, etc. ¿Cuál es la alternativa, no poder acceder más a esos contenidos?
    ¿Y por qué dices que Gmail no permite que cargues la página en un iframe? Si justamente al deshabilitar la opción en el navegador sólo puedes acceder en modo HTML básico.
    Un saludo.

  12. 12 rooibo octubre 6, 2008 a las 10:10 pm

    Hola, gracias por los comentarios.

    eddie, desde luego que no es un ataque imperceptible, pero es suficientemente silencioso para el usuario de a pie, ahí reside el peligro.

    Galois, me refiero a que gmail no permite que la web entera, es decir, http://www.gmail.com, sea cargado en un iframe alojado en otra página, eso evita el ataque, es lo mismo que sucede con meneame.

    Intenta cargar en un iframe http://www.gmail.com o meneame.net y verás a que me refiero.

  13. 13 Alex octubre 7, 2008 a las 9:05 am

    ¿Y has avisado al administrador de Fresqui para que lo arregle antes de publicar esto o esa parte de la ética no nos gusta?

  14. 14 rooibo octubre 7, 2008 a las 9:56 am

    Hola Alex, gracias por tu comentario.

    Desgraciadamente, el clickjacking es un agujero de seguridad en el navegador, y no en la página (fresqui en este caso), por lo que poco puede hacer el administrador del sitio, para impedir el ataque.

    Si meneame no es vulnerable, es por que por ciertos motivos, no permite ser cargado dentro de un iframe, cosa que no sucede con fresqui.

    He hecho una prueba de concepto lo menos dañina posible (solo se vota una noticia, que además ya estaba en portada) por lo que creo, que nadie ha salido perjudicado.

    Ahora, si quiere, el administrador de fresqui podrá decidir si le conviene impedir que fresqui sea cargado dentro de un iframe o no (esto es un cambio mayor, no es algo que se decida a la ligera, y tiene un impacto fuerte en muchos ámbitos de la página), estoy seguro que este ejemplo que he puesto no ha dañado los intereses ni el trabajo de nadie, ojala todas las pruebas de concepto fuesen votar una noticia en portada de un sitio de promoción de noticias.

    Un saludo!

  15. 15 Alex octubre 7, 2008 a las 11:07 am

    Ya veo, ya. Tu manera de proceder destila ética por todos lados, sí señor.

  16. 16 Xen octubre 7, 2008 a las 12:10 pm

    Si bien antes era suficiente con bloquear los IFRAMES mediante NoScript, que sepas que en su última versión han incorporado un nuevo método (ClearClick) para la detección de ataques de ClickJacking.

    Si bloqueamos IFRAMES tenemos lo siguiente:

    Si no bloqueamos por defecto los IFRAME, o aceptamos su apertura temporalmente, NoScript nos avisa:

    Un saludo.

  17. 17 rooibo octubre 7, 2008 a las 8:04 pm

    Hola Alex, gracias por tu comentario.

    Siento si te ha ofendido algo de lo que he dicho, he intentado explicarte que esto no es un bug en fresqui, y tu continúas con lo de la ética, el clickjacking es algo que las principales empresas de navegadores están quebrandose la cabeza para solventarlo, yo que quieres que haga?

    No es un bug tuyo, ni mio, ni de fresqui, y bien poco podemos hacer mas que recomendar el noscript.

    Pero bueno, puedes seguir culpándome y diciéndome que no tengo ética, creo que ya te he dado muchas explicaciones, y fresqui no ha sido dañado, al revés, ha obtenido publicidad con todo esto.

  18. 18 Peter octubre 7, 2008 a las 10:24 pm

    Me parece un estupendo artículo, muy bien redactado y explicado.

    ¿Por qué no lo subes a la wikipedia? Incluso el CSRF no tiene artículo en español.

    Gracias por tan magnífico blog

  19. 19 exactlimon octubre 8, 2008 a las 2:59 pm

    intersante articulo, por cierto probe la pagina que hiciste vulnerable a clickjacking con el google chrome y tambien funciona.

    y pues como en chrome no hay addons como en moxilla los que usen chrome estan mas espuestos a este ataque, a menos que el desarrollador de NOscript cree la forma de implementar su addon en chrome

  20. 20 rooibo octubre 8, 2008 a las 3:02 pm

    Hola Peter,

    Para subirlo a la wikipedia habría que cambiarlo un poco, y redactarlo un poco mas impersonal, pero muy buena idea!

    exactlimon, exacto, es por eso que utilizar un navegador extensible como firefox, y con una comunidad alrededor, es algo importante.

    Gracias por los comentarios!

  21. 21 jSponja octubre 8, 2008 a las 4:46 pm

    Fantástico artículo.

    Explicado perfectamente.

    Te has ganado un suscriptor rss😉

  22. 22 guillem octubre 8, 2008 a las 10:16 pm

    idem jsponja,
    ya tienees un suscriptor más!
    Sobretodo me ha gustado que entraras en detalles de forma simple y amena y el ejemplo. Realmente muy instructivo!

  23. 23 Protegon octubre 9, 2008 a las 3:39 am

    Alex eres retrasado o qué, no viste que ya se te explicó lo suficiente como hasta para que un burro lo entienda?

    Gracias por este excelente tema, que nos engloba a todos los webmaster.

  24. 24 HenryGR octubre 9, 2008 a las 7:40 am

    Hey rooibo,

    gracias, un estupendo artículo; simple y efectiva forma de explicar algo que (aún después de la explicación) algunos no entienden.

    Gracias por tu tiempo.
    ¡Otro lector que has ganado!

  25. 26 juanbonillo noviembre 7, 2008 a las 12:16 am

    hola rooibo
    ante todo darte las gracias por publicar estos articulos que a inexpertos como yo nos vienen de maravilla.
    me he atrevido a escribir este comentario ya que no me ha quedado demasiado clara la explicacion que has dado a galois, es decir, ¿yo podria ver videos de youtube teniendo activado noscript bloqueando iframes? en caso de ser asi, ¿que se tendria que hacer para visitar esa u otra pagina con seguridad?
    lo digo porque me descargué firefox, pero aunque me parecia interesante instalar noscript, no lo hice ya que pensaba que me bloquearia java indefinidamente y no podria ver unas páginas que me interesan. por lo que he podido ver por aqui creo que puede desactivarse el parche (aunque siga instalado), entonces creo que lo instalaré, pero claro me gustaria saber si esto me va a dificultar mucho la navegacion.

    por ultimo queria confirmar la siguiente duda: el clickjacking es una vulnerabilidad del navegador, por tanto yo puedo visitar cualquier pagina y estar oculta la misma web invisible, es independiente de la pagina web visitada ¿no? es decir yo puedo visitar una pagina segurísima pero si mi navegador no esta preparado puedo sufrir el ataque de un código malicioso metido en una iframe?.O bien, en lo que consiste el ClickJacking es que al visitar una pagina determinada y aparentemente normal, ésta soporta de forma invisible a otra, metida en una iframe, que es la que ejecuta el código malicioso? creo que es la primera opción pero no lo sé cierto.

    gracias por todo y espero no haceros perder mucho el tiempo conmigo.

  26. 28 Master enero 31, 2010 a las 5:16 am

    Hola Rooibo ¿puede alguien hacer un ClickJacking en BlogSpot? Tengo un Blog y aunque dicen que Google Chrome no lo detecta a mi me lo detecto y yo sin saber investigue y hoy me estoy enterando de los ataques del ClickJacking, al saberlo instale rapidamente NoScript y en el propio Facebook el NoScript me dió un aviso de ClearClick, es decir el implemento que usa el addon para detener ClickJacking, y creeme que nose que hacer.

    Esto es algo de un hacker o de quien es obra? la pagina oculta tiene virus o que? es decir que es lo máximo que pueden hacer con el ClickJacking ?? ¿quienes son los que lo puede hacer o utilizar?? Puede alguien meter una pagina oculta en mi blog de wordpress o blogger?? Hay herramientas para proteger los blogs??? Muchísimas Gracias por responder y saludos

  27. 29 facebook mobile septiembre 24, 2011 a las 11:21 pm

    Después de Niza sobre Clickjacking a fondo y con ejemplos « Desvarios informaticos. Estoy muy impresionado con el tiempo y el esfuerzo que han puesto por escrito esta historia. Yo te daré un link en mi blog los medios de comunicación social. Todo lo mejor!

  28. 30 Rubens Ten agosto 6, 2013 a las 5:16 pm

    Hola que tal una genial explicacion, gracias entendi muy bien el concepto pero dime como podemos proteger nuestros sites de este ataque =)

  29. 31 algoritmoI noviembre 25, 2014 a las 8:45 pm

    Hola , me deja muy sorprendido este tema ya que no tenia conocimiento de el , pero el clickjacking es mucho mas poderoso de lo que parece , ya que el conocimiento es libre y en manos equivocadas puede subirse una pagina que descargue de forma directa un troyano (RAT) para poner un ejemplo , esto es posible ? .. y en vez de una pagina de facebook , con el engaño de decirle a alguna persona , ” me das un me gusta?” se le esta poniendo una trampa con una pagina fake , y al darle click se descargaria e instalaría el RAT .
    Esto se me acaba de ocurrir , quiza sea posible , quiza no , pero muchas gracias por tu blog.


  1. 1 Top Posts « WordPress.com Trackback en octubre 7, 2008 a las 12:06 am
  2. 2 Explicación de Clickjacking con Ejemplos Prácticos | La Comunidad DragonJAR Trackback en octubre 8, 2008 a las 2:49 am
  3. 3 Shadow Security - Explicación de Clickjacking con Ejemplos Prácticos Trackback en octubre 8, 2008 a las 5:05 pm
  4. 4 Clickjacking a fondo y con ejemplos: Bits de antivirus Trackback en octubre 9, 2008 a las 12:35 am
  5. 5 El CoDiGo K » Entendiendo lo que es Clickjaking con ejemplos Trackback en octubre 9, 2008 a las 3:00 am
  6. 6 Clickjacking: La amenaza fantasma « La noticia tecnológica de la semana Trackback en octubre 10, 2008 a las 10:21 pm
  7. 7 Seguridad "clickjacking" | Buanzolandia Trackback en octubre 12, 2008 a las 12:01 am
  8. 8 .::SRT::. » Blog Archive » Clickjacking a fondo y con ejemplos. Trackback en octubre 14, 2008 a las 8:53 am
  9. 9 El Clickjacking y como afecta a las instituciones « robert dice… Trackback en octubre 20, 2008 a las 5:43 pm
  10. 10 Nueva versión de google chrome disponible | gEEK tHE pLANET Trackback en octubre 31, 2008 a las 3:37 am
  11. 11 Clickjacking-¿Que es?-¿Como protegernos? | Hackers Libres Trackback en noviembre 21, 2008 a las 7:01 pm
  12. 12 Que significa esto?Keylogger?? - Foros Softonic Trackback en mayo 22, 2009 a las 1:28 am
  13. 13 ¿Qué es el clickjacking? Trackback en junio 5, 2009 a las 1:02 pm
  14. 14 download free keylogger Trackback en abril 23, 2015 a las 7:58 pm

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s





A %d blogueros les gusta esto: