Dynamic Flash

Somewhat in preparation for my joining Yahoo! later this month, I have been familiarising myself with the YUI Library, using it to build a small internal application that we need at Featurecreep.

One of the things this application needs to do is communicate with our SiteServer application using its XML API. Inevitably there were some issues, and having quickly tired of clicking my way though numerous alert() windows, I thought I’d take the YUI Logger component for a spin.

Unfortunately, no sooner had I integrated this into my mini application (a simple matter of including a few external JS files and adding 2 lines of code) than I hit a show-stopper of a problem: the YUI logger didn’t attempt to escape any of the big 5 entities (<, >, &, " and ') before using innerHTML to inject the message into the logger entry list. This meant that Firefox treated my XML data as HTML elements it couldn’t understand and silently skipped them, rendering my XML data unreadable. Bummer.

Never one to be defeated, I rolled up my sleeves and got stuck into the logger.js file. I needed to catch the message and replace the entities as the HTML string that will be injected into the document is being built. This is being done on lines 2024 to 2034 (or 1012 to 1017 if your line breaks aren’t messed up like mine are):

[js] var output = ““+label+” ” + totalTime + “ms (+” + elapsedTime + “) ” + localTime + “: ” + sourceAndDetail + “: ” + verboseOutput + entry.msg; [/js]

Now, it’s only actually necessary to encode two of the big 5 entities for the browser to show us the proper information, so all we have to do is change the last line of that statement to read:

[js] entry.msg.replace(/&/g, “&”).replace(/</g, “<”); [/js]

A small change, but all of a sudden I can log messages that contain HTML or XML code, or any message that contains the encoded characters. Hopefully this’ll get incorporated into the main YUI Library, but in the meantime feel free to download my modified logger.js files (logger.js, logger-min.js and logger-debug.js).