How I Cheated Mozilla's New HTML5 Game - Browser Quest

Disclaimer: I'm not advocating cheating as a good thing. I'm not insinuating that Mozilla's code was somehow lacking (actually the code is pretty kick ass). Nor am I trying to pretend I'm some super hacker. Rather - I thought I'd share how I modified Mozilla's new game to cheat as a way of demonstrating things you have to look out for when coding HTML5-based games. Also - my very first programming experience was pretty similar. I had to learn hex so I could edit my Bard's Tale game saves via a disk editor on my Apple 2e. I figured a legacy as rich as that deserves a rebirth. ;)

So first - some context. Yesterday Mozilla announced the launch of Browser Quest. This is a multiplayer online roll playing game. The mechanics aren't terribly complex (non-gamers should give it a try), but it is a pretty cool example of what can be done with HTML5.

Simply connect to the site, enter a name, cross your fingers (it is a bit overwhelmed right now), and start playing.

What's really cool is that Mozilla has also open sourced the entire game - both the front end client and back-end technology. You can peruse the code here: https://github.com/mozilla/BrowserQuest

I played it for a bit (research!) and noticed right away that they were using LocalStorage. I've got a Chrome extension (LocalStorage Monitor) that highlights when a site is using LocalStorage and lets me examine the contents quickly. Here's what I saw on the site:

First thing I noticed - my inventory was stored in LocalStorage. That meant I could modify my inventory. After looking at the code, I realized they had a simple list of swords and armors that were ranked by a simple numeric index. If you gave yourself the top weapon/armor, then you would be set.

So step one was to pop into console and copy out the value:

copy(localStorage["data"])

This copied the value (a JSON string) into my clipboard. I pasted it into notepad, and simply edited the two values:

{"hasAlreadyPlayed":true,"player":{"name":"Romana","weapon":"goldensword","armor":"goldenarmor","image":"data:image/png;base64,deleted"},"achievements":{"unlocked":[2,5,11,6],"ratCount":3,"skeletonCount":1,"totalKills":5,"totalDmg":11,"totalRevives":0}} 

 I took the string, went back into console, and did...

localStorage["data"] = (pasted my string here) 

Reloaded the page, and voila - I'm an Epic Avenger of Mighty Awesomeness:

Just to repeat - I'm not trying to diminish anything Mozilla did here. It's a great demo. Just don't forget that localStorage, like any client data, is inherently insecure.

p.s. Wondering why you see a 5Tagger character and Romana? Just different tests, that's all.