Can I restrict access to all routes except one in vue-router? Is this a safe practice? Should I explore alternative methods for achieving this?

Question

Can I restrict access to all routes except one in vue-router? Is this a safe practice? Should I explore alternative methods for achieving this?

I am looking to create an online exam consisting of 5 pages, each with a countdown timer set at 120 seconds and 4 questions on each page. Once the timer runs out, users will be automatically redirected to the next page, or they can manually click the "next" button before that.

Utilizing Laravel 5.4 and VueJs, I have implemented an Ajax request for every question answered by the user. However, my main goal is to prevent users from navigating back to previous pages or viewing other pages until the designated time limit has elapsed. Is this even feasible?

My plan is to develop this application using Vuejs and vue-router, although I am unsure about how to integrate this functionality using vue-router. Despite conducting research, I haven't found much information regarding this particular issue!

Alternatively, should I consider abandoning vue-router and just implement a simple router of my own, like:

$("#page1").show();
$("#page2").hide();
$("#page3").hide();
.
.
// after 120 secs 
$("#page1").hide();
$("#page2").show();
$("#page3").hide();
.
.
 // Nevertheless, I believe this approach may not provide adequate security!

Any insights or suggestions would be highly valued. Thank you in advance.

UPDATE: This exam allows users to view a list of randomly chosen English words sourced from the words table exclusively! Users then proceed to click on any word whose meaning they know, triggering an ajax request for each selection to save the word's ID in the results table. Additionally, there exists a fake_words table wherein 50 random words are selected alongside genuine ones. If a user clicks on fake words more than 3 times, the test will result in failure. The final outcome will reveal the user's vocabulary proficiency level.

UPDATE 2: Although I attempted to implement this functionality using vue-router, I realized that all questions are randomly fetched from the database in one query, sent (via ajax) to the browser before the exam commences. This begs the question - should I segregate them into separate arrays and allocate each array to a distinct page? Do I have no choice but to do so? Can't I simply use a single v-for loop for all questions? Suppose I opt to modify the number of questions; would this necessitate manual code updates and creating new vue-router pages or removing existing ones?

javascript vue.js vuejs2 vue-router

Answer 1

Answer №1

If you are dealing with high-risk code, such as an exam, it is important to reassess your approach: "Never trust the client". Consider implementing backend solutions to address potential security issues.

1) Secure the endpoint using middleware that:

2) Generates a timestamp when the page is visited

3) Prevents users from submitting a new post (answer) after 120 seconds

Note: It's essential for users to answer online as well for better security. If the question is displayed in the browser window, users can always cache it and even take screenshots regardless of encryption measures.

edit: Utilize pagination to present questions one at a time within a specific timeframe.

edit 2: Implement a feature to send a notification to the server if devtools are opened. Check out https://github.com/sindresorhus/devtools-detect

Answer 2

If you are dealing with high-risk code, such as an exam, it is important to reassess your approach: "Never trust the client". Consider implementing backend solutions to address potential security issues.

1) Secure the endpoint using middleware that:

2) Generates a timestamp when the page is visited

3) Prevents users from submitting a new post (answer) after 120 seconds

Note: It's essential for users to answer online as well for better security. If the question is displayed in the browser window, users can always cache it and even take screenshots regardless of encryption measures.

edit: Utilize pagination to present questions one at a time within a specific timeframe.

edit 2: Implement a feature to send a notification to the server if devtools are opened. Check out https://github.com/sindresorhus/devtools-detect

Answer 3

Answer №2

Maybe these code snippets could provide some assistance:

let application = new Vue({
    element: '#application',
    data: {
        firstStep: 1,
    }
});

<step v-if="step==1"></step>

timeHandler = setInterval(function() {
    moveForwardToNextStep(2);
    this.$parent.firstStep = 0;
}.bind(this), 12000);

Answer 4

Maybe these code snippets could provide some assistance:

let application = new Vue({
    element: '#application',
    data: {
        firstStep: 1,
    }
});

<step v-if="step==1"></step>

timeHandler = setInterval(function() {
    moveForwardToNextStep(2);
    this.$parent.firstStep = 0;
}.bind(this), 12000);

Answer 5

Answer №3

When it comes to security, the choice of a JS framework may not have a significant impact. Vue.js is a solid option for development. Here's a snippet of code to help you get started:

<template>
  <div>
    <div id="question" v-if="question">
      {{question}}
      <button @click="nextQuestion();" v-if="hasNextQuestion()"></button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        curQuestionNo: 0,
        maxQuestions: 4
        question: null,
        timer: null
      }
    },
    methods: {      
      fetchQuestion () {
        var url = 'https://myapi.com/question?curQuestionNo=' + this.curQuestionNo;

        axios.get(url)
          .then(res => {
            this.question = res.question;
            this.curQuestionNo++;
            this.stopTimer();
            if(this.hasNextQuestion()) {
              this.startTimer();
            }
          })
          .catch(() => {
            // handle errors here
          });
      },
      startTimer () {
        this.timer = setTimeout(() => {
          this.nextQuestion();
        }, 120 * 1000);
      },
      stopTimer () {
        clearTimeout(this.timer);
      },
      nextQuestion () {
        if(this.curQuestionNo > 0) {
          this.markAnswered(function() {  
            this.fetchQuestion();
          })
        } else {
          this.fetchQuestion();
        }
      },
      markAnswered (cb) {
        var url = 'https://myapi.com/mark-complete?curQuestionNo=' + this.curQuestionNo;

        axios.post(url) 
          .then(res => {
            this.fetchQuestion();
          })
          .catch(() => {
            // error handling
          });
      },
      hasNextQuestion () {
        return this.maxQuestions - (this.curQuestionNo + 1) > 0;
      }
    },
    created () {
      this.nextQuestion();      

    }
  }
