Cómo se creó la extensión de Chrome para Gmail de HeSidoHackeado

Cuando le presenté el proyecto de “HeSidoHackeado.com” a Chema Alonso hace unas semanas me dio la estupenda idea de hacer una extensión para Google Chrome que verificara la dirección de email del remitente y nos indicara si había sido comprometida. Como ya tenía activada la API del servicio pensé que sería una tarea sencilla, pero alguna que otra investigación tuve que hacer para poder extraer los remitentes de los e-mails consultados de manera transparente para el usuario. Por suerte salí victorioso y para celebrarlo decidí publicar el código fuente en GitHub

Figura 1: Cómo se creó la extensión de Google Chrome para Gmail de HeSidoHackeado.com

La nueva interfaz de GMail solo muestra el remitente del correo cuando no lo tenemos añadidos a contactos, por lo que si teníamos en mente poder parsear la página y sacar la dirección, esta “feature” dinamita nuestro plan. Tendríamos que buscar otra manera.

Figura 2: En el ejemplo de la izquierda no lo tenemos añadido a contactos y muestra la dirección de e-mail.
En el ejemplo de la derecha está añadido a contactos y por tanto oculta la dirección de e-mail.

Investigando la documentación y otras extensiones, caí en la cuenta que al igual que se podía acceder al e-mail original con cabeceras incluidas, con un par de clics también se debería poder hacer la consulta por AJAX y parsear ese contenido. La dirección URL en cuestión para hacer estas consultas es:

url_de_gmail + '?ui=2&ik={userId}&view=om&th={messageId}' 

dónde {userId} es el ID del usuario identificado en Gmail y {messageId} el ID del mensaje de correo a consultar.

Para poder “engañar” a Google y que pensara que era su cliente nativo el que realizaba las consultas me fue necesario modificar la función para llamadas xhttp de Google Chrome e incluirse información adicional acerca del navegador, dispositivo y el sistema operativo. GMail es muy listo y las usa para comprobar que es una petición legítima. Si queréis echarle un vistazo al código, esta modificación se encuentra en el archivo background.js de la extensión.

Una vez cogemos las headers del correo solo tenemos que parsear el campo form del texto plano del email y ya solo nos quedaría enviárselo a la API y pintarlo en la interfaz de GMail.

Figura 3: Campo From en header de correo electrónico de Gmail

La llamada al API es muy sencilla, aprovechando que cargamos jQuery para la gestión de las modificaciones a la interfaz lo usaremos para gestionar las llamadas a la API y pintarlo en caso de que todo haya ido bien.

Figura 4: Llamada a la API en la extensión

Cuando tengamos la respuesta tan solo tendremos que usar jQuery para buscar en la interfaz web de Gmail el asunto del correo electrónico y pintar junto a él un candado verde si la API no devolvió resultados y rojo si hubiera sido comprometido. También le pondremos un enlace por si hacen clic en el candado les lleve a la ficha de las fugas... et voilà!

Figura 5: Construyendo el icono en el interfaz

Posteriormente le añadí un sistema de caché de peticiones de cabeceras y para las peticiones a la API, así no tendríamos que estar consultando repetidamente el mismo mensaje ni su dirección de e-mail.

Figura 6: Aspecto final del icono pintado tras la validación

Estáis invitados a destripar el código, hacer forks y aportar mejoras, sugerencias ¡y lo que se os ocurra!

Autor: José María Chia