如何解决JavaScript中Outlook插件父窗口向弹窗传值无响应问题

核心问题分析 #

• 消息发送时机过早：父窗口打开弹窗后立刻调用postMessage，但此时弹窗DOM未加载完成，window.addEventListener('message')还未注册，导致消息直接丢失。
• Origin判断错误：弹窗代码错误校验父窗口origin为https://outlook.office.com，但实际父窗口的origin是本地开发地址https://localhost:44343，即使消息到达也会被拦截。
• 代码拼写错误：弹窗代码中出现even.data的笔误，正确应为event.data。

修复步骤 #

1. 调整父窗口消息发送时机 #

不要在弹窗刚打开就发送消息，等待弹窗加载完成后再触发postMessage，同时给父窗口的消息监听加上origin校验：

function openIdpPopup(endpoint, webAppId) {
    const popupWidth = 500;
    const popupHeight = 400;
    const popupLeft = (window.screen.width - popupWidth) / 2;
    const popupTop = (window.screen.height - popupHeight) / 2;

    const popup = window.open('ep-collaborate-idp-login.html', '_blank', `width=${popupWidth},height=${popupHeight},left=${popupLeft},top=${popupTop}`);
    console.log(endpoint);
    console.log(webAppId);

    if (popup) {
        // 等待弹窗加载完成后发送数据
        popup.addEventListener('load', function() {
            const message = {
                endpoint: endpoint,
                webAppId: webAppId
            };
            popup.postMessage(message, 'https://localhost:44343');
        });

        // 监听弹窗返回的token与邮箱，校验origin防止恶意消息
        window.addEventListener('message', function (event) {
            if (event.origin !== 'https://localhost:44343') return;
            
            const data = event.data;
            if (data && data.token && data.email) {
                sessionStorage.setItem('idp_token', data.token);
                sessionStorage.setItem('email', data.email);
                console.log('Token received:', data.token);
                console.log('Email received:', data.email);
                popup.close();
                window.location.href = "ep-col-apicalls.html";
            }
        });
    } else {
        console.error('Failed to open pop-up window. Ensure pop-ups are not blocked by the browser.');
    }
}

2. 修复弹窗代码问题 #

修正拼写错误，加上正确的origin校验，确保监听逻辑正常触发：

document.addEventListener('DOMContentLoaded', function () {
    console.log('DOM is ready');
    
    window.addEventListener('message', function (event) {
        // 校验消息来源的合法性
        if (event.origin !== 'https://localhost:44343') return;
        
        console.log('message received');
        const data = event.data;
        
        if (data && data.endpoint && data.webAppId) {
            const endpoint = data.endpoint;
            const webAppId = data.webAppId;
            console.log('Endpoint received:', endpoint);
            console.log('Client ID received:', webAppId);
            
            // 执行IdP登录逻辑后，向父窗口返回结果示例：
            // const token = '获取到的身份令牌';
            // const email = '用户邮箱';
            // window.opener.postMessage({token: token, email: email}, 'https://localhost:44343');
        } else {
            console.error('Received invalid data from parent window:', data);
        }
    });
});

额外注意事项 #

• 确保弹窗与父窗口的origin完全一致（协议、域名、端口均匹配），postMessage的targetOrigin禁止使用*（生产环境存在安全风险）。
• 打开浏览器开发者工具的控制台，查看是否有报错信息，同时检查弹窗控制台的日志输出。
• 确认Outlook插件已正确配置权限，弹窗页面在插件允许的域名列表内。

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