如何将我的应用程序限制为单个浏览器选项卡？

Question

坦率地说，在 v1.0 中拥有需要三个表单提交的功能，并且 $_SESSION 会话数据保存所有中间内容，只是为了让用户启动一个操作，这会带来太多麻烦，然后打开第二个选项卡并执行第二个操作，该操作会破坏会话数据。

我怀疑这是恶意的（但不能否认）。更有可能的是，用户开始一项操作，被中断，忘记他们已开始或找不到原始选项卡，因此再次开始（然后找到原始选项卡并尝试再次完成操作）。

由于我用 PHP 编码，我可以检测表单提交时会话数据的存在（如果用户打开另一个选项卡，我将如何使用 JS 来做到这一点 - 我想我需要 Ajax - 对吧？）。

因此，每次开始操作时，我都会检查会话数据中的标志，如果设置了，我会重新加载为“对不起，戴夫。恐怕我不能这样做”页面，否则我设置标志并继续（记住在操作结束时清除它）。

我想这会起作用，但是：
1) 将浏览器应用程序限制为单个选项卡/实例是否可以接受？
2) 我应该尝试在 v2.0 中允许多个实例吗？

还有其他意见、帮助或建议吗？

Answer 1

更好的设计是避免在会话中存储用户交互状态。将其放在隐藏的表单字段或其他内容中，以便每个客户端请求都带有其关联的状态。如果您担心用户篡改它，请使用 HMAC 来防止这种情况，并且如果它包含用户不应该看到的内容，则可以对其进行加密。

仅声明应该在选项卡之间共享（例如用户的登录身份或购物车之类的内容）应该存储在会话中。

Answer 2

您最多可以在会话文件中保留“最后请求的页面”列表，并使用标志来指示如果它是这些关键表单标志之一，则不应允许用户离开它。因此，如果您使用 form.php 并且它是一个 no-move-off 页面，那么加载的任何新页面都应该显示“中止或关闭窗口”选项。

您无法阻止用户打开另一个选项卡/窗口，但您可以阻止他们在其他窗口/选项卡中移动到站点中的其他位置。

但是，请考虑这是一个非常糟糕的用户体验。想象一下，如果亚马逊将您困在购物车页面中，并且在您不必实际购买东西的情况下永远不会让您进入另一个页面。考虑更新您的代码以允许多个不同的窗口使用相同的表单。

Answer 3

由于每个浏览器都支持选项卡式浏览，因此尝试将浏览限制为单个选项卡将是一种糟糕的用户体验（那么您不妨制作一个桌面应用程序）。

解决此问题的一种方法是在表单中添加 CSRF 令牌（作为隐藏变量），该令牌将随请求一起提交。

CSRF 参考

生成令牌的方法有很多，但本质上是：

1. 创建令牌
2. 存储在您的 $_SESSION 中
3. 输出带有

然后，当表单提交时，您检查 $_REQUEST['{token name}'] == $_SESSION[{token name}]` 。

如果该令牌不同，您就知道它不是您最初生成的表单，因此可以忽略该请求，直到真正的表单带有正确的令牌。

有一件事：如果攻击者能够弄清楚您如何生成 CSRF 令牌，那么他们就可以伪造请求。

Answer 4

在我登录后添加了以下脚本（例如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>

在我的其余页面的页眉中添加了以下脚本 - 'random_value' 来自该用户的数据库

<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

如果我现在这样做，我可能会编写一个单页 AngularJs 应用程序（尽管任何形式的 Js 都可以）。

启动时，在本地存储中查找标志。如果设置，则拒绝启动，并带有适当的消息，否则设置标志和运行应用程序。

当然，恶意用户可以绕过它，因为它不是服务器端检查，但我只是拒绝支持这样的。