Those of you who don't know, I recently made a game with the vanilla stack, i.e pure HTML, CSS and JavaScript. After launching this game I came to know about some vulnerabilities of a web app made with pure HTML, CSS and JavaScript.
A. People can change the code: The bug which mostly annoyed me after releasing the game is that using the really powerful Chrome Dev Tools, people can access and change my code really easily. What people were using this for is:
a. Making the score variable to increment by a huge number for a correct answer, so that they can claim to get a ridiculously high score and flex on the others. In my game, this is more prominent as there is a global leaderboard.
This can also be done by the debugger tools provided by Google Chrome which can insert a breakpoint in the code at a certain line(specifically where the score is being incremented) and can change the variable from the console simply.
b. This one is not really related to changing the code, but, as people could see my JavaScript so it was easy for them to get the backend URL and send a request via any REST client like postman or insomnia and set their high score even without playing the game.
The solutions I came up with can't completely ensure that your code will be completely secure, but it can throw off such "hackers":
a. Minifying the code: Minifying the JavaScript code will make it to appear on one line. But Chrome has a tool to beautify the minified JavaScript:
So, Chrome Dev Tools apparently allow you to pretty-print the minified code, which defeats the purpose of the minifying for discouraging "hackers". But you should always minify your code for the production of big apps for faster loading time.
b. Obfuscating the code: One of the biggest mistakes I made after the first beta release of my code is to switch to a module-based approach for coding this game(a post on module based javascript on the web by me is under process) and I found it a bit difficult and not worth it to obfuscate my code without breaking it in some way or other. That thing aside, let's see how an obscurification looks like:
Normal code:
let a = 10
let b = 20
c = a+b
console.log(`${a},${b},${c}`)
obfuscated code:
var _0x27ea=function(s,h){return eval(String.fromCharCode(115,32,43,32,104));}(eval(String.fromCharCode(49,55,54,49,49,49,32,94,32,49,55,54,49,48,55)),eval(String.fromCharCode(51,56,50,51,49,56,32,94,32,51,56,50,51,49,56)));let a=function(s,h){return eval(String.fromCharCode(115,32,94,32,104));}(780093,780087);_0x27ea=function(){return"_0xb77c39314";}();let b=function(s,h){return eval(String.fromCharCode(115,32,94,32,104));}(937835,937855);c=eval(String.fromCharCode(97,32,43,32,98));console['\x6c\x6f\x67'](`${a},${b},${c}`);
This might look gibberish, but if you minutely check it, trained eyes can still find the original code and change it. But obfuscation can be done to protect your Javascript code from others. If you want to know more about obfuscating code you can use js obfuscator
c. Another solution to this client-side vulnerability will be to use some backend to process and store the score, which will:
-
Make a ton of request to the backend which is not acceptable for any production level app.
-
Will make the game unusable offline, which I don't want to happen.
d. To prevent the high score from being a ridiculous amount sent by the client using the exploits, I set up a barrier for the high score so that any score above that will be rejected by the system.
B. People can get your API and randomly request your backend to store new things: In this app, I relied on a small express based backend to store the scores from people. So, once they know the URL of the API they can use an API client to send the result to the server and store it. For larger apps having an API key in the client-side can cause data leak from your database.文章来源：https://www.toymoban.com/news/detail-852028.html
The potential solution will be to keep a secret as HTTP only cookie and ask for it on each POST request so that it can validate if the connection is from an actual browser or not. Or otherwise, you can have a look at the user-agent header which often contain the details of the browsers being used.文章来源地址https://www.toymoban.com/news/detail-852028.html
到了这里，关于What did I Learn While Making a Game with vanilla HTML, CSS and Javascript的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[plugin:vite:css] Preprocessor dependency “sass“ not found. Did you install it?](https://imgs.yssmx.com/Uploads/2024/02/579956-1.png)
![[USF-XSim-62] ‘elaborate‘ step failed with errors.[Vivado 12-4473] Detected error while running sim](https://imgs.yssmx.com/Uploads/2024/02/609215-1.png)
