#jsfuck

Introducing an awful, cursed monstrosity that somehow spawned because people weren't satisfied with another language that a lot of people really love to hate on but is actually pretty alright... and JSFuck.

JSFuck

Everyone complains that JavaScript has too much going on. null *and* undefined? == and ===? where does it end? That's why I decided to thanos my keyboard so it only had 6 characters left. And it's still probably more usable than angular.js

C++

C is a highly performant, minimal language, that can do almost anything you put it to. It's often described as packing everything you need, and nothing you don't. C++ is not that language.

I think we should all take a moment to appreciate JSFuck, Martin Kleppe’s method by which you can write arbitrary javascript code using only the six characters [, ], (, ), !, and +.

How it works:

Basics:

Because we have [], we have the empty array and the ability to index things with other things. We can immediately construct undefined by [][[]].

! turns anything into a boolean. So ![] is false, and !![] is true.

+, used as a unary operator, casts anything to a number. So +[] is 0, and +!![] is 1. Of course, we also have + as a binary operator, so you can get any other number just be chaining - 5 is +!![]+!![]+!![]+!![]+!![], for example.

Adding an empty array to something turns it into a string, because javascript is terrible. So since ![] is false, ![] + [] is the string ‘false’.

This means we can make individual letters:  (![] + [])[+[]] becomes ‘false’[0] becomes ‘f’.

Building an alphabet:

At this point everything becomes about getting more letters. We’ve already built false, true, and undefined, as well as all integers, so we can build any string as long as it only uses characters from ‘0123456789adefilnrstu’.

Characters so far: ‘0123456789adefilnrstu’

Those characters are enough to make ‘find’:  (![]+[])[+[]] + ([][[]]+[])[+!![]+!![]+!![]+!![]+!![]] + ([][[]]+[])[+!![]] + ([][[]]+[])[+!![]+!![]]

