当使用仅HTTP的会话cookie时，客户端如何知道会话何时到期？

Question

My website is an AngularJS SPA with a Web API/SignalR back-end running on Owin. Authentication was managed with a JSON Web Token (JWT) stored in the browser's local storage.

Per corporate directive, I'm moving from JWT in local storage to HTTP-only same-site session cookies with a sliding expiration. Everything works great, except for one snag:

My application displays personal health information (PHI), so I must close the application automatically as soon as the session expires. With JWT, I could inspect the "exp" claim to automatically determine that the session has expired and remove the PHI from the screen. But with a HTTP-only cookie, I can't access any part of the token.

When I issue the cookie, I know the expiration and can inform the browser accordingly. However, when Owin refreshes the cookie, the browser will need to be notified of the new expiration, and I'm not sure how to do that.

I could store a second cookie that isn't HTTP-only, containing only the session expiration time, but I would have to refresh that cookie whenever I refresh my primary auth cookie.

How do I tell the browser when the session is going to expire, and keep the browser updated when that expiration changes? How can I attach an event handler to when the cookie is refreshed by Owin?

Here is my current cookie configuration:

app.UseCookieAuthentication(new CookieAuthenticationOptions()
{
    AuthenticationMode = AuthenticationMode.Active,
    CookieHttpOnly = true,
    ExpireTimeSpan = TimeSpan.FromHours(2),
    SlidingExpiration = true,
    CookieName = "Auth"                
});

Answer 1

Quite reliable and simple approach with HTTP is making endoint for this and check it ie once per second:

module.run(($interval) = > {
  $interval(() => {
      $http.get('/checkToken').then((result) => {
        if (result.data.expired) {...}
      }, (error) => ...)
  }, 1000);
})

And on server in checkToken endpoint you can do all needed cheks.

For better real-time client-server interaction you may consider using sockets, but this is another story.

Answer 2

I'm not intimately familiar with Angular or Owin, but working with legally-protected education data, the we solve it by ticking down the seconds, then resetting in the handler after an AJAX call completes.

A bare-bones version looks something like this:

var Countdown = {};
var Countdown.length = 3600 /* your session timeout here */;
var Countdown.seconds = Countdown.length;

var Countdown.tick = function() {
    Countdown.seconds--;
    if (Countdown.seconds == 0) {
         /* handle timeout */
    }
    /* any additional processing code here */
}

var Countdown.reset = function() { 
    Countdown.seconds = Countdown.length;
    /* any additional processing code here */
}

window.setInterval(Countdown.tick, 1000);