How to Hack Web Browser Games/Canvas

Sbenny.com is trusted by 1,313,124 happy users since 2014.
Register

TDStuart

Novice Lv1️⃣
Member for 6 years
How to Hack Web Browser Games
I recommend learning javascript / having some programming knowledge.
Note : This isn't a complete guide on hacking browser games, although this should help you on your path to hacking web games. Also, I am not an expert and am kinda talking about most of this stuff from memory, so if any of it is wrong please correct me!


Let's start off with the basics, JavaScript.

What is javascript and how does it relate to game hacking?
Most games written for your browser are written in JavaScript, unlike most of the programming languages games are written in, JavaScript is not compiled before execution. Well, why does this matter to us? Well, it means that your traditional memory hacking techniques won't be very useful. This is because javascript is compiled at runtime so you can't just edit the assembly code, for injection, as an example. Not to mention the fact that your browser doesn't assign a javascript program's memory in the same place every time, so pointers don't really exist. While you can get cheat engine to work for javascript games, it is not a tool that you really need.

So how do you hack javascript games you may ask. Well since javascript is not compiled it is in a much more human-readable format, you can also easily make changes to the code and the browser will run it. So let's look at an example function for a javascript game that deals with a player's health.

JavaScript:
function damagePlayer(playerObject, damageValue){
    updatePlayerHealth(playerObject, (playerObject.health - damageValue) );
}

function updatePlayerHealth(playerObject, healthValue){
    playerObject.health = healthValue;
    Game.overlay.gui.healthText.value = playerObject.health;
    Game.overlay.gui.healthBar.value = playerObject.health;
}
In the code above we can see a function called updatePlayerHealth that applies changes to our player's health and updates the GUI. Well if you are using cheat engine for a normal game you would find the playerObject.health = healthValue; line to be the line that writes to the player's health value. You could simply overwrite that with 100 instead of the new healthValue. This way you will always have 100 health. Well in javascript you do the exact same! Your code for the updatePlayerHealth function would look like this :

JavaScript:
function updatePlayerHealth(playerObject, healthValue){
    playerObject.health = 100;
    Game.overlay.gui.healthText.value = playerObject.health;
    Game.overlay.gui.healthBar.value = playerObject.health;
}
How to edit and inject JavaScript!
Alright so editing javascript is pretty simple, so how do you start editing a target game's javascript to do what you want? Well first off, grab a copy of the game's code. You can do this by opening up the developer tools of your browser (like Chrome Dev Tools) and go to the sources tab to find the game code. Usually, it will be labeled as such and be a pretty large file. You can then download it and open it with a text editor (Does the code look weird/compact? Well the code may be minified or obfuscated keep reading to figure out how you deal with that!). Now that you have it in a text editor you can find the code you want to edit and rewrite it. (Note that most online games have server checks, so think about that before trying god mode on an online shooter. Later I will talk about debugging javascript code to find what you want to edit!) Ok so now that you have made modifications to the code, how do you get it to be loaded when going to the website. Well, this brings us to injecting.

There are quite a few tools you can use to inject javascript: chrome extensions and tampermonkey. Let's start with chrome extensions. Chrome extensions allow us to load code into the browser. We can use chrome extensions to block the original game code file, then load in our custom game code with content scripts (google how to do this!). You can also use tampermonkey to block the original code and load in our custom code. The best way to load in custom code is through a website, so upload your file to something like dropbox. (if you use dropbox you will need to use dl.dropboxusercontent.com instead of dropbox.com for your file URL!). You can then use your URL in an HTML script tag to load your javascript code.


Don't Edit, Hook!
Don't feel like manually editing and re-uploading javascript code just to have to worry about injecting it back into the game? Well then you can just hook the javascript functions! So what is hooking javascript functions? Well first let me explain the basics of javascript scopes. The global scope is accessible by any code, and you can use the window object to reference it directly. Local scopes are scopes of functions and contain variables defined in the function. Local scopes can not be accessed by code that is not in the scope unless given the property by code that is in the scope. Let's look at an example!

JavaScript:
function myFunction(){ // myFunction is defined in the Global Scope.
    let myPrivateArray = []; // myPrivateArray is defined in the Local Scope.
    myPrivateArray.push("Secret Value LOL");
    console.log(myPrivateArray); // Logs : ["Secret Value LOL"]
}

myFunction(); // Runs the function.

console.log(myPrivateArray); // myPrivateArray is undefined and throws an error.
Ok so here we can see that we have a local variable myPrivateArray. Let's pretend this is some game code we want to access. Unfortunately without directly editing the code we can't...or can we? This is where hooks come in. The basic concept is you hook a global function that gets passed some local variable you want to access. In this case Array.prototype.push and console.log are both global functions we can hook. So let's look at a hook.

JavaScript:
// Make an Array.prototype.push hook!
const oldArrayPush = Array.prototype.push; // Grab original function
Array.prototype.push = function(){ // Redefine the function
    if (arguments[0] == "Secret Value LOL"){ // arguments is an array with arguments passed to the function!
        arguments[0] = "Hooked the array push!"; // Edit the argument
    }
    oldArrayPush.apply(this, arguments); // Use .apply to continue as normal

}

// Make a console.log hook!
const oldConsoleLog = console.log;
console.log = function(){
    if ( Array.isArray(arguments[0]) ){ // Check if argument is array
        arguments[0].push("Modified the array with a hooked console.log!"); // Modify argument!
    }
    oldConsoleLog.apply(this, arguments)
}
And let's look at the output of the original code, then the output after we have the hook.

JavaScript:
// Output of myFunction() before hook :
-> ["Secret Value LOL"]

