跨域场景下，如何用jQuery在First.Com的iFrame中加载Second.com的SSO页面？

核心原因 #

直接用iframe加载Second.com的SSO地址时，浏览器的第三方Cookie拦截机制会阻止Second.com写入认证Cookie——此时iframe属于First.com的上下文，Second.com的Cookie被判定为第三方，触发拦截。而新标签打开Second.com属于第一方上下文，Cookie能正常写入，后续iframe就能读取已存在的Cookie完成认证。

jQuery实现方案 #

1. 隐藏窗口预加载SSO（模拟第一方上下文） #

通过创建一个极小的隐藏窗口，在第一方环境下加载Second.com的SSO地址，完成Cookie写入后再加载目标iframe：

// 预加载SSO获取Cookie
function preloadSSOCookie() {
    // 创建隐藏窗口（尺寸极小且移出可视区域）
    const hiddenWin = window.open('https://second.com/sso', '_blank', 'width=1,height=1,top=-1000,left=-1000');
    
    // 等待SSO流程完成后关闭窗口并加载iframe
    setTimeout(() => {
        hiddenWin.close();
        renderSecondComIframe();
    }, 2000); // 超时时间根据SSO跳转实际耗时调整
}

// 渲染目标iframe
function renderSecondComIframe() {
    $('#iframe-container').html(`<iframe src="https://second.com/sso" width="100%" height="600" frameborder="0"></iframe>`);
}

// 绑定用户触发事件（避免浏览器拦截弹窗）
$(document).ready(() => {
    $('#load-sso-btn').click(() => {
        preloadSSOCookie();
    });
});

2. 优化版：监听SSO加载完成状态 #

如果SSO包含多步重定向，超时设置不够准确，可以监听窗口的加载状态：

function preloadSSOCookie() {
    const hiddenWin = window.open('https://second.com/sso', '_blank', 'width=1,height=1,top=-1000,left=-1000');
    
    hiddenWin.addEventListener('load', () => {
        // 校验是否到达SSO完成页面（根据实际回调地址调整判断逻辑）
        if (hiddenWin.location.href.includes('second.com/sso-success')) {
            hiddenWin.close();
            renderSecondComIframe();
        }
    });
}

关键注意事项 #

• 避免弹窗拦截：浏览器仅允许在用户主动交互（如按钮点击）时弹出窗口，必须将预加载逻辑绑定到用户操作，不能自动执行。
• Cookie配置要求：Second.com的认证Cookie需设置SameSite=None; Secure属性（仅HTTPS环境生效），确保第三方上下文（iframe）能读取该Cookie。
• 合规性：此方式利用第一方上下文绕过第三方Cookie限制，需确保符合目标用户群体的浏览器隐私政策及相关规范。

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