Javascript: Auto Logout

Vielen Webmastern ist es ein Anliegen, ihre Login-Bereiche gegen unbefugte Nutzung abzusichern. Seit einigen Jahren hat sich der Ansatz durchgesetzt, Nutzer automatisch abzumelden, wenn sie eine bestimmte Zeit nicht mit der Webseite interagiert haben.

Generell hatten Login-Sessions schon immer einen Timeout, von dem der Nutzer allerdings nichts mitbekommt. Bei PHP sind das z.B. standardmäßig 1440 Sekunden, also 24 Minuten. Dieser Timeout setzt sich bei jedem Seitenaufruf zurück. Kommt er bei 0 an, löscht der Server die Session und der Benutzer erhält beim nächsten Seitenaufruf eine unschöne Fehlermeldung weil seine Login-Session abgelaufen ist.

Vielen Webmastern sind diese großzügig gesetzten Session-Timeouts zu lang, sodass sie Ihre eigenen Mittel wählen, um den Nutzer vorher auszuloggen. Die gängigste und zugleich einfachste Möglichkeit ist diese:

<meta http-equiv="refresh" content="900; URL=/logout">

Leider hat diese Möglichkeit auch einen unschönen Nebeneffekt. Der Nutzer sieht keine Timer; stattdessen wird er nach Ablauf des Timeouts (hier 15 Minuten) einfach ausgeloggt. Das führt selten zu einem zufriedenen Seitenbesucher.

Der etwas aufändigere aber viel bessere Ansatz ist ein sichtbarer Countdown, am besten sogar mit zwei Stufen. Dem Nutzer soll angezeigt werden, wann er automatisch ausgeloggt wird. Kurz bevor das dann tatsächlich geschieht, soll er eine Warnung erhalten.

Für all diejenigen, die sich nicht mit Javascript beschäftigen wollen und befürchten, dass eine solche Lösung unheimlich kompliziert wird, gibt es hier eine sehr einfache, HTML5-kompatible Lösung:

<!DOCTYPE html>
<html lang="de-DE">
<head>
<title>Auto-Logout-Testseite</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="900; URL=/logout">
<style type="text/css">
#logouttimer { color: red; font-weight: bold; }
</style>
<script type="text/javascript">
var timeout = 900;
var warning = 780;
var timer = 0;
function autologout() {
var min;
var sec;
if (timer == timeout) {
window.location.href = '/?page=logout';
} else {
if (timer == warning) {
document.getElementById("logouttimer").classList.add("error");
}
min = Math.floor((timeout - timer) / 60);
sec = Math.floor((timeout - timer) % 60);
if (sec < 10) {
document.getElementById("logouttimer").innerHTML = min+':0'+sec;
} else {
document.getElementById("logouttimer").innerHTML = min+':'+sec;
}
timer++;
setTimeout(autologout,1000);
}
}
</script>
</head>
<body onload="autologout()">
<p id="logouttimer">15:00</p>
</body>
</html>

Das Javascript zählt von 15 Minuten herab und meldet den Benutzer nach Ablauf des Timers automatisch ab. Als zusätzliche Warnung wechselt die Schrift des Timers 2 Minuten vor dem Logout auf rot und fettgedruckt, ohne den Nutzer mit einer nevigen Popup-Meldung zu stören.

Für den Fall, dass der Nutzer Javascript deaktiviert hat, ist als zusätzliche Sicherheit der Meta-Tag mit dem gleichen Timeout eingebaut. So werden Nutzer ohne Javascript trotzdem zuverlässig ausgeloggt; selbst diejenigen die in Text-Browsern wie Lynx daherkommen.

In einem produktiven System sollten CSS und Javascript natürlich per link-Tag in externe Dateien ausgelagert werden.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.