跨源浏览器标签通信失败：无iframe/popup时window.postMessage不生效

需求 #

实现不同浏览器标签间的客户端UI事件（鼠标、键盘等）通信，统一跟踪用户输入判断是否闲置，超时后关闭登录会话。

场景与当前问题 #

• 存在一个Hub应用（.NET Core 3.1 MVC），用户登录后通过单点登录打开其他独立应用（.NET Framework 4.8 MVC/Web Forms），所有应用在不同浏览器标签运行。
• 当前问题：Hub应用的闲置检测会在用户操作其他标签时误判超时，导致用户返回Hub或操作其他标签时需要重新登录。

已尝试的方案 #

1. 配置.NET Core MVC标准会话超时（startup.cs）：不符合需求，无法跨标签同步闲置状态。
2. 研究四种跨标签通信方式：均受同源限制，无法跨不同域名应用使用。
3. 尝试Redis：在.NET Framework 4.8应用中引入StackExchange.Redis后无法加载，无法正常使用。
4. 尝试window.postMessage（宣称支持跨源）：找不到无iframe/popup的示例，自行搭建本地SSL IIS站点（https://localhost:48062和https://localhost:48063）测试，但未成功。

测试代码 #

站点1：https://localhost:48062/index.html

<!DOCTYPE html>
<html>
    <head>
        <title>
            Post Message : Test2
        </title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

        <script type="text/javascript">

            const openTest3 = () => {
                window.open("https://localhost:48063/index.html", "_blank");
            }

            $(function() {
                console.log("document ready");
                // Note I've used window.addEventListener() as well here
                window.onmessage = (event) => {
                console.log("onmessage");
            }
            });

        </script>
    </head>
    <body>
        <h1>Test2 Page</h1>
        <div>
            <input type="submit" value="Open Index.html on Test3" onclick="openTest3();" />
        </div>
    </body>
</html>

站点2：https://localhost:48063/index.html

<!DOCTYPE html>
<html>
    <head>
        <title>
            Post Message : Test3
        </title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script type="text/javascript">

            const DoNothing = () => {
                console.log("Doing Nothing In Particular");
            }


            function resetIdleTimeout() {
                window.postMessage("MouseOver, Click, or KeyDown performed on Test3 Page", "*");
                console.log("window.postMessage called");
            }
    
            function workSessionTimeout() {
                // Set the window events
                $(window).mouseover(() => resetIdleTimeout());
                $(window).click(() => resetIdleTimeout());
                $(window).keydown(() => resetIdleTimeout());
            }

            $(function() {
                window.postMessage("Test 3 Page Loaded", "*");
                resetIdleTimeout();
                workSessionTimeout();
            });
        </script>
    </head>
    <body>
        <h1>Test3 Page</h1>
        <div>
            <input type="submit" value="Click Here for No Action" onclick="DoNothing();" />
        </div>
    </body>
</html>

测试现象 #

无报错，但https://localhost:48062的控制台未收到任何来自https://localhost:48063的消息。

寻求解决方案 #

需要可行的跨标签通信方案，包括替代的会话/Cookie机制，或者window.postMessage的正确使用方法，以实现跨应用标签的闲置状态同步，避免误判超时。

内容的提问来源于stack exchange，提问作者Dan7el