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.
Archived Comments
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!
Note to self, if you run across an Epic Avenger named Romana - RUN!
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.
@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.
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.
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...
I knew of Wizardry, but never played it much. That's a pretty cool cheat though.
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.
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.
Shame the IRS doesn't use local storage for tax refund amounts.
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.
Waw, you cheated a proof of concept! Teh WINRAR is you!
@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? ;)
All I thought of was the program winrar. It took me a second to figure out what they meant.
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. ;)
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
This just in: Google maps 8 bit version.
http://www.youtube.com/watc...
Click on the "Quest" button in the upper right-hand corner.
OMG - Awesome.
what is the other meaning of Winrar besides the file compressing utility?
No idea - keep hoping the Troll will respond. ;)
Ray requested I post this. Turns out you can be any sprite in the game.
http://dev.bootstraponline....
but isnt that just for grafics and doesn't affect your attack/defense in the game?
I think it impacted weapon strength. Been a while.
The game is easy it self, took only 15mins to get the best gear, why cheat..
For fun. ;)
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.
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. ;)
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.
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. ;)
There is currently _no_ PVP in BrowserQuest & 'Gold' is the top-tier weapon/armour config.