Obfuscating JavaScript with zero-width characters - pros and cons?

Question

This comes from comments on a question on StackOverflow about JavaScript Variables: Why aren't ◎ܫ◎ and ☺ valid JavaScript variable names?

JavaScript accepts zero-width characters as valid variable names, for example all three of these variables have different names but are visually identical:

var ab, /* ab */
    a‍b, /* a‍b */
    a‌b; /* a‌b */

Here's a JSFiddle example of the above three variables in use.

What are the pros and cons of doing this as an obfuscation technique for JavaScript (and other supporting languages)?

Answer 1

Well, in your own programs, it's probably fine. But in a corporate setting its a maintenence nightmare without extremely good documentation and/or team continuity. Neither of which seems all that common in my experience.

I think a more general question might be, "are obfuscation techniques really all that useful?" I can understand minify for page loading purposes. But hiding source doesn't seem to make sense. You are either thinking you have some clever, never done before, algorithm. If that's the case, maybe JS isn't the langauge for it since there's really no way to completely hide it. Or you are trying to be trixsy and attempt some security through obscurity, generally a Bad Idea.

Answer 2

A big con is posed in the following Questions:

• Which JavaScript-Interpreters break when confronted with such code?
• Is this acceptable?

A simple normal Obfuscator should yield acceptibly obtuse code without breaking some JavaScript-Interpreters.

If one really wants to work with zero-width characters in variable names, it would be included in the Code-Obfuscation process (The resulting js-File should only be loaded after a Browser-Version-Check.). This way the developer does not have to deal with zero-width characters in the original source code.

Answer 3

Deobfuscating variable names with zero-width characters is as easy as renaming variables. That's something you'd do anyway as part of the deobfuscation process, as you infer the intent behind the variables and give them meaningful names. So this technique might at most prompt the reader to make an initial renaming pass. The additional deobfuscation cost is negligible. It's not worth it, there's no advantage to a, b, c, …

Answer 4

This also breaks some beautifers (but not all). For example, running your code through JS Beautifier:

   var ab = "Hello, world!",
       a‍ b = "Completely different string!",
       a‌ b = "Yet another completely different string!";

document.getElementById('result1').innerHTML = ab;
document.getElementById('result2').innerHTML = a‍ b;
document.getElementById('result3').innerHTML = a‌ b;

(Note the spaces in between "a" and "b".)

You could argue that this is a pro and a con. Depending on exactly how confusing you make the code, it may be even more confusing to see random spaces being injected. On the other hand, it also alerts the reader that something is definitely up.