Embedded App: Message to Parent 2

App Building
1

I'm integrating a Retool app within my js application using retool-react library.
The Retool app is rendered and sends data from js query using

parent.parent.postMessge({eventType: 'test', payload: 'test'}, '*')

The js app does not trigger onData method.
I checked all events using window.addEventListener and it shows that the app actually receives an event but ignores it because event.origin is null.
I have found the similar issue, but it has been closed and I can not post comments there.

Please help find a way to set the correct origin for the event so onData hook does not ignore it.
What I have tried so far:
parent.parent.postMessge({eventType: 'test', payload: 'test'}, urlparams.href)
parent.parent.postMessge({eventType: 'test', payload: 'test'}, 'https://retool.company-name.com/'
parent.parent.postMessge({eventType: 'test', payload: 'test'}, 'https://retool.company-name.com'
parent.parent.postMessge({eventType: 'test', payload: 'test'}, 'retool.company-name.com/'
parent.parent.postMessge({eventType: 'test', payload: 'test'}, 'retool.company-name.com'

where company-name is an actual company name.

2

try these perhaps:

wherever you have your js app hosted you might need whitelist the retool ips (dns records) also

3

hi @bobthebear, thank you for the answer. it didn't help

4

Hey @Artem_Borovenskyi! I'm spinning up a React app to do some testing for you now. In the meantime, can you try passing the sandbox attribute into your <Retool /> component if you're not already doing so? Your syntax for postMessage definitely looks good at first glance!

One workaround that should almost certainly work is to make sure that both your React and Retool apps are hosted on the same base domain.

1 Like