Question

Question sounds quiet weird I know but here is the problem, the following code works perfectly. Timer starts at 30 minutes, every second a mouse move is not detected counts the timer down. When a mouse move is detected timer gets reset to 30 minutes, at the 25 minute mark of page inactivity a CSS popup shows counting down the last 5 minutes, at 30 minutes, the user gets auto logged out. However, if the user has the page open but is actively viewing another webpage altogether the timer either slows or stops altogether depending on the browser. Which in effect negates the script altogether. Is it possible to have the script continue its normal countdown and still force the user out of the page even if they aren’t actively viewing the page? Or are these browser quirks to reduce memory load?

 var Timing = 0;
 var CounterTime = 0;
 var TimePast = 0;
 var Seconds = 1800;
 var Warn = 1500;
 var MinuteLeft = 30;
 var SecondLeft = 60;
 var StopRefresh = 0;
 
 function ResponseTime()
 {
      Timing = Timing + 100;
      CounterTime = CounterTime + 100;
      if(Timing % 1000 == 0)
      {
            TimePast = TimePast + 1;
            SecondLeft = SecondLeft - 1;
            if(SecondLeft == 59)
            {
                 MinuteLeft = MinuteLeft-1; 
            }
            if(SecondLeft == 0)
            {
                 SecondLeft = 60;
            }
      }
      if(MinuteLeft != 0)
      {
            if(SecondLeft == 60)
            {
                  document.getElementById('CountdownTimer').firstChild.nodeValue = MinuteLeft+":00";
            }else if(SecondLeft < 10)
            {
                  document.getElementById('CountdownTimer').firstChild.nodeValue = MinuteLeft+":0"+SecondLeft;
            }else
            {
                  document.getElementById('CountdownTimer').firstChild.nodeValue = MinuteLeft+":"+SecondLeft;
            }
            if((MinuteLeft == 0) && (SecondLeft <= 10))
            {
                  document.getElementById('CountdownTimer').style.fontWeight = "bolder";
                  document.getElementById('CountdownTimer').style.color = "red";
            }
                  document.getElementById('CountdownTimer').style.fontWeight = "normal";
                  document.getElementById('CountdownTimer').style.color = "black";
            }else
            {
                  document.getElementById('CountdownTimer').firstChild.nodeValue = SecondLeft;
            if((MinuteLeft == 0) && (SecondLeft <= 10))
            {
                  document.getElementById('CountdownTimer').style.fontWeight = "bolder";
                  document.getElementById('CountdownTimer').style.color = "red";
            }else
            {
                  document.getElementById('CountdownTimer').style.fontWeight = "normal";
                  document.getElementById('CountdownTimer').style.color = "black";          
            }
      }
      if(TimePast == 1800)
      {
             document.getElementById('DoLogoutRequest').submit();   
      }
      if(MinuteLeft <=4)
      {
             document.getElementById('Overlay').style.visibility="visible";
             document.getElementById('ForceLogout').style.visibility="visible";
      }else
      {
             document.getElementById('Overlay').style.visibility="hidden";
             document.getElementById('ForceLogout').style.visibility="hidden";  
      }
      $(document).ready(function(){
             $(document).mousemove(function(){
                    Timing = 0;
                    TimePast = 0;
                    SecondLeft = 60;
                    MinuteLeft = 29;
             });
       });
  }

Answer 1

What you could do is modify the script so that when a mousemove is detected, you first check the current number of seconds (using the Date object) since your last mousemove event.

If it’s greater than 30 minutes, then you know the individual should be logged out, and then you can take that action immediately.

Think of this like setting a tripwire that is armed at the 30 second mark but doesn’t fire until someone trips it.

However, with that said, I really have strong concerns about how secure this methodology is. In general, the client side code is insecure. Things like automatically logging out a user should really be handled on the server side using a session.

Still, this approach is creative in that it doesn’t force me to visit a different page. So, another technique you could use that would combine the server-side approach with the mouseevent approach would be to store the mouse movements, and the time, in a variable. Then, at your 29:30 minute mark, if the array contains a mouse movement that occurred in the last 25 minutes, make a secure AJAX request to the server to tell the session that the user is still active.

This would reduce load on the server, since you’re only making that update when it’s needed, and it would also allow your users to use the application without needing to refresh to prevent logout, and it would also keep the actual “Is the user logged in” part of the logic where it belongs, on the server. If the server never hears a response from the client, the server will log the user out.

In summary, instead of your server waiting potentially forever to hear that it’s okay to log the user out:

      if(TimePast == 1800)
      {
             document.getElementById('DoLogoutRequest').submit();   
      }

The server is taking a much more authoritative approach in moving on without you, if it doesn’t hear your client check-in:

      if(TimePast <= 1800 && TimePast >= 1700)
      {
             // send keepalive request to the server to prevent auto-logout

      }