EasyCTF Writeup - 49 Shades

blog-49 writeup.md

The challenge states that the image includes shades of gray, #000000 to #F5F5F5. Since all of the pixels are gray, all three bytes of each color will be identical, so only one needs to be considered.

#000000-#F5F5F5 leaves shades 0-245 possible, significantly more than the 50 shades the challenge includes. Dividing these possible shades up evenly, it can be reasonably assumed that each shade is 5 apart.

Next, I wrote a simple Javascript program which would find each possible shade in the image. The shade that is not found is clearly the missing one.

Source for this program below. (Comments after the fact)

shades.html

shades.html

<!-- Left out the head and body tags for sake of time. It's not technically right but it worked. -->

<img id="im" src="img.png"> <!-- Get the image from the challenge -->
<canvas id="c" width="512" height="512"></canvas> <!-- Create a canvas for pixel manipulation -->
<script>
    // When an element has an id, that id can be used to directly reference the element without using
    // document.getElementById(''). This is terrible practice, but works for a quick and dirty solution
    var ctx = c.getContext('2d');
    var pixels = []; // Array of the first byte of the color of every pixel
    setTimeout(function() {
        ctx.drawImage(im, 0, 0, 512, 512) // Draw the challenge image onto the canvas
        var data = ctx.getImageData(0, 0, 512, 512).data;
        for (var i = 0, n = data.length; i < n; i += 4) { // Add all of the image's pixel data to the `pixels` array
            pixels.push(data[i].toString(16));
        }
        for(var j=0; j<246; j+=5) { // Loop over every possible shade
            // Print the shade being looked for, and the index of where that shade appears in the image.
            // The shade with the index of -1 is the one that appears nowhere in the image
            // 50:-1 is printed, signifying the first byte of the color gray is 50. Repeat this 3 times
            // to get the flag, 505050.
            console.log(j.toString(16) + ':' + pixels.indexOf(j.toString(16))); 
        }
    }, 100);
</script>