Detecting global variable leaks
I have recently stumbled upon a blog post by Remy Sharp on detecting global variable leaks. As you probably know, Javascript is notorious at making such leaks way too easy. The problem is mainly with undeclared assignments which result in global variable declarations when variables are not found in the scope chain.
(function(){ var x = 1; // <== accidentally changed "," to ";" y = 2; // <== `y` is now a global variable })();
To be more precise, undeclared assignment actually results in global property assignment, not global variable declaration. The difference between two is rather subtle: variable declaration creates non-deletable property of a global object, whereas explicit or implicit property assignment creates deletable one. Another peculiarity can be observed in IE, where global property assignment is disallowed if there’s an element in a document with the same-named ID or NAME value. Global variable declaration, on the other hand, quietly overwrites existing property in cases like this.
Remy solves the problem with a bookmarklet that creates a blank context (essentially a window in an empty iframe), then uses that clean context to get the difference with the main one. The list of found variables is dumped into a console.
It’s worth mentioning that JSLint already allows detecting undeclared assignments, but JSLint can hurt feelings so we won’t use it. Well, actually JSLint performs so many validations, that it’s not always possible to detect undeclared assignments in huge scripts of legacy applications (like the one I wanted to examine). Running a test such as in this bookmarklet can be “applied on” any script.
The bookmarklet worked like a charm, but as soon as I plugged it into one of our applications, I was greeted with dozens of Prototype and Scriptaculous -related methods. On top of those, there were few google analytics and Mozilla -specific ones. Unfortunately, the original code was obfuscated and almost unreadable so I reproduced it from the scratch, this time making it possible to toggle certain property sets on and off. These property sets are – Prototype, Scriptaculous, Mozilla, Google Analytics and Firebug ones. The code is structured in such way that it should be easy to augment it with additional sets.
In the end, I found few leaks in one of our applications and even one in firebug (now fixed).
As usual, the bookmarklet and its source are on github.
Feel free to fork it.
Edit [9/5/2009]
Clarified global variable declaration vs. global property assignment (thanks to Garrett Smith)
Mats said:
#Did this a while back, http://mankz.com/code/globalcheck.htm, where you can analyze your own scripts etc.
Also created a Selenium plugin for automating the leak detection.
http://mankzblog.wordpress.com/2009/02/11/selenium-core-extension-for-finding-unexpected-global-variables/
kangax (article author) said:
#Mats,
last time I looked at your FrameworkScanner, it wasn’t possible to examine non-public-url scripts (such as the ones in our intranet app or an app that’s in private testing). Even if I could have pasted script contents into your scanner, I might not be able to do so for confidentiality reasons. It must also be inconvenient to check each script individually, rather than click one button at any time after application has been initialized.
Other than that, great job. I really liked framework analysis presented there.
Aaron said:
#This is great. Was just thinking about doing something like this a few days ago. Thanks!
@F1LT3R said:
#Ah nice! I suppose if you have written a long piece of code very quickly, or are starting work on someone else’s code for the first time, this would be an very useful little tool indeed. May give this a whirl on the code at my current contract and see how things look. Thanks!
T said:
#Ah, dumb question – how do you get a working ‘console’ to dump this to?
kangax (article author) said:
#Aaron, @F1LT3R, Thanks. I’m glad you found it useful.
T, this script uses
console.logandconsole.groupfor list dumping.consoleis usually present in Firefox (with Firebug installed and enabled) and Safari (with “developer tools” enabled). You can also define your ownconsoleif you wish and itslogandgroupmethods will automatically be used by the bookmarklet.Predrag Stojadinovic said:
#Ahm, what is the bookmarklet supposed to do? I’m using FF 3.5 and when i click it it just shows me the JS code. I expected it to detecting global variable leaks and show me the result in the console?
kangax (article author) said:
#@Predrag
I changed the link to include actual code. It was pointing to github’s source before.
Predrag Stojadinovic said:
#Awesome! THANKS! :)
Shuo Geng said:
#This is a pretty good idea to let yourself be aware if you pollute the global namespace. I have put it to my utility toolkit. Nice work!
Zach Leatherman said:
#Tried this on my stuff, and found a leak in jQuery! But looks like it’s already been reported and fixed for 1.3.3. Very useful!
kangax (article author) said:
#@Zach Leatherman
Nice! Glad it helped :)