Securing Web apis from being called outside the browser

Question

Maybe I'm overthinking this.

I have some simple javascript game running in browser(puzzles etc.), and when a user wins, points are sent to a laravel backend based on how quickly they complete this.

When a user logs in, a typical session is created, and when points are sent via POST request, so is the csrf and JWT.

Is it possible for a user to open the chrome dev console and get the url then copy the crsf, cookie or JWT and send points to the backend without actually playing the game?

Apis called outside the browser don't respect Access-Controll-Allow-Origin policies.

Can anyone explain what prevents users from doing this or how to prevent this action and make sure the users actually play the game to earn points?

Answer 1

One approach could be to arrange the game in steps. That is, use multiple <form> elements.

Initial page would contain exactly one <form> element with exactly one portion of game.

Only when that form is submitted does server send next <form> element to document.

Each <form> element having an <input type="submit"> element with a unique identifier; for example, a timestamp, set at name attribute and generated at server; which expires in the greatest amount of time necessary to complete the <form> at that step within process of game.

If user submits a <form> without unique identifier, or step of <form> is submitted outside of range of maximum time required to complete a <form> representing a step within the process, user is disqualified from "winning" the current game, or playing game in future for a given amount time.