</script>

For server-side implementation, consider the following approach:

Send one question at a time per request to the client.
Ensure that the user has answered the previous question or the allowed time has expired before returning the next question. Keep track of the last answered question number (or expiry time) per user in the data store. The server should only send the next question after verifying this information.

Sample Code:

Route::get('question', function(){
    $curQuestionNo = intVal(Input::get('curQuestionNo'));
    $user = User::find($userId); 
    if($user->current_question_number === $curQuestionNo) {
      $question = Question::where('question_no', $curQuestionNo + 1);
      $question->sent_at = time(); 
      return $question
    } else {
      // deny access
    }
});

Route::post('mark-complete', function(){
    $curQuestionNo = intVal(Input::get('curQuestionNo'));
    $user = User::find($userId); 
    $question = Question::find($curQuestionNo);
    if($question->sent_at > 120 seconds) {
     // do not record answers
    } else {
      // record answers
    }
    $user->current_question_number = $curQuestionNo;
    $user->save();
});

Answer 6

When it comes to security, the choice of a JS framework may not have a significant impact. Vue.js is a solid option for development. Here's a snippet of code to help you get started:

<template>
  <div>
    <div id="question" v-if="question">
      {{question}}
      <button @click="nextQuestion();" v-if="hasNextQuestion()"></button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        curQuestionNo: 0,
        maxQuestions: 4
        question: null,
        timer: null
      }
    },
    methods: {      
      fetchQuestion () {
        var url = 'https://myapi.com/question?curQuestionNo=' + this.curQuestionNo;

        axios.get(url)
          .then(res => {
            this.question = res.question;
            this.curQuestionNo++;
            this.stopTimer();
            if(this.hasNextQuestion()) {
              this.startTimer();
            }
          })
          .catch(() => {
            // handle errors here
          });
      },
      startTimer () {
        this.timer = setTimeout(() => {
          this.nextQuestion();
        }, 120 * 1000);
      },
      stopTimer () {
        clearTimeout(this.timer);
      },
      nextQuestion () {
        if(this.curQuestionNo > 0) {
          this.markAnswered(function() {  
            this.fetchQuestion();
          })
        } else {
          this.fetchQuestion();
        }
      },
      markAnswered (cb) {
        var url = 'https://myapi.com/mark-complete?curQuestionNo=' + this.curQuestionNo;

        axios.post(url) 
          .then(res => {
            this.fetchQuestion();
          })
          .catch(() => {
            // error handling
          });
      },
      hasNextQuestion () {
        return this.maxQuestions - (this.curQuestionNo + 1) > 0;
      }
    },
    created () {
      this.nextQuestion();      

    }
  }
</script>

For server-side implementation, consider the following approach:

Send one question at a time per request to the client.
Ensure that the user has answered the previous question or the allowed time has expired before returning the next question. Keep track of the last answered question number (or expiry time) per user in the data store. The server should only send the next question after verifying this information.

Sample Code:

Route::get('question', function(){
    $curQuestionNo = intVal(Input::get('curQuestionNo'));
    $user = User::find($userId); 
    if($user->current_question_number === $curQuestionNo) {
      $question = Question::where('question_no', $curQuestionNo + 1);
      $question->sent_at = time(); 
      return $question
    } else {
      // deny access
    }
});

Route::post('mark-complete', function(){
    $curQuestionNo = intVal(Input::get('curQuestionNo'));
    $user = User::find($userId); 
    $question = Question::find($curQuestionNo);
    if($question->sent_at > 120 seconds) {
     // do not record answers
    } else {
      // record answers
    }
    $user->current_question_number = $curQuestionNo;
    $user->save();
});

Can I restrict access to all routes except one in vue-router? Is this a safe practice? Should I explore alternative methods for achieving this?

Answer №1

Answer №2

Answer №3

Similar questions

Converting RSS title to HTML format with the help of JavaScript

The request to sign up at 'https://identitytoolkit.googleapis.com/v1/accounts:/signUp? from the origin 'http://localhost:8080' has been denied

PHP sending only a single space in an email

Using jQuery to iterate through elements of a PHP array

Prisma encountered an error with the database string: Invalid MongoDB connection string

Switching PHP include on an HTML page using JavaScript

I have a few inquiries about my nodejs studies. Can you assist me, please?

Guidelines for triggering an event on the select element in Vuejs only when a specific condition is satisfied

What are some best practices for managing object-level variables in TypeScript and Vue.js?

How to distinguish if a background tab is open using JavaScript or jQuery

React input field keeps losing focus during re-render operations

Having trouble retrieving a specific object from an array using EJS

Manipulating a textarea in jQuery by inserting a string and selecting a specific portion of it

Accessing the database variable in controller files with Node.js

Tips for avoiding page reloading with the use of vue, vue recaptcha, and axios

Is there a way to display an alert using JavaScript that only appears once per day?

Getting the WebElement object by manually clicking an element while in an active WebDriver Session

Exploring the world of JMeter: capturing sessions with JavaScript and jQuery

Creating UV coordinates in THREE.js

Struggling to create a regular expression for a particular scenario