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: