Failed to execute 'postMessage' on 'DOMWindow'

Solved
Highlighted
Excursionist
24 1 4

I have a react app that, as far as I know, does not do any `.postMessage` calls. This is posted on a different domain than my server that handles the authentication (which causes it to be different from the App Url due to how the App Setup works)

 

I get this error:

 

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://service.mydomain.com') does not match the recipient window's origin ('https://ui.mydomain.com').

It seems like Shopify performs something like an `iframe.postMessage(data, 'https://service.mydomain.com')` to the iframe that hosts my UI. Can someone confirm this to be the case or is it that the iframe is doing a `postMessage` to the parent Shopify Admin window?

 

If it's the latter, I can debug (I suspect it to be in some create-react-app middleware if this is the case).

 

But if it's actually Shopify doing a postMessage to my iframe UI, then I have no idea how to fix this.

1 Like
Highlighted
Excursionist
24 1 4

Just did a quick test:

 

Opened up DevTools in this thread:

window.postMessage('hi', 'https://www.google.com')

Got the error:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.google.com') does not match the recipient window's origin ('https://community.servicenow.com').

Which means it's my UI performing the call.

0 Likes
Highlighted
Excursionist
24 1 4

Actually, did some other tests:

 

1. Tried to overwrite console.error with `console.error = () => {}`, this did not eliminate the error message, which tells me it's probably coming from the parent window.

2. Did a `window.frames[0].postMessage('test')` from the parent window and the error showed up:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://my shopify store url') does not match the recipient window's origin ('https://l46-vc-06.localtunnel.me').

 

Based on the two points above, I think shopify is doing a postMessage to the frame, and it does not know what the origin of the frame is.

 

If anyone has any other test points, please let me know, I think it's either an app setup issue (because my UI is hosted separate from the backend server and has a different url), or I just need to serve the app some specific way on the backend

0 Likes
Highlighted
Excursionist
24 1 4

This is an accepted solution.

My last test proved to be valuable. It seems you either need to do a masked redirect, proxy route, url rewrite, or nested iframe to solve this issue.

 

Hope this helps someone as this wasted a day or two of time for me.

3 Likes
Highlighted
Shopify Partner
19 0 5

Did it worked with any of your specified methods and which method did u used.

0 Likes
Highlighted
New Member
1 0 0

hi pthieu, I'm facing a similar issue, what did you end up doing? 

0 Likes