DEV Community

Sunfire
Sunfire

Posted on

Expanding the Snake game to include a Global Scoreboard - Part 1

As you may have seen in my post Feed the Snake game, I'm trying to learn more about web dev by improving something I built from a tutorial.

The game as is uses the browser's localStorage to keep track of the user's high score. But trying to beat your own score isn't as fun as trying to beat someone else's high score.

Now, I have to admit, since I want to focus on secure coding practices and learning how to best build secure apps from the start, this felt really daunting, and I've been putting it off for a while now. But as I've been reminded, the best way to learn is get in, do it, fail, and figure out the right way...

So, while I know this version isn't secure yet, it took me a couple days just to get it to the point of pulling the score (which is added to the page with JS) and combining it with a name (that the user enters at the end of the game), and sending all of that to my tiny little db through PHP.

While it felt monumental just to get that working, what really struck me after the fact was that I had forgotten some of the core principles of web dev, namely remembering the order of processing of different files to produce the site as viewed in the browser. I had to be away from home, freezing my ears off at the bus stop, to remember that once PHP has processed, it's gone, and if I want to take something that's been generated by JS after the page was loaded and send it to PHP, it has to go through an AJAX call. Order of operations.

Like I said, I know it's probably vulnerable to things like tampering and maybe even XSS, but since I don't quite understand how those attacks work yet, I can't quite write my code better to prevent it. I've contemplated a variety of ways to handle the issues that could arise from accepting user input, but it seemed to me that I first needed to make sure my data was getting into the db, and then the top scores being displayed for everyone to see. Because if I can't do that much, then I can't test the security of other methods, right?

I'm not ready to have you help me by poking at it just yet, so I won't share the link. But if you have any tips, suggestions, guidance that could help me as I learn the best way to write my apps more securely, please share. Thanks.

Top comments (2)

Collapse
 
itr13 profile image
Mikael Klages

If you don't do any string sanitization server-side, it's probably XSS vulnerable. If you want to test try copy-pasting some of the strings on this site into the name-field when you get a highscore: owasp.org/index.php/XSS_Filter_Eva...

If you're storing the highscores in an SQL-database, you should be safe from sql-injections as long as you use parameterized queries, I think.

Collapse
 
chillsunfire profile image
Sunfire

I haven't started testing yet, but this is the code I've got for filtering/sanitizing the one and only user input field:

$name = trim(stripslashes(strip_tags(filter_var($_POST['name'], FILTER_SANITIZE_STRING))));

Thanks for the link - that will be helpful when I do start testing.

Now, parameterized queries - that's something I don't know about yet....