How to Resolve Cross-Origin postMessage Error in Shopify Integration

dev777
Shopify Partner
1 0 0

I'm working on a Shopify integration and I've encountered a cross-origin issue that I'm struggling to resolve. When trying to execute a postMessage command, I'm getting the following attached error. when I access the application through Shopify admin, it displays a blank page without any content. Intriguingly, when I inspect the Shopify admin iframe and directly open its source link in a browser, the application functions as expected, displaying all content correctly.

 

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://online-store-web.shopifyapps.com') does not match the recipient window's origin ('https://admin.shopify.com').

Any help or guidance would be greatly appreciated!

 

 

Replies 2 (2)

Liam
Shopify Staff
2731 302 783

Hi Dev777,

 

Is your app using App Bridge? I think this issue would be resolved if you switch to using App Bridge.

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

WaleedArshad
Shopify Partner
1 0 0

@Liam 

I'm encountering same error when running my embedded Shopify app outside the admin view. I've verified that the app functions correctly within the admin view, but after disabling the embedded app setting and setting forceRedirect to false, it gets stuck in a loading state and throws an error Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://admin.shopify.com') does not match the recipient window's origin ('https://overbyte2.ngrok.io'). I've attempted various troubleshooting steps giving origin manually and change target but I haven't found a solution. It seems some other developers have faced similar issues as well. Could you please offer any guidance or potential solutions based on the error message and my situation?

 

 

 

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://admin.shopify.com') does not match the recipient window's origin ('https://overbyte2.ngrok.io').
dispatch @ app-bridge@2.0.5:7
(anonymous) @ app-bridge@2.0.5:7
(anonymous) @ app-bridge@2.0.5:7
P @ app-bridge@2.0.5:7
e.compatibilityCreateApp @ app-bridge@2.0.5:14
u @ app-bridge@2.0.5:14
(anonymous) @ token?shop=quickstart-62d95e38.myshopify.com&target=%2F%3Fhost%3DYWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvcXVpY2tzdGFydC02MmQ5NWUzOA&host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvcXVpY2tzdGFydC02MmQ5NWUzOA:326

 

 

 

 

 

     var shopOrigin = "{{ $shopDomain ?? Auth::user()->name }}";
                var requestHost = "{{ \Request::get('host') }}";


                var AppBridge = window['app-bridge'];
                var actions = AppBridge.actions;
                var utils = window['app-bridge-utils'];
                var createApp = AppBridge.default;

                var app = createApp({
                    apiKey: "{{ \Osiset\ShopifyApp\Util::getShopifyConfig('api_key', $shopDomain ?? Auth::user()->name ) }}",
                    host: requestHost,
                    forceRedirect: false,
                });