We have a next.js app that we normally run by embedding it in an iframe on a third-party website. It uses react and react-query for state management. For a specific usecase, we wanted to run two instances of our app on the same website, and noticed very weird behaviour: the state of the two apps is getting jumbled together, and state changes in one iframe sometimes (not always) result in a state change in the other iframe. I wish I could give more details on when/how it happens, but I’m pretty confused by the issue and haven’t been able to create a minimal reproducible example. Hopefully someone has an idea to help me troubleshoot.

It’s not related to local storage/cookies (we don’t use them). Setting the iframes on different domains solves the issue, which makes me think it might be due shared execution context of iframes from the same origin? However, I don’t see where/how that could happen since while same-site iframes can access one another’s context, it has to be done explicitly (the global variables/functions as far as one iframe is concerned are not the same as for the other iframe)?