How does this obfuscated JavaScript work?

by

Foreword: I beautified and annotated the code extensively at http://jsfiddle.net/WZXYr/2/

Consider the outermost layer:

eval(z = '...');

A code string is stored in the variable z. The assignment operator returns the value assigned, so the code string also is passed as an argument into eval.

The code string z runs inside of eval. The code is extremely obtuse, even when cleaned up, but it seems to:

  1. Parse a string of base-36 numbers, delineated by the character 4.
  2. Populate a map of values, using the global variables e, x, and y to hold map state. Map state is, in part, a function of the current second on the wall clock (new Date / 1e3).
  3. Using the map values, the code generates an output string, p
    • the code uses p += " *#"[index] to decide whether to use a space, asterisk, or hash mark, where index is actually e[x++] + e[x++] (as said above, e and x are responsible for map state)
    • if the index is larger than the length of " *#", there is fallback code that populates the output p with characters from z. Inner characters are populated with animation characters, while outer characters are pulled from z.

At the end of the code, there is a call to setTimeout(z), which asynchronously evaluates the code string z. This repeat invocation of z allows the code to loop.

Simple example:

Here’s a super-simple version (http://jsfiddle.net/5QXn8/):

eval(z='p="<"+"pre>";for(i=0;i<172;++i)if(i > 62 && i < 67)p+="!---"[~~(new Date/1e2 + i)%4];else p += ("eval(z=\'" + z + "\')")[i];document.body.innerHTML = p;setTimeout(z)')

  1. The for loop adds each character to the output string p (the string is 172 characters long):

    for(i=0;i<172;++i)

  2. The inner conditional decides if we’re on a character between position 62 to 67, which are the animated characters:

    if(i > 62 && i < 67)

  3. If we are, then print out !---, shifted based on the tenth of the second wall-clock value. This provides the animation effect.

    p+="!---"[~~(new Date/1e2 + i)%4]

    (All the nastiness around new Date is really just there to transform a date value into a number between 0 and 3.)

  4. Otherwise, if we’re not on an animated character, then print the index-i character from the string defined by

    "eval(z='" + z + "')"

    That is, the code string z surrounded by eval(' and ').

  5. Finally, output the string and use setTimeout to queue up another execution of z:

    document.body.innerHTML = p;setTimeout(z)

Note that my final output isn’t quite right — I haven’t accounted for the backslashes toward the end — but it should still give you a pretty good idea of how the technique works generally.

Leave a Comment