I am trying to load a React application inside an iframe using the src attribute. The React application includes Partytown, which is used for logging Mixpanel events. When I run the React application standalone (without using an iframe), Partytown successfully sends Mixpanel events. However, when I load the React application inside an iframe, I encounter the following error:
Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.
Here are some details about my setup:
- The React application is hosted at
http://localhost:3000/my-application - The iframe is hosted at
http://localhost:3001/iframe.html
Code snippet from the iframe.html file:
...
<body>
<!-- Other content in the iframe -->
<div class='my-application-iframe-div'>
<iframe id='my-application-id' title='My application' class='my-application-iframe' src='http://localhost:3000/my-application'></iframe>
</div>
<!-- Other content in the iframe -->
</body>
I have tried researching potential solutions, but I'm unsure how to resolve this issue. It seems to be a cross-origin access issue between the parent page and the iframe, but I'm not sure how to enable Partytown to send Mixpanel events when the React application is loaded inside the iframe.
I would appreciate any insights or guidance on how to resolve this issue and allow Partytown to send Mixpanel events when the React application is loaded inside an iframe.