How to block user from editing URL

If you want to prevent the user from entering a new answer to question #1, then you need to keep some state on the server. Maintain a list of questions, keeping track of which ones have been answered and which ones have not. The page you serve when you request question?id=1 and the server state is such that the user has already answered question #1 should be one that either displays an error, or just forces it to go to the first unanswered question, either by redirecting or by just presenting question 2 or something reasonable. But the bottom line is that server needs the state.

This is like, if I go to my bank page and just edit my balance in my browser to add a few more 000's on the end of my bank account balance it won't actually change the amount of money in my bank, just what's being displayed locally. To actually change the bank balance I'd have to make a request to the server that resulting in my balance being changed.

Same thing for you. If you don't want to ACCEPT a new answer to a question that has already been submitted, then you'll know when the page tries to submit the answer. The page likely does a POST with the user's answer to question 1, and the server keeps the answer somewhere. If the browser does another POST with an answer to the same question (because the user hacked the URL) you can simply reject the request and refuse to change the servers state, returning some kind of an error like "you already answered that question".

The experience that you provide to the user in this event doesn't really matter so much (they're hacking), but to do something reasonable, consider redirecting the browser to the correct question. The next unanswered question could be part of the response to the "you already answered that question" REST response.

It is not possible to directly prevent modifying a top-level URL, however, there are several other solutions you can take. If you're using Vue Router, you can use navigation guards and redirect back if an invalid change is detected. Otherwise, for a more traditional solution, you can hide the URL inside of an iframe, whose URL would be inaccessible from the navigation bar. Sample HTML:

<iframe src="/question?id=2"></iframe>

Keep in mind that any client-side security can be bypassed, and it's best to store sensitive data on the server instead. In the case of an iframe, it would be trivial for someone with knowledge of developer tools to modify the URL inside.

You can't prevent the user from changing the URL so what you need to do is find some way of detecting if the user changed the URL, and then doing something on the backend. The problem is you would not be able to send them back to the page they came from so they flow would be broken.

If you're using standard <form> inputs, probably the simplest way to do this would be to include a hidden input with a unique ID when the page is served:

<input type="hidden" id="noCheating" name="noCheating" value="34657">

Then when the webserver processes the POST you can check if noCheating exists in the posted data and if it doesn't bail out.

If subsequent page requests have referer headers, the server could inspect those and then reject GET requests that don't have them.

Both of these methods are kind of low hanging fruit and are meant to keep out the 99% of people who don't care. If you're concerned about actual hackers you're going to have to save state at every step and then verify that data for previous questions hasn't already been submitted as @Wyck suggests.

As others said, it is not possible to prevent users from changing the url freely, given the url address bar cannot be controlled by a webpage.

I guess you are requesting an API looks like below when the user try to edit the answer? My recommendation is change the request method to POST and pass params via Body, not from Query String (That's basically backend's job).

By doing this, your url will always show like /question instead of /question?id=xxx, which means the user cannot go back by changing the id parameter.