跨域SSO登录技巧：postMessage自动实现

本文深入讲解了如何利用 HTML5 的 postMessage API，在 CodeIgniter 应用（domain-a.com）与外部 SSO 服务（domain-b.com）之间实现安全、合规的跨域单点登录自动触发——既绕过浏览器同源策略限制，又不破坏 SSO 原有的安全机制（如 CSRF 防护、密码不落盘等）；通过前后端协同的消息校验、严格 origin 验证、沙箱 iframe 控制及密码处理建议，提供了一套轻量、标准、零依赖的落地实践方案，特别适合多系统快速集成场景，也为后续平滑升级至 OAuth 2.0/OIDC 奠定坚实基础。

本文介绍如何在 CodeIgniter 应用（domain-a.com）用户登录时，自动向外部 SSO 服务（domain-b.com）发起认证请求，利用 postMessage 实现安全、合规的跨域表单提交与自动登录。

本文介绍如何在 CodeIgniter 应用（domain-a.com）用户登录时，自动向外部 SSO 服务（domain-b.com）发起认证请求，利用 postMessage 实现安全、合规的跨域表单提交与自动登录。

在构建多系统集成场景中，常需将自有应用（如基于 CodeIgniter 的 domain-a.com）接入统一身份提供商（IDP，如 domain-b.com 提供的 SSO 服务）。由于浏览器同源策略限制，直接操作跨域 iframe 内 DOM 或提交表单不可行；而服务端代理方式又可能绕过 SSO 安全机制（如 CSRF 防护、密码不落盘等）。此时，window.postMessage 是最轻量、标准且可控的解决方案——它允许两个不同源的页面在明确授权的前提下安全通信。

✅ 核心原理

postMessage 是 HTML5 提供的跨源通信 API。发送方调用 iframe.contentWindow.postMessage() 向目标窗口发送消息，接收方通过监听 message 事件并校验 e.origin 确保来源可信，从而规避 XSS 和伪造风险。

? 实施步骤（两端协同）

▶ 前端：domain-a.com（主应用登录页）

在用户点击“登录”后、跳转前，向隐藏的 SSO iframe 发送凭证数据：

<!-- 隐藏 iframe，指向 SSO 登录页 -->
<iframe src="https://domain-b.com/login" id="ssoapp" style="display:none;" sandbox="allow-scripts"></iframe>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('#login-form').on('submit', function(e) {
        e.preventDefault(); // 阻止默认提交，先同步 SSO

        const username = $('#username').val().trim();
        const password = $('#password').val();

        if (!username || !password) return;

        const ssoFrame = document.getElementById('ssoapp');
        const ssoOrigin = 'https://domain-b.com';

        // 构造结构化消息
        const payload = {
            type: 'SSO_AUTO_LOGIN',
            data: { username, password }
        };

        // 发送消息（必须指定精确 origin，禁止使用 '*'）
        ssoFrame.contentWindow.postMessage(
            JSON.stringify(payload),
            ssoOrigin
        );

        // 可选：延时后提交本域表单，确保 SSO 已响应
        setTimeout(() => this.submit(), 300);
    });
});
</script>

? 关键细节：

• sandbox="allow-scripts" 确保 iframe 可执行 JS，但禁用其他高危权限（如 allow-same-origin 必须省略，否则破坏隔离）；
• e.origin 校验必须严格匹配协议+域名+端口（如 https://domain-b.com），不可仅校验域名；
• 消息体建议包含 type 字段便于未来扩展（如登出、令牌刷新等）。

▶ 前端：domain-b.com（SSO 登录页）

在 SSO 的登录页面（如 /login）中注入监听逻辑：

<!-- SSO 登录表单需有固定 ID，便于脚本定位 -->
<form id="sso-login-form" action="/auth" method="POST">
    &lt;input type=&quot;text&quot; id=&quot;username&quot; name=&quot;username&quot; required&gt;
    &lt;input type=&quot;password&quot; id=&quot;password&quot; name=&quot;password&quot; required&gt;
    <button type="submit" id="submit_button">Sign In</button>
</form>

<script>
window.addEventListener('message', function(e) {
    // ? 严格校验来源（生产环境务必硬编码，勿动态解析）
    if (e.origin !== 'https://domain-a.com') {
        console.warn('Ignored message from untrusted origin:', e.origin);
        return;
    }

    try {
        const payload = JSON.parse(e.data);
        if (payload.type !== 'SSO_AUTO_LOGIN') return;

        const { username, password } = payload.data;

        // 自动填充并提交（避免用户感知延迟）
        document.getElementById('username').value = username;
        document.getElementById('password').value = password;

        // 触发原生 submit 行为（兼容 CSRF Token、前端校验等）
        document.getElementById('sso-login-form').submit();

    } catch (err) {
        console.error('Invalid SSO message:', err);
    }
});
</script>

⚠️ 安全注意事项：

• 绝不暴露敏感逻辑：该脚本仅用于填充+提交，认证逻辑、密码处理、会话创建等必须在 domain-b.com 后端完成；
• CSRF 防护仍生效：因最终是用户主动提交表单（form.submit()），SSO 站点原有的 CSRF Token 验证不受影响；
• 禁止明文传输密码：postMessage 数据虽在内存中传递，但仍建议在 domain-a.com 前端对密码做一次哈希（如 PBKDF2）后再发送——前提是 domain-b.com 后端支持对应验证流程；更推荐方案是 domain-a.com 仅传用户名，由 domain-b.com 重定向至交互式登录页（兼顾安全与体验）。

✅ 部署验证清单

• [ ] domain-b.com 的登录页已部署监听脚本，且 id 属性与 domain-a.com 中操作目标一致；
• [ ] 两端 origin 字符串完全匹配（注意 HTTPS、无尾部斜杠、端口显式声明）；
• [ ] iframe src 指向 domain-b.com 的可交互登录页（非跳转页或错误页）；
• [ ] 浏览器控制台无 Blocked a frame with origin "X" from accessing a cross-origin frame 报错；
• [ ] 手动测试：清空 cookies 后，在 domain-a.com 输入账号密码，观察 domain-b.com 是否自动完成登录并返回有效会话。

该方案无需修改后端认证流程，不依赖第三方 SDK，完全基于 Web 标准实现，适用于任何支持现代浏览器的 SSO 场景。对于长期集成，建议后续升级为标准 OAuth 2.0 / OIDC 协议，但作为快速、可控的过渡方案，postMessage 是当前最优解。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《跨域SSO登录技巧：postMessage自动实现》文章吧，也可关注golang学习网公众号了解相关技术文章。