该站点如何知道我正在打开另一个选项卡？

Question

当我登录到我所在大学的一个“学习系统”网站时，我发现我无法在打开同一网站的情况下打开新选项卡。当我这样做时，网站不知何故知道并显示以下消息？

该站点究竟如何知道我在计算机上打开了哪些选项卡？据我所知，前端代码不应该访问我的私人浏览器信息。该站点可以使用哪些可访问信息来确定我已经打开了另一个选项卡？

我正在使用私人计算机访问该站点，而正在访问的站点不在本地网络上，而是通过 Internet 访问的。因此，没有可能导致这种情况的内部监控软件。我正在使用适用于 Mac 的 Google Chrome 24 Beta。

原文由 element119 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一种方法是通过 cookie 和 id。首先，您登录到该站点并在那里进行会话。这是使用 cookie 管理的；每当您访问网站上的页面时，您的浏览器都会发送一个 cookie，该 cookie 通常包含某种 ID。这样服务器就可以识别来自您的任何请求，真的来自您。因此，在这种情况下，您的原始标签和新标签将发送相同的 cookie。

其次，它还可以将另一个不同的 ID（称为页面 ID）添加到您在网站上提交的任何链接或表单。因此页面上的表单可能包含 ID 1234，并且任何链接也将包含该 ID。您访问的每个新页面都可能包含一个新 ID。所以在任何时候，该网站都知道来自您浏览器的下一个请求（由 cookie 识别）也应该包含这个其他 ID。如果您以正常方式浏览网站，点击链接，提交表格，这将是真实的，一切都会很好。

您的下一个请求不会提交预期的第二个 ID 的情况是：

1. 你点击后退按钮（你会发送一个旧的页面 ID）
2. 您打开一个新选项卡（这取决于浏览器，但如果它打开您在原始选项卡中已经所在的相同页面，它将发送当前页面 ID，而不是服务器期望的下一个页面 ID）

无论哪种方式，您发送的请求都带有服务器不期望的页面 ID，并且它可以对您的操作做出最佳猜测。

原文由 matt freake 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

该站点可能知道您打开了另一个选项卡的另一种方式是通过广播频道。简单来说，广播频道是窗口、标签等的一种手段；沟通（如果我错了请纠正我）。这是一个简单的实现：

 //Channel to post and receive messages from
const bc = new BroadcastChannel("Check-tabs");

//On message receive
bc.onmessage = (event) => {
  if (event.data === `First tab?`) {

    //Post that there is already a tab open
    bc.postMessage(`Tab already open`);
  }

  //Check if a tab is open
  if (event.data === `Tab already open`) {
    alert(`Another tab is already open.`);
  }

//Posts message to check whether another tab is open
bc.postMessage(`First tab?`);

原文由 BazzerDv 发布，翻译遵循 CC BY-SA 4.0 许可协议