Twitter: raymondcamden

Address: Lafayette, LA, USA

How I cheated Mozilla's new HTML5 Game

03-28-2012 21,207 views HTML5, Video Games 29 Comments

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:

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:

view plain print about

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

view plain print about

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

view plain print about
1localStorage["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.


These comments will soon be imported into Disqus. To add a comment, use Disqus above.
  • SuperAlly #
    Commented on 03-28-2012 at 1: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!
  • Commented on 03-28-2012 at 1:35 PM
    Note to self, if you run across an Epic Avenger named Romana - RUN!
  • Commented on 03-28-2012 at 1: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.
  • Commented on 03-28-2012 at 1: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.
  • SuperAlly #
    Commented on 03-28-2012 at 2: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.
  • Jeromy #
    Commented on 03-29-2012 at 1: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...
  • Commented on 03-30-2012 at 6:29 AM
    I knew of Wizardry, but never played it much. That's a pretty cool cheat though.
  • Commented on 03-30-2012 at 7:59 AM
    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.
  • Commented on 03-30-2012 at 8:05 AM
    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.
  • Commented on 03-30-2012 at 3:01 PM
    Shame the IRS doesn't use local storage for tax refund amounts.
  • Commented on 03-31-2012 at 6:47 AM
    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.
  • Troll #
    Commented on 03-31-2012 at 7:51 AM
    Waw, you cheated a proof of concept! Teh WINRAR is you!
  • Commented on 03-31-2012 at 8:18 AM
    @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? ;)
  • Ryan #
    Commented on 03-31-2012 at 9:28 AM
    All I thought of was the program winrar. It took me a second to figure out what they meant.
  • Commented on 03-31-2012 at 9:31 AM
    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. ;)
  • javamonk #
    Commented on 03-31-2012 at 11:32 AM
    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
  • Commented on 03-31-2012 at 1:08 PM
    This just in: Google maps 8 bit version.

    Click on the "Quest" button in the upper right-hand corner.
  • Commented on 03-31-2012 at 2:03 PM
    OMG - Awesome.
  • none #
    Commented on 03-31-2012 at 10:18 PM
    what is the other meaning of Winrar besides the file compressing utility?
  • Commented on 04-01-2012 at 12:59 PM
    No idea - keep hoping the Troll will respond. ;)
  • Commented on 04-02-2012 at 1:51 PM
    Ray requested I post this. Turns out you can be any sprite in the game.
  • dudu #
    Commented on 04-18-2013 at 8:42 PM
    but isnt that just for grafics and doesn't affect your attack/defense in the game?
  • Commented on 04-18-2013 at 8:46 PM
    I think it impacted weapon strength. Been a while.
  • LOL #
    Commented on 04-24-2013 at 4:36 AM
    The game is easy it self, took only 15mins to get the best gear, why cheat..
  • Commented on 04-24-2013 at 5:46 AM
    For fun. ;)
  • eric #
    Commented on 05-15-2014 at 11:42 AM
    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.
  • Commented on 05-15-2014 at 11:46 AM
    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. ;)
  • Commented on 09-25-2014 at 4:21 AM
    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.
  • Commented on 09-25-2014 at 4:35 PM
    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. ;)