如何通过隐藏的 iframe 来完成跨域认证

隐藏的 iframe 可以用来进行跨域认证（Cross-Origin Authentication），尤其是在涉及到不同域名之间的资源访问时。这种方法通常用于单点登录（Single Sign-On, SSO）场景，其中用户的认证状态在一个域上被确认后，可以被其他域所识别。以下是通过隐藏的 iframe 实现跨域认证的基本步骤：

1. 设置隐藏的 iframe

首先，在主页面中创建一个隐藏的 iframe 元素，该元素指向另一个域名上的认证服务器或登录页面。

<iframe id="hiddenIframe" src="https://auth.example.com/login" style="display:none;"></iframe>

2. 处理登录请求

当用户访问主站点时，iframe 会加载认证服务器提供的页面。认证服务器可以是专门处理用户身份验证的服务。

3. 认证服务器响应

认证服务器接收到请求后，会检查用户的身份，并返回一个认证成功的信息（例如，一个带有认证票据的 HTML 页面）。这个票据（Ticket Granting Ticket, TGT）通常是一个唯一的标识符，用来表示用户的认证状态。

4. iframe 回调

认证服务器可以将认证结果发送回主站点，通过 iframe 的 onload 事件监听器来捕获这个响应。一旦 iframe 加载完成，主页面可以通过检查 iframe 的 document 属性来获取认证票据。

document.getElementById('hiddenIframe').contentWindow.onload = function() {
    var authResult = document.getElementById('hiddenIframe').contentDocument.body.innerHTML;
    if (authResult.includes('ticket')) {
        // 解析认证票据
        var ticket = extractTicket(authResult);
        // 使用票据进行后续操作
        handleAuthentication(ticket);
    }
};

5. 验证票据

主站点可以使用票据向认证服务器请求一个服务票据（Service Ticket, ST），然后用这个票据来访问受保护的资源。

function handleAuthentication(ticket) {
    fetch('https://protected-resource.example.com/verify', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ ticket: ticket })
    })
    .then(response => response.json())
    .then(data => {
        // 根据返回的数据判断是否认证成功
        if (data.success) {
            // 用户认证成功后的逻辑
        } else {
            // 认证失败处理
        }
    });
}

6. 访问受保护资源

一旦获得了服务票据，就可以用它来访问那些需要认证的资源了。

这种方法的一个关键点在于确保 iframe 的内容不会暴露给用户，同时也要确保认证票据的安全传输。此外，还需要考虑如何处理认证失败的情况以及如何刷新或更新票据等细节。

请注意，这种做法需要在服务器端和客户端之间有良好的协调，并且需要考虑到安全性问题，比如防止 CSRF 攻击等。