I am building a web app using react (nextjs). It is a quiz app that asks users questions and gives them a score if they are correct. Currently, I am fetching all my questions from my database and storing them in a Global state (I’m using Zustand for state management).I then display the questions one after the other.
The problem with this approach is that someone can simply use dev-tools to look at the local storage where they will find all the questions with their answers. What would be a better way to handle storing the questions? Or would it be better to fetch the questions and answers separately only when they are needed?
Any help would be appreciated.
2
Answers
The "most correct" way would be to fetch only one question at a time, as required, and never provide the answer to the client at all – say, provide a web service that verifies whether a submission is correct, with appropriate protections against spamming of answers etc.
This of course doesn’t allow for offline operation. Maybe that’s important for you. In that case, you could go to some efforts to obscure the answers, perhaps with some token amount of encryption. A determined user might still poke through your app and find out how to extract the answers, but if it takes enough work then maybe they won’t bother.
Or maybe it’s okay to just do it the easiest way because the quiz is just for fun, and/or it doesn’t matter if people cheat because "they’re only cheating themselves". You’ll have to make that determination.
The aim of any computer security is to make it more expensive for an attacker to exploit the system than whatever they’d gain from doing so. Maybe you need zero-knowledge proof system for secure answer submissions for an enormous cash prize, or maybe it’s enough just to avoid having mouseover text indicating which is the correct answer.
Yes, it is much better to separate the answers and the questions, and fetch the answer only when needed.