Categoría: HTML5

HackIt! 2014 _ Level 1

24 de julio, a alguna hora de la noche cercana a las 22:00. Mis compañeros de DL me indican que marcan ha dado comienzo al HackIt de este año. Esta vez no podré acudir a la presentación y me tendré que aguantar hasta el viernes 25 a eso de las 18:00, así que estaré un día ayudando como pueda a través del móvil :-O Cuando el 25 llego por fin a mi puesto, abro el portátil y me sumerjo en el reto… del que no me despegaré hasta el domingo 27 a las 14:00 de la tarde… o para ser más exactos, a las 14:01, como podréis comprobar en los siguientes posts.

A decir verdad, los retos comenzaron mucho antes… en la lista de correo del HackIt, donde, como todos los años marcan nos pidió colaboración en la elaboración de las pruebas. Llevaba dándole vueltas a la idea de crear un nivel donde hiciera falta explotar la vulnerabilidad HeartBleed, y este año, a diferencia de otros, conseguí pasar de la idea a la realidad 🙂 Como de costumbre, marcan hizo que esa realidad fuera aún más enrevesada (¿a quién demonios se le ocurrió si no, desplegar el level en una máquina con arquitectura Big Endian?).

Coincidimos con la gente de amn3s1a, w0pr, NavarParty y TimoSoft y nos «peleamos» por el segundo y tercer puesto (el primero, it goes without saying, está reservado para w0pr, juegan en otra liga). También estuvo Willix Team, aunque no pudimos hablar con ellos pues no les vimos cerca de la Raspberry Pi (enseguida sabréis la razón de que aparezca aquí este dispositivo).

En fin, buenos recuerdos, muchas cosas que aprendimos por el camino y muchas más cosas que apunté para profundizar y aprender hasta el HackIt de 2015 😉 En esta serie de posts, siguiendo la recomendación del propio admin de la prueba, pasaré a comentar nuestra forma de superar algunos de los niveles. No todos… la prueba de reversing en ARM se nos atragantó (aquí agradecería que la gente de W0pr – o tal vez NavarParty, no recuerdo bien si consiguieron superarla – nos iluminara con un write-up); y con respecto a la última, la «marcanada del año» (sic), llegamos sobre la campana (un minuto más allá) y no pudimos ni intentarlo. También se agradecería un write-up, especialmente a @abeaumont, del que sabemos que estuvo muuuuchas horas pegado a la pantalla hasta solucionarlo 😉

El primer nivel, Lienzo Digital, empieza diciendo que podrás superarlo rápidamente, a no ser que uses Internet Explorer. Analizando el código fuente, nos encontramos con un script en JS, que tras pasarlo por un beautifier, nos dice algo como:

$(document).ready(function() {
    var a = new Image();
    a.addEventListener("load", function() {
        $("#password").keyup(function(b) {
            var c = $("#password").val();
            if (27 != c.length) {
                $("#password").css({
                    "background-color": "#f88"
                });
                return;
            }
            var d = 0;
            var e = document.createElement("canvas");
            e.width = 9;
            e.height = 1;
            var f = e.getContext("2d");
            f.globalCompositeOperation = "difference";
            var g = f.createImageData(9, 1);
            for (var h = 0; h < 36; h++) g.data[h] = 255;
            for (var h = 0; h < c.length; h++) g.data[h + Math.floor(h / 3)] = Math.min(c.charCodeAt(h), 255);
            f.putImageData(g, 0, 0);
            for (var h = 0; h < 9; h++) f.drawImage(a, 0, -h);
            var g = f.getImageData(0, 0, 9, 1);
            for (var h = 0; h < 27; h++) d |= g.data[h + Math.floor(h / 3)];
            $("#password").css({
                "background-color": d ? "#f88" : "#8f8"
            });
        });
    });
    a.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAABB0lEQVR4nAH8AAP/APXX7L74zhsb6Bni6gjRu84PCwPnFRrD/iQJEADp+fop4w7/ClXcP1SiE/cmvMOp+MHm/T7ppegA1O7CJP/IGQvj+xTHyPU3uRbJ6gA34E3f4dNfAOsR5vkP0TXLIO7E3uYm1Auzux4bx+fsD9bN9QD3IbM6yxDkNLjgussk5SUKCxXK1dMIHKPVMf8A2REc1MHrOtrT962///YfuB++E8fdDzAQoanoAOKODsDtBa31xuj6IizvxQYV3AIv4+wkxgy1vgAJFqLRFxD7HQCh7MwE3Aq0qwzg6yr69d28AtUBnV1+0/HzLiLX19o25jfnBP/hIDkMDBUX3YAUC0mGddt48B4AAAAASUVORK5CYII=";
});