// Output of myFunction() after hook :
-> (2) ["Hooked the array push!", "Modified the array with a hooked console.log!"]
Ok, so we have hooked and modified variables in a local scope that we had no access to! In real-world game hacking, you will need to look hard for good hooks, remember you can hook ANY global functions, not just the standard browser API calls. Keep an eye out for any Array modifiers as they can expose not only the variable being presented in the arguments but you can also grab and modify the whole array using the this keyword (Object modifiers can also be useful although are rarer).

Remember, hooks can be hard to find and more of a pain than rewriting code, but you won't have to worry about updating the modified client code or uploading the code. You can also just drop it in a tampermonkey script and it should work like a charm.


A quick note about debugging JavaScript
If you are having a hard time trying to debug javascript, try looking at how the game is getting inputs. It is a pretty standardized process and you should be able to find it pretty fast. Another thing you can do is hook Array.prototype.push and hope a value you want is pushed into an array. You can also try finding out what rendering engine the game uses and try to find out when the game is calling rendering functions, you could use this to find when the game is rendering a player for example. Chrome DevTools is nice when debugging javascript and gives you nice access to see the call stack and access to the scope the code was called in.

WASM, And Why It Makes Me Cry
WASM stands for Web Assembly, and unfortunately, some browser games use it. Well hold on a minute this sounds amazing, let me pull out cheat engine and Ida Pro and lets get cracking! Well f*ck I wish it was that simple. WASM is not assembly, and it comes with all the memory modification problems JavaScript has (although it is easier to search for values in cheat engine but pointers are useless). WASM comes with all of the non-human-readableness of regular Assembly, but it somehow confuses me even more although it looks like it should be easier to read. Let me be honest, I don't really know how to program in WASM, but even if I did it wouldn't make much of a difference as most WASM games include the game engine in the WASM code, meaning the code can be around 11 million lines (for one unity based game I played with).

WASM is far worse to hack then javascript, or even regular assembly compiled games. This is for 3 reasons, 1 it is really hard to read, 2 the memory addresses change / no pointers, and 3 there are little to no debugging tools. This makes it extremely hard when faced off with 11 million lines of code.

Luckily there is a savior, Cetus. Cetus is a VERY stripped-down version of cheat engine for wasm. It runs in the browser as a google chrome extension. It allows you to search the memory of any wasm programs running in the browser. You can rewrite values, "lock" values, find out what reads/writes, and patch code. Cetus also has a form of a speed hack, which can work on a lot of games. Once you find the code that changes a value with Cetus, you can edit it and make a patch. Next time you refresh the patch will be applied and the executed code will be changed.

Problems due arise when you want to skip using Cetus to load in code modifications (Cetus has caused one game to slow down, but this may be due to a bug). The problem is two-fold, number one is finding the right code to modify, and number two is replacing the original wasm. The code displayed in Cetus is actually not WASM (wasm is in binary not text) but actually WAST (wast is a text version of wasm). The problem becomes that some wasm to wast programs interpret the wasm differently and can rename variables and such to try and help you, which can make finding the exact code difficult. Cetus gives a function number which should be the same across all wast although I have seen Cetus be off about 2-3 numbers higher than what I found in the wast, but this should still help you significantly. Another issue with manually editing wast is that the files are so big. Most text editors struggle significantly, and some will refuse to open (I used VSCode). Compiling wast to wasm can also be an issue. Once you have modified the wast and turned it back into wasm, you must them upload it so your game can download it and run it. Problem is you now need to do some javascript hacking to get the javascript wasm loader to load your wasm code.

Anti-Cheat in Browser Games
The biggest form of anti-cheat in-browser games is this little thing called not trusting the client at all and running a full version of the game server side to check every single thing the client does.
It is a pain of the ass, but aimbot is still a go-to hack for multiplayer browser games.
All other hacks will either be visual (esp) or carefully inspected exploits.

Unfortunately, there is another technique used with javascript games, called obfuscation. When done right it can be pretty effective, but if you spend a little time mapping out what functions due and follow the call stack, you can still get a good idea of what the code is doing. I also recommend this it is a website running a project called de4js which attempts to deobfuscate javascript. It can do a fairly good job, and that should be your first go-to when running into obfuscated javascript.
Code is also minified, if the code is just minified a simple js-beautifier will help clean up the code. Google chromes code beautifier does a good job.

Another anti-cheat method I will cover is games using the .toString() method to check if a function has been modified (specifically checking if a function has been hooked). You can bypass this manually setting the .toString() to the original .toString().

If you want to look at more advanced anti-cheat methods I recommend looking at this github page covering the game krunker and the anti-cheat methods they used (Eventually the game moved their entire game over to WASM which is very tricky to reverse as talked about above). Krunker is the most advanced anti-cheat I have seen and is not the standard, and since the game has updated I have not had enough personal experience to confidently cover them. I would much rather you head over to that github page, or google about the krunker anti-cheat methods.


Okay, that's it, that's it for this guide on hacking browser games. If something has confused you ... GOOGLE IT! Many of the things I've talked about you can google and find help. I know there probably isn't a huge amount of people interested in hacking browser games here, but if it can draw me thousands of views on yt I thought maybe someone would be interested. There are other things upfront you can do, and I really recommend checking out Krunker's anti-cheat article as it's written by people who have really had to work hard to get around some anti-cheat and find good ways to inject and edit code. Unfortunately, if your game is in WASM and you are trying to make a goalbot it will be difficult for you, at which point I recommend that you look at the more traditional means of hacking games and try to find the values of the players in the cheat engine, then find the read / write code with Cetus, keep in mind that you will probably want to intercept and export those variables in javascript to perform traditional aimbot codes/calculations.
 
Top