How I cheated Mozilla's new HTML5 Game

This post is more than 2 years old.

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.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by SuperAlly posted on 3/28/2012 at 10:34 PM

Nice post Ray, thanks.
Although mostly I'm put out with you for mentioning Bard's Tale. Now I'm missing my favourite game of all time.
And my Commodore 64.

And now my youth. Thanks a LOT Ray!

Comment 2 by Phillip Senn posted on 3/28/2012 at 10:35 PM

Note to self, if you run across an Epic Avenger named Romana - RUN!

Comment 3 by Doug Hughes posted on 3/28/2012 at 10:37 PM

It strikes me that perhaps they should have stored the local storage value in an encrypted format, rather the plain text. I also suppose that there's some sort of server-side technology behind this, which makes me wonder why they don't store this type of detail server side instead. Having never played the game myself, there's probably some good reason for it.

Comment 4 by Raymond Camden posted on 3/28/2012 at 10:39 PM

@SuperAlly: You can play Bard's Tale on iOS! It is a new game, but they bundle the old game. I haven't bought it myself - but I plan too.

@Doug: To be honest, I don't think I would have done it any better. There is no player on player fighting, so my cheating only ruined the game for myself. It didn't really do anything else.

Comment 5 by SuperAlly posted on 3/28/2012 at 11:04 PM

I was looking at the iOS version a little while back, but decided against it. Didn't notice the original is bundled in, I'm in for sure now.

There goes those pesky upcoming work deadlines.

Comment 6 by Jeromy posted on 3/29/2012 at 10:38 PM

I can't even estimate how many hours my brother and I <strike>wasted</strike> invested in Bard's Tale and Wizardry. Wizardry had a slightly-lower tech cheat: identify item 10 (you could only carry 9 or something like that) would inexplicably award like 1,000,000 experience points.
Back to work...

Comment 7 by Raymond Camden posted on 3/30/2012 at 3:29 PM

I knew of Wizardry, but never played it much. That's a pretty cool cheat though.

Comment 8 by Dan posted on 3/30/2012 at 4:59 PM

Hi Raymond,
Sounds like fun. I'm wondering if you could clarify and details the steps involved for these comments please:
"So step one was to pop into console and copy out the value:
copy(localStorage["data"]) "

What os are you running? By console I take it you mean command line? Thanks.

Comment 9 by Raymond Camden posted on 3/30/2012 at 5:05 PM

That was in the Firebug console - but it should work the same in the Chrome console as well. Not the command line at all. If you've never used the console in your browser, definitely look into it.

Comment 10 by Emmet posted on 3/31/2012 at 12:01 AM

Shame the IRS doesn't use local storage for tax refund amounts.

Comment 11 by Francy posted on 3/31/2012 at 3:47 PM

Thanks for the post! I am currently writing a paper (in university) about "Cheating in HTML5 games and how to prevent it (or at least try to make it harder)". I also thought about local storage and web worker, but firebug/chrome inspector, doesnt make that really easy. Server-side evaluation may be the only secure way.

Comment 12 by Troll posted on 3/31/2012 at 4:51 PM

Waw, you cheated a proof of concept! Teh WINRAR is you!

Comment 13 by Raymond Camden posted on 3/31/2012 at 5:18 PM

@Troll: Um... yeah. Obviously you didn't bother reading the post. I did say it was NOT a real hack, NOT a sign of my intelligence, and instead just a gentle reminder about localStorage. But yeah - I am the WINRAR! (Am I the only one who read that comment and thought of WINRAR the zip/unzip program? ;)

Comment 14 by Ryan posted on 3/31/2012 at 6:28 PM

All I thought of was the program winrar. It took me a second to figure out what they meant.

Comment 15 by Raymond Camden posted on 3/31/2012 at 6:31 PM

I get a troll about once a year. It's weird - and I think it's the same person. Whoever they are - they troll SUPER slow. Makes it kinda fun. ;)

Comment 16 by javamonk posted on 3/31/2012 at 8:32 PM

Thanks for the post! I think its great that we are showing "both" sides HTML5. It lets us know what to watch out for when creating similar games

Comment 17 by Phillip Senn posted on 3/31/2012 at 10:08 PM

This just in: Google maps 8 bit version.
http://www.youtube.com/watc...

Click on the "Quest" button in the upper right-hand corner.

Comment 18 by Raymond Camden posted on 3/31/2012 at 11:03 PM

OMG - Awesome.

Comment 19 by none posted on 4/1/2012 at 7:18 AM

what is the other meaning of Winrar besides the file compressing utility?

Comment 20 by Raymond Camden posted on 4/1/2012 at 9:59 PM

No idea - keep hoping the Troll will respond. ;)

Comment 21 by dev posted on 4/2/2012 at 10:51 PM

Ray requested I post this. Turns out you can be any sprite in the game.
http://dev.bootstraponline....

Comment 22 by dudu posted on 4/19/2013 at 5:42 AM

but isnt that just for grafics and doesn't affect your attack/defense in the game?

Comment 23 by Raymond Camden posted on 4/19/2013 at 5:46 AM

I think it impacted weapon strength. Been a while.

Comment 24 by LOL posted on 4/24/2013 at 1:36 PM

The game is easy it self, took only 15mins to get the best gear, why cheat..

Comment 25 by Raymond Camden posted on 4/24/2013 at 2:46 PM

For fun. ;)

Comment 26 by eric posted on 5/15/2014 at 8:42 PM

SO my hitta... i appreciate your little hacks but there is some wrong information. FOR ONE, the gold armour you have is not the best armour the platinum is and that only unlocks through PvP tournaments which I believe you said dont exist yet I have proof they do.

Comment 27 by Raymond Camden posted on 5/15/2014 at 8:46 PM

Um, this is article is about a game from two years ago. It is entirely possible the game may have changed a bit since then. ;)

Comment 28 by Alex posted on 9/25/2014 at 1:21 PM

I'm thinking of getting into creating HTML5 games since they apparently are pretty easy to port to mobile devices as well, however the security aspect worries me a bit. Is it generally easy to hack an HTML5 game? I don't want to create a game with a global highscore if people can easily change their points to get on top of it.

Comment 29 by Raymond Camden posted on 9/26/2014 at 1:35 AM

If it is doing stuff client side - then someone can modify it. If you are doing anything server side, then you can have some control at least. It's a trade off I guess. You could always rely on people's honesty. ;)

Comment 30 (In reply to #26) by zarathustra2k1 posted on 3/6/2015 at 11:57 AM

There is currently _no_ PVP in BrowserQuest & 'Gold' is the top-tier weapon/armour config.