jquery

Session Timeout With Keep-alive jQuery Plugin

Share Button

I was in the process of updating our Proton UI project and wanted to add a feature to lock the CMS on session timeout. It’s a handy feature to have if you want an added layer of security. Why?

Maybe one of the users needs to make a quick change from a hotel lobby computer and in all the rush forgets to log-out of the CMS. Anyone coming to that computer after a few minutes would be able to continue using his session. That is, unless it gets locked.

Back to the topic. As usual, I did a quick search on what other folks are using. No need to reinvent the wheel, right? I found a couple of useful plug-ins for this on Github and one with a ready made Bootstrap warning dialog.

When I implemented the jquery-sessionTimeout-bootstrap plug-in by maxfierke, I saw the session timeout warning dialog popping up after a set amount of time regardless of user activity. This kind of sucked. Imagine this: there you are using your CMS to write a new article and every ten minutes or so (depending on your timeout setting) you get an annoying dialog warning you that your session will soon expire.

What I wanted to do is stop bothering the user with that annoying dialog if he is actually using the page. So I decided to make my own jQuery plug-in to do this, and make it 100% server-side platform agnostic.

How does it work?

As long as the user is typing, moving the mouse or interacting with the touch screen, the server-side session keeps getting refreshed by pinging an URL of your choosing. This is done via AJAX POST requests every five seconds or at an interval you set. The pinged resource should be something innocuous that would serve only to keep the session alive. This all depends on your server-side platform and you’re free to set this up any way you like it.

Now your server-side session is kept alive and happy for as long as the user is active. After a set amount of idle time, a Bootstrap warning dialog gives the user an option to log out, or stay connected. If the user stays idle, the browser gets redirected to a specified timeout URL. This might be a log back in screen asking the user to re-enter the password. There you have it.

Additionally, you have an option to write your own callback functions if you don’t want the default Bootstrap dialog. Or, if you don’t need the keep-alive ping option, you can disable it and only use the plugin to redirect to a log-out URL after a set amount of idle time. It’s all very easy to setup, with many more well documented features.

The plugin is licensed under the MIT license. Feel free to check it out at:
https://github.com/orangehill/bootstrap-session-timeout

Share Button
4 replies
  1. Brandon Baker
    Brandon Baker says:

    Hi, this is fantastic, nice work! Most of the pages on my site are served over https, but I don’t seem to be able to make the Keep Alive work over https. Even when I provide a fully-formed url to keepAliveUrl, it still uses http. As a result, the Keep Alive request is being blocked by the browser: “This request has been blocked; the content must be served over HTTPS.” Have you encountered / solved this?

    Reply
  2. Tony Payne
    Tony Payne says:

    We are using the your fork of bootstrap-session-timeout and it works nicely, with one exception, and I cannot figure out how to resolve this. Wondered if someone could help turn the light on for me.

    Our site is written in PHP with Bootstrap3 and JQuery3.

    The footer of every page contains the script that activates bootstrap-session-timeout, but the option to reset the timer each time the mouse is moved is not used. If there is no activity within the timeout period, the ribbon pops up and the user is given the option of Staying Connected or Signing Out.

    This is working fine for the site, however what we have is an order edit page, where users can add, delete and update lines that are on an order. The page is not refreshed during the edit. To add, delete or update order lines, the links call JS functions, which in turn call PHP scripts to perform the updates, JS then being used to update the screen contents dynamically.

    We need to reset the session timeout counter each time the user updates the order, ie: each time they click on a link, which calls a JS function, which in turn calls a PHP script, then returns to the page..

    Ideally, we would like to call a function whenever an update to the page contents is made, but none of the individual bootstrap-session-timeout functions seem to be available within our JS.

    Hope this makes sense and thanks in advance for any help/pointers.

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *