Failed to execute 'postMessage' on 'DOMWindow'

[sbogdanova]

Hello, everyone!

I'm trying to fix this issue from a couple days and I'm still not manage it. 

My app was rejected, because Shopify App Bridge doesn't work properly. When I install the app, the browser redirects to the original url of the app (not shopify admin).
The error, which appears in console is:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://shopvote-test.myshopify.com') does not match the recipient window's origin ('https://middleware.shopvote.de').

 
In my app, I'm using the following script:

<script src="https://unpkg.com/@shopify/app-bridge@2"></script>
<script>
let host = btoa('{{ Auth::user()->name }}');
var AppBridge = window['app-bridge'];
var createApp = AppBridge.default;
var app = createApp({
apiKey: '{{ config('shopify-app.api_key') }}',
host: host,
forceRedirect: false, 
});
</script>

As you see I use version 2 of app-bridge, so I encode host with Base64. With version 1 I used shopOrigin property without encoding and the result was the same.
If I change forceRedirec to true, it redirects me to page, which is not founded - https://shopvote-test.myshopify.com/apps/8e54a3332a950a059679711784aa9227/login.
On version 1, it redirects me to the shopify admin page, but in the iframe I have '500 Server error'.

When I open the app from Apps in admin dashboard, everything works fine. The issue is only on installing.

I hope someone will help! Thank you!

[FiveThrive]

I notice in your URL that the 'admin' portion is missing. I'm experiencing the same issue. Must be in a redirect somewhere in AppBridge.

[dahliaa]

Were you able to solve for this? Running into the same problem and unsure how to resolve.

Any insights are appreciated!

[FiveThrive]

No but I found this which hasn't been touched in 14 days.

https://github.com/Shopify/shopify-app-bridge/issues/65

This is preventing updates I need to have fixed by Oct 1 ...

[ElanaK]

Hello,

I was able to reproduce this error by using an invalid host value and setting forceRedirect to false. 

I think we have a couple things going on here:

We don't recommend handling the host encoding on your own. You should be able to get it from the location on the iFrame. So something like this:

const host = new URLSearchParams(window.location.search).get('host')

We also want forceRedirect to be true so the app can go through the auth process within Admin. We have the option of turning it off for debugging or if you want to insert some additional operations, but then your app would be responsible for redirecting back to the auth flow.

I'm not sure what value this returns...

let host = btoa('{{ Auth::user()->name }}');

... but I suspect, like mentioned in the responses below, that it's missing /admin at the end. If you get the host from the iframe query params and set forceRedirect to true, things should work! 

[sbogdanova]

Hello,

Thank you for your response.

After install the app in shopify, the browser redirects to my url, which is https://middleware.shopvote.de/

This line:

const host = new URLSearchParams(window.location.search).get('host')

returns null and the error in console

APP::ERROR::INVALID_CONFIG: host must be provided

My code: 

    <script src="https://unpkg.com/@shopify/app-bridge@2.0.3"></script>
    <script>
        var AppBridge = window['app-bridge']
        var createApp = AppBridge.default;
        const host = new URLSearchParams(window.location.search).get('host')
        var app = createApp({
            apiKey: '{{ config('shopify-app.api_key') }}',
            host: host,
            forceRedirect: true
        });
    </script>

Is there another way to get the host, before redirection to shopify admin executed? 

[ElanaK]

Hi sbogdanova,

After install the app in shopify, the browser redirects to my url, which is https://middleware.shopvote.de/

I was able to get the host value from the params on my end, but perhaps it was because I was landing on Admin. The redirect shouldn't be taking back to your app domain after the auth process, but to Admin. 

This is how osiset/laravel-shopify gets the host from the request. Could you try something like this?

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

Note that I didn't include the shopOrigin in the snippet a pasted above since it's no longer necessary.

Please let us know if that makes a difference for you. Thanks for your patience with this!

Elana

[sbogdanova]

Hi ElanaK, 

Thank you for your answer.

I finally fixed this by using the Auth helper from Laravel with 'optional' function.

The helper returns the shop name before redirection, but inside iframe the helper returns null. This is why I used 'optional' function.

const host = btoa('{{ optional(Auth::user())->name }}/admin')

You suggested not to use 'btoa' function for encoding the name, but for now I think this works properly.

Thank you for your help! 

[Rajshekhar]

Hi Sbogdanova,

I am facing same issue. when I tried your solution I am getting following error.

app-bridge@2:1 Uncaught TypeError: Failed to construct 'URL': Invalid URL
at Object.dispatch (app-bridge@2:1)
at app-bridge@2:1
at app-bridge@2:1
at P (app-bridge@2:1)
at Object.e.compatibilityCreateApp (app-bridge@2:8)
at u (app-bridge@2:8)
at loadApp?shop=raj-dev-store6.myshopify.com&host=cmFqLWRldi1zdG9yZTYubXlzaG9waWZ5LmNvbS9hZG1pbg:63

Any idea how to tackle this?

Thanks,
Rajashekhar

[Ponmari]

@sbogdanova 

Hello everyone, 

If you are a newbie in shopify app development like me, You might encounter this issue as often, Please look in to your cmd for error, and fix that issue, it will be fixed. or try removing or editing your recent changes in the code.