How the Chrome Dev Tools Got Me an Awesome License Plate

nbsp_license_plate

One of my favorite places in the world is the Udvar-Hazy Air and Space Museum (which is only about 15 minutes from my house), so when I saw that I could help support the Smithsonian with a custom license plate, I figured I’d give it a go. While I was at it, I decided to see if I could figure something out that would also symbolize one of my other passions: web development. It occurred to me that the perfect way to bring them both together would be the tag “&nbsp” which is the HTML entity code for “space” (technically, it’s “ ” but you can’t get a semicolon on a license plate, and most browsers don’t require it, anyway).

When I checked the plate online, I was both pleased and surprised to find that it was available, but after I started the registration and purchase process, I found out why. The DMV web application does not escape user input, so the character sequence “&nbsp” is always displayed as a literal space. I hoped I might still get away with it, however when I tried to submit the order confirmation form, I got a server-side error message explaining that the plate ” ” (empty space) was invalid.

Being the determined hacker that I am, I initially saved the source from the confirmation page, fixed the error by turning “&nbsp” into “&nbsp” (the character code for ampersand followed by “nbsp” — the proper way to escape user input in this case), and started working on tricking the DMV’s servers into believing that the form I was submitting actually came from them. But then it occurred to me that I could simply fix the DMV’s mistake using the WebKit Web Inspector. I opened up the awesome Chrome Dev Tools, made the change in the live page, and the form submitted perfectly. About two weeks later, my brand new plates arrived.

Thanks to the WebKit Web Inspector, the Chrome Dev Tools, and the openness and transparency of the web, I’m now rolling through Northern Virginia representing all my space-enthusiast and web-developer homies.