« Back to home

How GitHub login detection banner works

Sometimes I come across things non-security related that intrigue me, albeit mostly I'm thinking how I can use it to exploit a service, but still...

One such piece of functionality caught my interest, a banner displayed at the top of GitHub:

I was thinking of the different ways that this type of functionality could be achieved. We have seen similar methods of detection exploited in the past to leak out information, although much more targeted at cross-origin detection (such as Social Media Fingerprint which identify images only delivered to authenticated users).

I fired up Chrome's network activity tab and expected to see some polling to a server, or websocket traffic... but nothing.

"Maybe this is some postMessage trickery" I said to myself (before realising that no-one else was in the room and I may going slightly mad), so I started to search for "addEventListener", and what I actually found was this, buried within the https://assets-cdn.github.com/assets/github-[HASH].js script:

window.addEventListener("storage", function(e) {
    if (e.storageArea === localStorage && "logged-in" === e.key && e.newValue !== a) {
        a = e.newValue;
        var n = document.querySelector(".js-stale-session-flash");
        r["default"](n instanceof HTMLElement, "Flash element must exist and be an HTMLElement -- github/legacy/behaviors/stale_session.js:40"),
        n.classList.toggle("is-signed-in", "true" === a),
        n.classList.toggle("is-signed-out", "false" === a),
        window.addEventListener("popstate", function(e) {
            null != e.state.container && location.reload()
        t.on("submit", "form", function(e) {

Pretty neat, so actually what GitHub are doing is to add a key of "logged-in" with a boolean value to localStorage upon successful authentication. Once the storage value is added, the event is fired on all other open tabs, causing this function to be called and the flash message to be shown.

Anyway, back to the security world :)