Overanalyzed

Hacking Javascript

September 16, 2008 at 10:17 am | In Technology | No Comments
by Chris Davenport

And here I mean “hacking” in the original sense of “making it work”, not “attacking websites”, as it is so commonly misused.

A lot of people don’t know that you can write javascript on the browser’s Address line. That javascript executes in the context of the page, so if you need to do some quick debugging, you can often just throw some script onto the Address line and off you go.

JavaScript is a very nice language, with excellent features such as First-class functions and runtime code evaluation, which means you can actually create a function using the Address line and call it. Or even change a definition, move values into and out of fields, whatever suits your need.

I found this debug script using google http://www.drewnoakes.com/debug.js, though you could do it with just about anything.

javascript:eval('/* Script written by Drew Noakes -- http://drewnoakes.com*/ /* 4 Dec 2006*/ /* the div element used for debug output. created in enableDebug. */ var debugDiv; /* call this function from a script within the document for which to enable debug output */ function enableDebug() { debugDiv = document.createElement("div"); debugDiv.setAttribute("id","debugContent"); debugDiv.setAttribute("style", "display:block; position:absolute; top:7px; right:7px; padding:10px; width:300px; background:#ccc; color:white; border:solid 1px black;"); document.body.appendChild(debugDiv); writeClearLink(); } /* writes the string passed to it to the page */ function writeDebug(message) { if (debugDiv) debugDiv.innerHTML += message + "<br\/>"; } /* writes the value of some code expression. */ /* eg: writeEval("document.location"); // writes "document.location = http://drewnoakes.com" */ function writeEval(code) { writeDebug(code + " = " + eval(code)); } /* writes all of the properties of the object passed to it */ function writeDebugObject(object) { for (property in object) writeDebug(property); } /* clears the debug output. called either manually or by the user clicking the "clear" link in the debug div. */ function clearDebug() { if (debugDiv) { debugDiv.innerHTML = ""; writeClearLink(); } } /* writes a link in the debug div that clears debug output */ function writeClearLink() { writeDebug("<a href=\\"#\\" onclick=\\"clearDebug(); return false;\\">clear</a>"); }');


I know it’s a bit messy, but it’s all written in one line. Which means once you have it copied as one line, you can paste it into the Address of the browser, hit enter, and retroactively add debug facilities to the javascript running inside a page. If your script has a dummy definition for the various writeDebug/writeDebugObject/writeEval functions, and calls them regularly, then when you paste in these new definitions, you’ll get debug output.

Of course, if your script isn’t currently calling debug output functions, you can use javascript:eval("writeDebug(myFunction);") on the Address line, grab the code, change it, and then use another eval to store the new definition.

That’s all temporary. Reload the page and everything’s gone.

This is one reason you should never depend on the javascript in your page to perform validation for you. Anyone who feels like it can change the validation function.