React状态在同域iframe间意外共享？求助排查方案

1. React-Query 缓存/实例的全局共享问题 #

React-Query 默认用内存缓存，但如果不小心把QueryClient实例挂载到了全局对象（比如window），或者在全局作用域初始化单例，同域下的iframe会复用同一个缓存池，导致状态串用。

• 检查new QueryClient()的创建位置：是不是在全局作用域初始化，而非每个应用实例独立创建？
• 确认有没有代码把QueryClient实例赋值给window或其他全局可访问对象。
• 测试给每个iframe的React-Query配置独立的查询键前缀，比如基于iframe的window.name或自定义标识，看能不能隔离状态。

2. Next.js 全局模块的单例副作用 #

Next.js 不管开发还是生产模式，同域iframe可能共享某些单例模式的模块——比如用let instance; export default () => instance || (instance = new XXX())实现的工具类，浏览器会把同域下的这类模块视为同一个实例，直接导致状态共享。

• 排查项目里的单例模块，尤其是状态相关的工具类、全局配置类。
• 检查模块初始化时有没有依赖window等全局对象的属性，且未做隔离，比如共享了同一个全局事件监听器。

3. 浏览器同域特性的意外共享 #

iframe虽有独立window，但同域下部分浏览器特性会导致隐性共享：

• 检查是否用了SharedWorker/Service Worker：这类Worker是同域共享的，要是应用注册了Service Worker，多个iframe会共用同一个实例，Worker里的状态逻辑会直接串到所有iframe。
• 排查有没有代码用window.parent/window.top操作父页面全局变量，间接让iframe间传递状态。
• 检查是否存在全局自定义事件总线：比如window.addEventListener('custom-event', ...)，如果事件没做iframe隔离，一个iframe触发的事件会被另一个iframe监听并处理。

4. React 根节点/上下文的意外复用 #

• 检查React挂载逻辑：是不是不小心用了父页面的DOM元素（而非iframe内部DOM），导致两个应用共用同一个React根？
• 确认自定义React Context是不是在全局作用域创建的，而非每个应用实例独立提供，导致多个iframe共用同一个Context状态。

5. 网络层面的关联问题 #

• 检查请求的HTTP缓存配置：比如ETag或Cache-Control设置是否导致一个iframe的响应被另一个复用（不过这种情况通常是稳定的，而非“有时发生”，可以做验证）。
• 排查WebSocket连接：如果没有做实例隔离，同域下的WebSocket可能被多个iframe共用，收到相同的推送消息引发状态变更。

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