I have two apps: one running on an old version of Angular (the parent app) and one running on React (the embedded pages). I'm using iFrame Resizer in the Angular app and the corresponding iframeresizer.content.min.js in the head of the React app to enable cross-app communication. The React app displays as it should.

However, I'm coming across some issues with authentication. Both apps use the same login data and communicate with the same APIs, which require authentication information. I'm currently stringifying the auth data from the Angular app (a JWT token) and passing that in the URL parameter to the embedded React page, but the token is getting too large for this to be viable long-term.

The iFrame Resizer library provides a sendMessage api, which allows me to send the auth information to the React app's containing HTML page when the iframe is initialised. In theory, this should allow me to decode this data and save it into session storage before the React app is rendered; the React app would then have access to this data via the sessionStorage api. This approach works in Edge, but not in Chrome, Firefox or Safari - the app is rendered and the React app is instantiated before the session storage auth object is set.

Because the session storage is set by the same app (inside the same frame), I can't listen for any storage changes and respond to them. And as far as I can tell, the iFrame Resizer content-side scripts are only available outside the React app (i.e. in the index.html). Listening for message events on the window provides inconsistent results across browsers; some browsers see the auth data message when it's received by the child frame, but others don't.

I was wondering if anyone else had managed to overcome this issue? Perhaps there's some kind of undocumented callback that I could use to send a message from the child to the parent, then get the auth data back that way?