Well, [].find is a method of arrays, so [][”find”]+[] is a string that starts with “function find() {” (there’s more to this string, but in some environments like firefox there are newlines and in some there aren’t, so we can’t reliably get the rest).

Characters so far: ' ()0123456789acdefilnorstu{'

Now we can spell “constructor”, so we do ([]+[])["constructor"] to get the String type; String[”name”] is the string “String”.

Characters so far: ' ()0123456789Sacdefgilnorstu{'

The S and g were all we were missing for toString. Number.toString takes a base, so e.g. 17[”toString”](36) returns 17 in base 36, which is “h”. We can do this for every number 10-36 to get all lowercase letters.

Characters so far: ' ()0123456789Sabcdefghijklmnopqrstuvwxyz{'

Going Global:

[][”find”][”constructor”] is Function, the function type. Applied to a string, this yields a function whose code is that string. This means that we can execute any javascript as long as we can write it. In particular, we already have enough letters to call Function(”return this”)(). This gives us the global object (called ‘global’ in node, ‘window’ in the browser), which means we can now call any global function if we can spell it. We’re nearly there!

Finishing the set:

Finally, we can now access global[”escape”] and global[”unescape”]. escape(”(”) gives us “%28” and thus the % sign, and now we’re done: we can make any hex number, prefix it with %, and call unescape on it. For example, unescape(”%27″) is a single quote, unescape(”%7e”) is a tilde, and so forth. Every single ascii character is now available to us.

Characters so far: ALL

Putting it together 

So now, given any javascript, you can compile it into an enormous, unreadable mass of ()!+[]s! All you have to do is encode it grossly, wrap it in a Function() call, and call the resulting function!

In practice, there are lots of optimizations - you don’t have to build the full unescape sequence to get ‘N’, for example, because +[![]] is NaN so “N” is the relatively short (+[![]]+[])[+![]].

For reference, alert(0) looks like this:

[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]][([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]]((![]+[])[+!+[]]+(![]+[])[!+[]+!+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]+(!![]+[])[+[]]+(![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]]+[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]])()

and alert(”Hello, world!”) is 18,616 characters long.

If JavaScript is not chaotic enough for you, this classic library (released 07-05-09 and available here via the Wayback Machine) adds the goto statement, which sadly was not included in JS’s official specification.

Martin Kleppe is best known as the creator of JSFuck, an esoteric coding style of JavaScript, allowing one to write fully functional JS with just six punctuation symbols. While it is similar in style to brainfuck, JSFuck is not an invented language but a discovered one; amazingly, it is native to JS. This means it is runnable as JavaScript without additional code to interpret the symbols or translate them into some other system. Kleppe's other projects deal with code that functions on multiple levels simultaneously; programs that use their own code as display, or self-referential polyglots that contain markup, script, and image as a single text calling itself in different contexts.

» How did you first discover the weird features of JavaScript that make JSFuck possible? Was there a moment when you realized you could write essentially any JavaScript code in just the tiny set of JSFuck characters? 

This happened in 2012 when a friend showed me a Tweet with some cryptic JavaScript. There were no Latin letter involved but it was possible to execute the code and it resulted in a simple word. Nothing really fancy when I compare it to what is possible today but at that time I was super impressed! And it made me curious. 

So I started to walk through the code step by step (or better: char by char) and already learned a lot about type coercion in JavaScript. The basic idea was to convert primitive data types to a string (eg: true + [] == “true”) and then pull out single characters (eg: “t” from “true”[0]). These characters then can be joined together to generate new words. 

Then the question came up, if it is possible to get more than just a handful characters by playing this kind of Scrabble game. The solution was to access and call methods that generate new strings.

» The amazing thing about JSFuck is that it's all already there in JavaScript – you showed us a new approach to writing JS, rather than constructing a language artificially. What is it about JavaScript as a language that makes JSFuck possible? How/why did JavaScript end up this way? 

Some people say that JavaScript is a bad programming language and poorly designed. But I wouldn’t agree. In my opinion it was designed with a lot of freedom in mind – which is a good thing. It allows you to go in different directions and seek your own style. There were no strict types or rules how to use it, and many people came up with their own idea about how to solve problems. It is like a mutation or evolution that is unveiling new aspects. In my work, I always try to break a given limit. And a way to achieve this is by digging deeper and deeper to explore new areas that we not have thought of.

Two Aurebesh scripts

» Aurebesh.js extends the JSFuck approach, simplifying some of the combinations of symbols into letters from a list of alphabets. The scripts have very different aesthetics based on the alphabet, some of which look more obfuscated than others, but it’s still pretty abstract – from what I can tell, it’s using the letters to represent JS atomic parts which are then constructed into JS commands. Could you tell me a bit about why you went this direction?

Aesthetic was definitely one of the main reasons. Especially the style of other writing systems that we are not used to. I was always fascinated by words written in foreign alphabets, because you look at them and know that there is a meaning behind but you can not even read it. In school I learned Russian first and then English which was way easier for me, because the latin alphabet was something I was used to.

This and vodka were the reasons, why I first started the ЗВЕЗДА СМЕРТИ (Death Star) project. Later I was invited to JSConf.asia where I presented the Matrix intro sequence written with Asian characters only. Another conference led me to Tel Aviv that made me think, how JavaScript would look like when written in Hebrew from right to left.

The term “character” from the Greek “χαρακτήρ” combines many meanings and also reflects, that symbols has a different aesthetics. Aurebesh.js plays with that fact in a new context and let us translate code written in English into other writing systems.

When you look at these scripts, can you figure their behavior in your head or do you need to translate them into regular old javascript to see what they’re actually doing?

I’d love to say: Yes, I can read this code and parse it in my head. – But to be honest: I can’t! At least, it would need pen, paper and a couple of minutes to solve it. Like a crossword or sudoku puzzle. That’s why I build little helpers to do that for me.

Kleppe presenting at JSConf.eu 2014

» Could you explain a bit about the animated quines (Hello World 1k etc) and how this style developed? The animated quality adds a great immediacy to the minimized quine; the code shows us what it's doing even while we're reading it, giving a way past its obfuscation. 

Let’s explain the term “quine” first: A quine is a computer program which takes no input and produces a copy of its own source code as its only output. A simple one in ES6 is:

(Q=a=>alert('(Q='+Q+')()'))()

Quines are dealing with recursion as a topic, because when you execute the result, you will see the same result again and again. The /world was the first animated quine I did and it presented it at JSConf.eu in 2013. It is based on the Qlobe program by the incredible Yusuke Endoh. I saw that years ago and was so fascinated by the spinning world inside of code, that I wanted to do that in the browser. I decided to not read the Ruby source code but figure out everything at my one. It turned out that it was really a long and hard way to go but I learned more than ever before.

In the end it was shorter (exactly 1024 bytes) than the original and also included code highlighting. The feedback on this was overwhelming and I decided to do more. My second animated quine was Mandelcode – code shaped in the form of a Mandelbrot and once you click, it zooms into the fractal. After some time I started to evolve the topic and created the Matrix 雨 quine using Asian characters only and recently VOID where invisible code was used to hide the program itself.

» Please tell me about your new incept10n.com project

This may look different to what I did before, but in the core, it explores the limits of languages used in the Web, too. Incept10n is a so-called polyglot, a single file written in different languages. In our case the file is an image, a style sheet, a script and a web page – all at the same time. This works, because I manipulated the header section of an JPEG to inject code. When you run it in different contexts it will behave depending on its surrounding.

When you open the page in the web browser, it renders an HTML page. The HTML contains a reference to an external JavaScript pointing to the same file. This will execute it as a script that dynamically writes a CSS link tag. The loaded  file then renders a background image into a section of the page. This is finally the manipulated JPG, showing an image of the movie Inception.