How can I check to make sure a window is being actively used, and if not alert the end user that they are about to be logged out?

Question

Working on a new back end system for my company, and one of their requests is for a window to become locked down and for the user to be sent to the login screen if they leave it idle for to long.

I figure I'd do this with JavaScript by attaching listeners to clicks, mouse moves and keyups but I worry about messing with other scripts.

Any suggestions?

Answer 1

You could just make it do a log out if the user doesn't change pages after so long. That's what the Angel Learning Courseware system seems to do.

The other problem you'll face, though, is that some users disable JavaScript.

Answer 2

If you can put code on the page then there's two things:

• Javascript looking for mouse movement, keyboard activity, and scrolling.
• Put a meta refresh tag in the html - if they're on that page for more than X minutes it'll automatically redirect to the login page.

If you can only put code on the server:

• Keep a session (cookie or other) that tracks how long between page changes. If a page is requested longer than X minutes since the last request, don't serve the requested page, serve the login page.

You can use the meta refresh and server techniques together. The refreshed page will go to a "your session is about to expire, click here to go back and continue working within 30 seconds".

The button they click resets your server's session, and performs a page back function so any data they had (in most browsers) will still be there. Requires javascript on the refresh page, but none on the original page - just a meta refresh. Javascript activity tracking would be the best though.

Answer 3

In the load event for the page you can use setTimeout to fire a function warning the user that they will be logged out if they don't refresh the page.

With 5 minute session timeouts you could do warnings after 4 minutes:

setTimeout(timeoutWarning, 240000);

function timeoutWarning() {
  if(confirm('You have been idle for a while.  Would you like to remain logged in?'))
    window.location.refresh();
}

Answer 4

Firstly, for this to be effective, you have to make sure users are logged out on the server at the end of this idle time. Otherwise, nothing you do on the client side is effective. If you send them to a login page, they can just click the back button.

Second, the conventional way to do this is to use a "meta refresh" tag. Adding this to the page:

<meta http-equiv="refresh" content="900;url=http://example.com/login"/&gt;

will send them to the login page after 15 minutes (900 seconds). This will send them there even if they are doing something on the page. It doesn't detect activity. It just knows how long the page has been up in the browser. This is usually good enough because people don't take 15 minutes to fill in a page (stackoverflow.com is a notable exception, I guess.)

If you really need to detect activity on the page, then I think your first instinct is correct. You're going to have to add event handlers to several things. If you are worried about messing with other scripting for validation or other things, you should look at adding event handlers programmatically rather than inline. That is, instead of using

<input type="text" onClick="doSomething;">

Access the object model directly with

Mozilla way:   element.addEventListener('click' ...)
Microsoft way: element.attachEvent('onclick' ...)

and then make sure you pass along the events after you receive them so existing code still does whatever (validation?) it is supposed to do.

http://www.quirksmode.org/js/introevents.html has a decent write up on how to do this.

--
bmb

Answer 5

Great, thanks for all the replies