如何在Next.js应用中正确接收Streamlit iframe的postMessage事件？

问题背景 #

我正在Next.js应用中通过iframe嵌入Streamlit应用，目标是使用window.postMessage将“总使用令牌数”信息从Streamlit发送到Next.js父应用，但在Next.js中捕获这些消息时遇到了困难。

核心问题：
尽管在Next.js应用中设置了监听message事件的事件监听器，且从Streamlit应用发送了消息，但Next.js似乎并未接收到这些消息，事件监听器在发送消息后并未触发。

Next.js父应用代码 #

// Inside a React component
useEffect(() => {
  const handleMessage = (event) => {
    console.log('Received message:', event.data);
  };

  window.addEventListener('message', handleMessage);

  // Cleanup to remove event listener
  return () => {
    window.removeEventListener('message', handleMessage);
  };
}, []);

Streamlit子应用代码 #

# Python snippet to send message to parent
js = """
<script>
window.parent.postMessage({totalTokensUsed: 1234}, '*');
</script>
"""
st.components.v1.html(js, height=0)

已尝试的操作 #

• 确保Streamlit和Next.js应用均已启动且可访问。
• 在postMessage调用中使用通配符'*'作为目标源进行调试。
• 在消息事件监听器中添加控制台日志，确认其未执行。
• 尝试使用window.parent.socket.postMessage（参考Stack Overflow相关问题）
• 查阅MDN的postMessage文档

疑问 #

1. Streamlit iframe与Next.js父应用之间的postMessage通信是否存在已知兼容性问题？
2. 针对Streamlit的执行模型，postMessage调用和事件监听器应如何构建？
3. 即使使用'*'作为目标源，CORS策略是否仍会影响消息传递？

解决方案与问题分析 #

1. 核心问题：Streamlit动态渲染导致脚本执行时机错误 #

Streamlit的组件渲染是异步动态的，直接通过st.components.v1.html插入的脚本可能在iframe完全加载前就执行了，此时window.parent可能还未正确指向Next.js父页面，或者父页面的事件监听器尚未初始化完成。

2. 修复Streamlit端代码 #

调整脚本执行时机，确保在iframe稳定后发送消息，同时避免Streamlit重渲染时重复发送：

js = """
<script>
// 等待DOM完全加载后执行
document.addEventListener('DOMContentLoaded', function() {
  // 标记已发送，防止Streamlit重渲染重复触发
  if (!window._tokenMessageSent) {
    window._tokenMessageSent = true;
    // 生产环境替换为Next.js应用的实际域名，不要用*
    window.parent.postMessage({totalTokensUsed: 1234}, 'http://localhost:3000');
  }
});
</script>
"""
st.components.v1.html(js, height=0)

3. 优化Next.js端监听器 #

添加origin校验（安全最佳实践），确保监听器正确注册：

useEffect(() => {
  const handleMessage = (event) => {
    // 生产环境替换为Streamlit应用的实际域名
    if (event.origin !== 'http://localhost:8501') return;
    
    console.log('Received message:', event.data);
    // 这里可以处理令牌数据，比如更新组件状态
    // setTotalTokens(event.data.totalTokensUsed);
  };

  window.addEventListener('message', handleMessage);

  return () => {
    window.removeEventListener('message', handleMessage);
  };
}, []);

4. 疑问解答 #

• 兼容性问题：两者本身无兼容性问题，核心是Streamlit的动态渲染机制导致脚本执行时机偏差。
• CORS影响：使用*作为目标源不会被CORS阻止，但生产环境必须指定明确origin，否则存在安全风险。
• Streamlit执行模型适配：必须利用DOM加载事件确保脚本在iframe稳定后执行，同时标记已发送状态，避免Streamlit因状态变化重渲染时重复发送消息。

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