Archivo de la Categoría 'Desarrollo Web'

Tab Hijacking: phishing en estado puro

Una de las cosas que mas preocupa a los usuarios de internet de hoy en día es el phishing. Existen centenares de páginas web que imitan la portada de paypal, ebay, páginas de banca electrónica etc.

Históricamente este tipo de páginas han hecho uso de todos los mecanismos posibles para engañar al usuario y hacerle creer que está en una página legitima y que debe introducir sus credenciales. Una técnica habitual hoy en día es el tabnabing, que consiste en cargar una página normal y corriente, con un blog por ejemplo, y cuando la página pierde el foco, reemplazarla por una página idéntica a gmail, con favicon incluido.

La carrera por el phishing ha llegado a tal punto, que los timadores han desarrollado todo un arsenal de trucos sucios y rebuscados para hacerte creer que estás en gmail.com y no en una web que lo suplanta.

Una manera habitual utilizada por los usuarios (y casi la única para un usuario de a pie) de comprobar que están interactuando con gmail.com y no con una web que lo suplanta, es comprobar la barra de direcciones (URL).

Comprobar la URL para ver que el dominio coincide antes de introducir los credenciales suele ser una buena idea, sin emargo, durante la investigación de un bug muy extraño en una página web (no relacionado con todo esto) se me ha ocurrido una manera curiosa e ingeniosa de engañar al usuario, incluso si este comprueba la URL.

El truco se apoya en una funcionalidad “poco” conocida de HTML. En HTML es posible enlazar a una página en otro dominio y forzar a que se abra en una ventana/pestaña nueva. Cuando el usuario hace click en el enlace, se abre una nueva ventana o pestaña (depende de la configuración) con la web enlazada.

Los enlaces en HTML se hacen usando la etiqueta anchor, que tiene la forma típica:

<a href=”http://gmail.com”>go to gmail!</a>

Sin embargo, anchor tiene un atributo llamado target que sirve para especificar de que forma se va a abrir este enlace, en una nueva ventana, en la misma, etc.

Si utilizamos un valor arbitrario para target, como por ejemplo “lol”, y creamos un enlace del tipo:

<a href=”http://gmail.com” target=”lol”>go to gmail!</a>

El enlace se abre en una nueva ventana. Pero si se hace click en otro enlace que tenga también definido target al mismo valor, en lugar de abrirse otra nueva ventana/pestaña, se redirecciona la pestaña abierta originalmente.

Esto abre las puertas a un ataque en el cual el usuario hace click en un enlace que le lleva a gmail.com, el usuario comprueba la URL y es efectivamente gmail.com. Sin embargo, al hacer click en el enlace y abrirse gmail.com, la página original desde la que el usuario ha llegado a gmail.com, se ha quedado abierta en otra pestaña/ventana. Entonces, se activa un temporizador que en X segundos redirecciona gmail.com a otra web, con el aspecto de gmail, pero que le dice que la sesión ha expirado.

Esta redirección puede llegar a ser MUY rápida e invisible para el usuario,  que volvería a introducir los credenciales ya que ya comprobó la url.

La explicación es un poco compleja, así que un ejemplo vale mas que mil palabras:

Ejemplo de tab hijacking.

Si hacéis click en el ejemplo, veréis un enlace a gmail, al presionarlo se abrirá gmail.com en una nueva ventana/pestaña. Si os quedáis mirando gmail durante unos segundos (8 segundos) veréis que de pronto y sin tocar nada la página que estáis viendo (gmail.com) es sustituida por php.net, sin previo aviso ni interacción por parte del usuario.

El cambio de gmail.com a php.net es MUY obvio, pero el cambio de gmail.com a un dominio malicioso con apariencia de gmail no es tan obvio, y puede suceder en milisegundos.

El problema de este tipo de tricks es que es muy difícil evitarlos sin comprometer la usabilidad del navegador.

Debido a que esto no es un error de seguridad al uso, he decidido publicarlo para abrir debate sobre si esto es realmente peligroso usado malintencionadamente, o si por el contrario pensáis que es inofensivo: aunque creo que cualquiera que vea un ejemplo mas arriesgado con un gmail y una web que imita gmail y que carga en 100ms, estará bastante convencido de que es arriesgado.

Con la web cada vez mas rica en funcionalidades y navegadores cada vez mas potentes, empieza a ser muy difícil mantener protegido y aislado al usuario, especialmente contra ataques phishing.

Transformaciones CSS agregadas en Firefox 3.1

La web 2.0 requiere cada vez tecnologías mas potentes en los navegadores, requiere que el javascript se ejecute mas y mas rápido, y requiere nuevos y mejores elementos html, y en toda esta carrera por superar las barreras impuestas por las tecnologías en los navegadores, uno de los últimos pasos han sido los “CSS transforms”, o dicho mas llanamente: Transformaciones CSS.

La transformaciones CSS son unas nuevas propiedades disponibles para utilizar en nuestras hojas de estilo, propuestas por el equipo de WebKit hace un año, dichas propiedades permitirían aplicar ciertos efectos, como rotaciones y escalados, a nuestros elementos HTML.

Las primeras noticias acerca de estas nuevas propiedades CSS (no estándares, evidentemente) que salieron para WebKit incluían ciertos ejemplos de lo que se podía hacer, bastante atractivos, como crear un iframe, cargar una página dentro, y rotarlo 90º:

Sin embargo, el hecho de que no estuviesen disponibles en Firefox, era desalentador, hasta hace poco, que mozilla anunció que las transformaciones CSS estaban ya disponibles en firefox 3.1.

Antes de continuar, si queréis bajar el último firefox 3.1, y probarlo, se puede descargar precompilado de aquí:

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

Si no queremos que esto afecte a nuestra configuración actual de firefox, en linux podemos hacer:

mv ~/.mozilla ~/.mozillaBack

Y renombrar el nombre del directorio donde se guardan nuestras configuraciones de firefox, a .mozillBack, ahora extraemos el firefox 3.1 precompilado, lo ejecutamos, y el creará su nuevo .mozilla, el cual podremos borrar y sustituir por nuestro .mozillaBack en cuanto queramos regresar a firefox estable, haciendo:

mv ~/.mozillaBack ~/.mozilla

Con nuestro nuevo firefox 3.1 listo, ya podemos adentrarnos un poco mas en las transformaciones CSS, la documentación completa de estas nuevas propiedades CSS está aquí:

http://developer.mozilla.org/En/CSS/CSS_transform_functions

Así que vamos a probar a hacer algo, por ejemplo, rotar un iframe 45º sobre si mismo:

<html>
<head>
<title>Prueba de rotación</title>
</head>
<body>
<iframe style=”-moz-transform: rotate(45deg); -moz-transform-origin: bottom left;” src=”http://rooibo.wordpress.com/” width=”600px” height=”600px” />
</body>
</html>

La verdad es que es bastante fácil, aquí podéis verlo en funcionamiento:

http://eyeideas.es/rotacion.html

Y aquí una imagen de como se me renderiza a mi en mi Firefox 3.1:

Los resultados son bastante buenos, habrá que esperar a ver cuanto se extienden estas nuevas propiedades CSS, que hace Internet Explorer y todo eso…el clásico problema en el mundo de los navegadores.