Lo primero que vemos es que la longitud del pass debe ser 27 (en otro caso, el css que se aplica es de color rojizo #f88). Lo siguiente es que el level crea un elemento canvas (lienzo digital…) con el que empieza a jugar. Dentro del canvas (‘f’) tenemos representado un array de 9×1 pixels en una variable de nombre ‘g’. Cada pixel, a su vez, viene representado en RGBA (por tanto, con 4 bytes por pixel, necesitamos 36 bytes para gestionar dicho array). Por otro lado, en la variable de nombre ‘a’ tenemos una extraña imagen usando un Data URI Scheme (RFC 2397). Si copias y pegas esa imagen como una URL normal en el navegador, podrás visualizarla. La idea para pasar este nivel es que con los 27 caracteres del password (su código ASCII) rellenamos los datos del array g. ¿Por qué 27 y no 36? Porque en el bucle vemos que cada 3 bytes, nos saltamos uno (g.data[h + Math.floor(h/3)] = código ascii).

A continuación hay tres líneas que vuelcan el valor del array g (construido con los valores ASCII del pass, recuerda) en el canvas ‘f’ y calculan una diferencia de ‘f’ con ‘a’ (el f.globalCompositeOperation = ‘difference’ entra en juego ahora), dejando el resultado en ‘g’.

El último «meneo» aplica un OR a los datos de ‘g’ y deja el resultado en ‘d’.

d = 0;
for (var h = 0; h < 27; h++) d |= g.data[h + Math.floor(h / 3)];

El objetivo es conseguir satisfacer que ‘d’ valga 0 al salir del bucle. Si lo conseguimos (para ello, todos los datos de g.data deben ser 0), el valor del background del campo pass será verde: («background-color»: d ? «#f88» : «#8f8»), y por tanto, sabremos que el password es correcto.

Abramos la consola de Chrome y comencemos a jugar. Pegamos el siguiente trozo de código:

var a = new Image();
a.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAABB0lEQVR4nAH8AAP/APXX7L74zhsb6Bni6gjRu84PCwPnFRrD/iQJEADp+fop4w7/ClXcP1SiE/cmvMOp+MHm/T7ppegA1O7CJP/IGQvj+xTHyPU3uRbJ6gA34E3f4dNfAOsR5vkP0TXLIO7E3uYm1Auzux4bx+fsD9bN9QD3IbM6yxDkNLjgussk5SUKCxXK1dMIHKPVMf8A2REc1MHrOtrT962///YfuB++E8fdDzAQoanoAOKODsDtBa31xuj6IizvxQYV3AIv4+wkxgy1vgAJFqLRFxD7HQCh7MwE3Aq0qwzg6yr69d28AtUBnV1+0/HzLiLX19o25jfnBP/hIDkMDBUX3YAUC0mGddt48B4AAAAASUVORK5CYII=";
var d = 0;
var e = document.createElement("canvas");
e.width = 9;
e.height = 1;
var f = e.getContext("2d");
f.globalCompositeOperation = "difference";
var g = f.createImageData(9, 1);
for (var h = 0; h < 36; h++) g.data[h] = 255;

Inspeccionando un poco el entorno, vemos lo siguiente:

// creamos un pass de 27 'a's
> var c = Array(27).join("a")
> g.data
[255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,255, 255, 255, 255, 255, 255, 255, 255, 255]
> for (var h = 0; h < c.length; h++) g.data[h + Math.floor(h / 3)] = Math.min(c.charCodeAt(h), 255);
> f.putImageData(g, 0, 0);
> f.getImageData(0,0,9,1).data
[97, 97, 97, 255, 97, 97, 97, 255, 97, 97, 97, 255, 97, 97, 97, 255, 97, 97, 97, 255, 97, 97, 97, 255, 97, 97, 97, 255, 97, 97, 97, 255, 97, 97, 255, 255]

¿Y qué datos tenemos en la imagen misteriosa?

var b = new Image()
var myCanvas = document.createElement("canvas")
var ctx = myCanvas.getContext("2d")
 b.onload = function(){ ctx.drawImage(b,0,0); } ; b.src = a.src;
 // primera fila de la imagen misteriosa
 
 ctx.getImageData(0,0,9,1).data
[245, 215, 236, 255, 190, 248, 206, 255, 27, 27, 232, 255, 25, 226, 234, 255, 8, 209, 187, 255, 206, 15, 11, 255, 3, 231, 21, 255, 26, 195, 254, 255, 36, 9, 16, 255]
 // segunda fila de la imagen misteriosa
 ctx.getImageData(0,1,9,1).data
[233, 249, 250, 255, 41, 227, 14, 255, 255, 10, 85, 255, 220, 63, 84, 255, 162, 19, 247, 255, 38, 188, 195, 255, 169, 248, 193, 255, 230, 253, 62, 255, 233, 165, 232, 255]

OK! Ahora sólo nos queda entender esto:

for (var h = 0; h < 9; h++) f.drawImage(a, 0, -h);

La primera iteración del bucle es sencilla: f.drawImage(a,0,0) . Lo que estamos haciendo es copiar en el canvas (desde la posición 0,0 del canvas) los bytes del array ‘a’. Pero como hemos definido que el globalCompositeOperation del canvas es «difference», realmente lo que hacemos no es machacar lo que ya hubiera en el canvas (la ristra de 97, 97, 97…) sino que se calcula la diferencia. Es decir, estamos calculando esta operación: abs( [97, 97, 97, 255, …, 97, 97, 255, 255] – [245, 215, 236, 255, …, 36, 9, 16, 255]), obteniendo como resultado: [148, 118, 139, 255, …, 61, 88, 239, 255].

El modo difference es uno de los posibles modos «composite» del canvas HTML5. Podéis investigar al respecto en este ejemplo de CodePen.io.

Este es un ejemplo de composite «normal» (fíjate en las zonas de solapamiento en los colores magenta, cyan y amarillo)

normal

y este otro un ejemplo de composite «difference».

difference

La segunda iteración del bucle tiene una pequeña complejidad: f.drawImage(a,0,-1) . ¿Qué es ese -1? Que la imagen misteriosa se solapa sobre el canvas, pero saltando una fila, es decir, estaremos haciendo:
abs ([148, 118, 139, 255, …, 61, 88, 239, 255] – [233, 249, 250, 255, …, 233, 165, 232, 255]) obteniendo [85, 131, 111, 255, …, 172, 77, 7, 255]

Y seguimos igual para f.drawImage(a,0,-2) … f.drawImage(a,0,-8). Recordemos que en la última iteración debemos obtener [0,0,0,255,0,0,0,255,…,0,0,0,255]. Así que, deshaciendo el entuerto tenemos que para la primera letra del pass hay que resolver:

|||||||245 (pos 0,0 de la imagen) – Letra del pass| – 233 (pos 0,1 de la imagen)| – …. – pos(0,8 de la imagen)| = 0

Es decir:

Math.abs(Math.abs(Math.abs(Math.abs(Math.abs(Math.abs(Math.abs(Math.abs(Math.abs(x – 245) – 233) – 212) – 235) – 247) – 217) – 226) – 9) – 157) = 0

Para la segunda letra del pass, de forma equivalente, hay que resolver:

|||||||215 (pos 1,0 de la imagen) – Letra del pass| – 249 (pos 1,1 de la imagen)| – …. – pos(1,8 de la imagen)| = 0

etc.

Resolviendo la ecuación para todas las letras del pass:

// preparar la imagen en el contexto del canvas
var b = new Image()
var myCanvas = document.createElement("canvas")
var ctx = myCanvas.getContext("2d")
b.onload = function(){ ctx.drawImage(b,0,0); } ; 
b.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAABB0lEQVR4nAH8AAP/APXX7L74zhsb6Bni6gjRu84PCwPnFRrD/iQJEADp+fop4w7/ClXcP1SiE/cmvMOp+MHm/T7ppegA1O7CJP/IGQvj+xTHyPU3uRbJ6gA34E3f4dNfAOsR5vkP0TXLIO7E3uYm1Auzux4bx+fsD9bN9QD3IbM6yxDkNLjgussk5SUKCxXK1dMIHKPVMf8A2REc1MHrOtrT962///YfuB++E8fdDzAQoanoAOKODsDtBa31xuj6IizvxQYV3AIv4+wkxgy1vgAJFqLRFxD7HQCh7MwE3Aq0qwzg6yr69d28AtUBnV1+0/HzLiLX19o25jfnBP/hIDkMDBUX3YAUC0mGddt48B4AAAAASUVORK5CYII=";
 
// resolver la ecuación
pass = ''
for (ind = 0; ind < 36; ind++) {
  for (letra=32;letra<127;letra++) {
   c = letra; 
   for(var i=0; i < 9; i++) {
       c = Math.abs(ctx.getImageData(0,i,9,1).data[ind] - c)
   } 
   if(c == 0)
      pass += String.fromCharCode(letra);
   }
}
console.log(pass)

Obtenemos lo que buscábamos 😉

Lynckia: vídeo conferencias en HTML5 (look ma! no plugins)

lynckia Lynckia (plataforma de comunicaciones de código abierto) permite realizar comunicaciones en tiempo real desde tu navegador usando la tecnología WebRTC. Aunque hasta hace poco sólo el navegador Google Chrome disponía de una implementación avanzada de WebRTC, desde el 4 de Febrero de este año podemos usar también el navegador Firefox. El 6 de Marzo (es decir, hace exactamente 10 días!) Google anunció el soporte WebRTC también en la versión de Chrome para Android.

Aún queda mucho trabajo por hacer (poder capturar streams RTMP y que formen parte de la videoconferencia, poder codificar los streams de los usuarios en uno sólo y no uno por cada usuario, ampliar la base de ejemplos…) pero los avances realizados hasta el momento por el equipo de Lynckia son impresionantes. Como decían en HTML5Spain:

Lynckia nos ha parecido uno de los proyectos más interesantes que han aparecido en escena a nivel internacional a lo largo de este año

Lynckia se puede probar online siempre que uses una versión moderna de Chrome o Firefox, sin necesidad de instalar nada manualmente (ni tener ningún tipo de plugin instalado).

Si quieres tener tu propio servidor Lynckia, su instalación para el caso de Ubuntu 12.04 es sencilla. Basta con ejecutar los scripts paso a paso. En mi caso, con Ubuntu 12.10, instalé las dependencias Node.js, Nodejs-dev y nmp desde el repositorio oficial de Ubuntu (sin usar el PPA de Chris Lea como indican las instrucciones) y pude compilar y probar la demo básica sin problemas. En la demo básica se lanza un servicio Lynckia en el puerto 3001 de tu máquina local. Abriendo esa url en Chrome, te pedirá permiso para acceder a la webcam y al micrófono. En cuanto concedas permisos, verás tu imagen en pantalla (y oirás lo que digas por el micro). Si abres otra pestaña en el navegador y repites el proceso, verás que debajo de la imagen original se abrirá otra más, a modo de videoconferencia (contigo mismo en esta demo, pero se entiende el objetivo, no? 😉