If you want to try it yourself, you can download it here:  jspuzzle on github

For the challenge, you were given a html page that presented you with a drag and drop form of code were specific parts of the code were blanked out and you must provide the form with the correct sequence of options from the provided bank of keywords/functions/strings. Once you were able to make the code execute and produce an alert with the value “1”, the sha1 generated from the submitted options would represent the correct flag for the challenge.

What you have to realize here is that Javascript has a lot of crazy syntax that you can pull off and the difficult part is trying to understand what words from the word bank would produce runnable code.

The solution for this challenge ended up being:

"use strict";

({ "function" : function() {
  this[ "null" ] = (new Function( "return" + "/*^_^*/" + "this" ))();
  var pattern = "^[w]$";
  var r = new RegExp( pattern );
  this[ r[ "exec" ]( pattern ) ][ "alert" ]( 1 );
}})[ "Function" [ "toLowerCase" ]() ]();

Which is just a round-about way of doing “alert(1)”

So lets break this down a little.

The first part of the code: “use strict;” is “a way to opt in to a restricted variant of JavaScript” (strict mode). Now this code will still run without that line so we can conclude that it was just there as another step for you :D

The main function part was pretty cool:

({ "function" : function() {
  this[ "null" ] = (new Function( "return" + "/*^_^*/" + "this" ))();
  var pattern = "^[w]$";
  var r = new RegExp( pattern );
  this[ r[ "exec" ]( pattern ) ][ "alert" ]( 1 );
}})

An important thing that you must realize for this challenge is that Javascript indexes all its fields and functions in a key pair mapping. So something like console.log() can be rewritten as console['log']()

So when we do ({“key”: value}) we are creating a Javascript Object which the last part of the code will actually access. So in this case we are creating js object with mapping “function” to an actual callable function.

this["null"]

will set the “null” field of the current function context, or this, to be the return value of the function created on the left side of the assignment.

new Function( "return" + "/*^_^*/" + "this" )

Javascript will create a new Function object by parsing the code given to the constructor, in this case our code will look like return this, which simply returns the current context of the function.

So we now have our null field of this referencing itself (what a great waste of time lol). The next two lines will create a Regex Javascript object with "^[w]$" which will only match the letter “w” (^ means that we start matching from the very beginning of the string and $ means we want the string to end with what we are matching. Since we are only matching the letter [w], “w” is the only possible string that would satisfy this regex).

r[ "exec" ]( pattern )

the code will now go to our r RegExp object and get the “exec” function (brackets in JS work similar to how they do in Python) and try to match our pattern string with “w”. Since “^[w]$” != “w”, exec will return null. Oh wait! Remember, we set this[“null”] to be a function that returns “this” right? So since exec returns null we have

this[null]["alert"](1)

which is the same as this“alert which is the same as alert(1)! Sweet :D

For the last part,

[ "Function" [ "toLowerCase" ]() ]();

we can rewrite it as

["Function".toLowerCase()]()

which is the same as

["function"]()

and since this part is acting on the Object that we had in the previous part, we grab the function whose key is “function” (the alert function) and the parenthesis will execute this function.

Granted I was doing this with hindsight, it is still a simple, fun challenge to think differently about Javascript :D