How to restrict my app to a single browser tab?

Question

Frankly, it\'s just causing too much hassle in in v1.0 to have a functionality which requires three form submissions, with $_SESSION session data holding all of

Answer 1

With every browser supporting tabbed browsing it would be a poor user experience to try to restrict browsing to a single tab (you might as well make a desktop app then).

One way you could solve this is by adding a CSRF token to your forms (as a hidden variable), that would be submitted with the request.

CSRF reference

There are many ways to generate the token, but essentially you:

1. create the token
2. store in your $_SESSION
3. output the form with <input type="hidden" name="{token name}" value="{token value}" />

Then when the form submits you check $_REQUEST['{token name}'] == $_SESSION[{token name}]`.

If that token is different you know it wasn't the form you originally generated and thus can ignore the request until the real form comes in with the correct token.

One thing: if an attacker can figure out how you generate your CSRF tokens then they can forge requests.

Answer 2

If I were doing this now, I would probably code a single page AngularJs app (although any form of Js will do).

On start-up, look in local storage for a flag. If set, refuse to start, with suitable message, else set the flag & run the app.

Sure, a malicious user could get around it, since it's not a server-side check, but I would just refuse to support such.

Answer 3

A better design would be to avoid storing user interaction state in the session. Put it in hidden form fields or something so that each client request carries its associated state with it. If you're concerned about the user tampering with it, use an HMAC to prevent that, and possibly encrypt it if it contains things the user shouldn't be able to see.

Only state that should be shared between tabs — like the user's login identity, or something like a shopping cart — should be stored in the session.

Answer 4

Added the below script after I login(say dashboard.php)

<script>
$(document).ready(function()
{
    $("a").attr("target", "");
    if(typeof(Storage)              !== "undefined") 
    {
        sessionStorage.pagecount    =   1;
        var randomVal               =   Math.floor((Math.random() * 10000000) + 1); 
        window.name                 =   randomVal;
        var url                     =   "url to update the value in db(say random_value)";
        $.post(url, function (data, url)
        {
        });
    } 
    else 
    {
        var url                     =   "url to remove random_value";           
        $.post(url, function (data, url)
        {
            sessionStorage.removeItem('pagecount');
            sessionStorage.clear();
            window.location         =   'logout.php';
        });
    }    
});
</script>

Added the below script in Header in rest of my pages - 'random_value' is from db for that user

<script>
$(document).ready(function()
{       
    $("a").attr("target", "_self");

    if(typeof(Storage)                      !== "undefined") 
    {
        if (sessionStorage.pagecount) 
        {
            if('<?=$random_value?>'         ==  window.name)
            {
                sessionStorage.pagecount    =   Number(sessionStorage.pagecount) + 1;
            }
            else
            {
                var url                     =   "url to remove random_value";           
                $.post(url, function (data, url)
                {
                    sessionStorage.removeItem('pagecount');
                    sessionStorage.clear();
                    window.location         =   'logout.php';
                });

            }               
        } 
        else 
        {           
            var url                         =   "url to remove random_value";           
            $.post(url, function (data, url)
            {
                sessionStorage.removeItem('pagecount');
                sessionStorage.clear();
                window.location             =   'logout.php';
            });
        }
    } 
    else 
    {   
        var url                             =   "url to remove random_value";                   
        $.post(url, function (data, url)
        {
            sessionStorage.removeItem('pagecount');
            sessionStorage.clear();
            window.location                 =   'logout.php';
        });
    }   
});
</script>

Answer 5

At most you can is keep a "last requested page" listing in the session file, with flags to indicate that the user shouldn't be allowed to move off it if it's one of these critical form flags. So if you're on form.php and it's a no-move-off one, then any new page loaded should present an "abort or close window" option.

You cannot prevent a user from opening up another tab/window, but you can prevent them from moving elsewhere in your site in those other windows/tabs.

However, consider that this is a very poor user experience. Imagine if Amazon trapped you in the shopping cart page and never let you on to another page without having to actually buy something. Consider updating your code to allow multiple different windows use the same form.