Solution to my programming puzzle

3 May, 2012 § 4 Comments

Two days ago I posted a programming puzzle that I made. This post will cover how I made it and describe how to solve the puzzle. Don’t read ahead if you still want to solve the puzzle first.

<spoiler alert>

Spoilers are below, stop reading now if you still want to try the puzzle

The puzzle starts out by showing a canvas with text drawn on it. Some of the letters of the text are missing and the goal is to figure out how to fill in the blanks. A short perusal through the source code of the webpage doesn’t show anything that could be done here, but a glance at the linked stylesheet will show some JavaScript hidden in some CSS generated content.

In the ::before pseudo element, there is a content string that creates a variable containing a hexadecimal-encoded string. When the string is converted to ASCII, it consists of many exclamation points and other nonsensical characters. I created this string by using the Firefox Scratchpad and writing a function that will increment the character code of each character in a string by one. I then used the Free Javascript Obfuscator to convert the string to its hexadecimal encoding.

Calling the _0x1k() function with this string will enumerate the characters of the string, decrementing their character code by one, and painting the resultant on the canvas to reveal the missing letters. This completes step 1, and reveals the jaws+FXPUZZLE@ email address, as well as uncovering a new step 2.

let f = ['\x6B\x21\x78\x74\x21\x21\x59\x51\x56\x5B\x5B\x4D\x46\x21\x6E\x21\x21\x6A\x6D\x6D\x21\x2F\x64\x70\x21'][0];

Step 2 asks for a Proxy object to be created and passed to a verify() function. The Proxy API is a new feature of EcmaScript 6 and was introduced with Firefox 4. From invokeddynamic’s Proxy tutorial:

The Proxy API enables the creation of dynamic proxies in Javascript. Dynamic proxies are useful for writing generic object or function wrappers or for creating virtual object abstractions. To avoid any confusion: these proxies have nothing to do with web proxy servers.

A proper Proxy should implement all the traps, but this puzzle only required people to implement the get trap. The Proxy required for step 2 needed to return the requested property name reversed. The below JavaScript will create a Proxy that meets this requirement:

  get: function(pxy, name){ return name.split('').reverse().join(''); }

Running this code will solve step 2.

The Proxy object is verified by checking its functionality against a few property names (firefox, thunderbird, and mozilla), and then the _0x1k() function is called with pxy[str] where pxy is the Proxy object and str is the character-code shifted reverse of jaws+WINNERWINNER. The canvas is now cleared by assigning a width to the canvas element and the new email address is drawn.

There is a third bonus step to find the subject of the email. This step requires WebGL support on your machine, which might not work on older graphics drivers (hence the bonus implication to it ;)). Using the Firefox Inspector and its 3D mode, the row of black boxes can be tilted (as implied by the hint on the page) to show the number 1337.

To create this stack of DOM elements, I used Tilt This, which is a really cool tool to create three-dimensional images using DOM elements that can be seen with the 3D mode of the Firefox Inspector (or by using the Firefox addon named Tilt).

</spoiler alert>

I hope you enjoyed playing with the puzzle, I had a lot of fun making it. I’ve heard from some people that it was a little too easy and I’d love to make more puzzles like this in the future. Maybe the next puzzle should be to create a programming puzzle? 😉

Tagged: , ,

§ 4 Responses to Solution to my programming puzzle

  • msiem says:

    My solution was to throw the JS code of the page into and reverse-energieer it 😉

  • Benoit Jacob says:

    WebGL _is_ supported on every graphics card that’s been sold in the past 5 years, including onboard integrated graphics, but you need recent (less than 2 year old) graphics drivers.

    • msujaws says:

      Thanks Benoit, I’ve updated the post to be more correct regarding WebGL support 🙂

  • Tim says:

    saw the tilt topic and everything, but unfortunately my hack “var obj = { firefox: ‘xoferif’, thunderbird: ‘dribrednuht’, mozilla: ‘allizom’ }; verify(obj);” didn’t cut it. Nice game.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

What’s this?

You are currently reading Solution to my programming puzzle at JAWS.