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=";
}); |
$(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)]; |
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; |
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] |
// 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] |
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); |
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)
y este otro un ejemplo de composite «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) |
// 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 😉
nyan0verflow, «No siempre todo es lo que parece. Y lo que aparece no es siempre el todo». Con la foto de un gato (no es nyan cat 😉 y el texto anterior empieza el tercer reto del HackIt! Atendiendo al nombre de la imagen, a simple vista parece que han usado algún algoritmo de esteganografía (¿simple?). Probando con outguess y steghide, no parece que saquemos nada en claro.
