Failed to execute 'postMessage' on 'DOMWindow'

Topic summary

Shopify App Bridge v2 install flow fails, redirecting to the app’s domain instead of Admin, causing a postMessage origin mismatch. Console shows: target origin https://shopvote-test.myshopify.com vs recipient https://middleware.shopvote.de.

Key errors and symptoms:

  • When forceRedirect=false, host is null and “APP::ERROR::INVALID_CONFIG: host must be provided.”
  • When forceRedirect=true, redirect goes to a 404-like path. App Bridge v1 shows a 500 in the iframe.

Root cause discussed:

  • Invalid/missing host value and handling. Several note the missing “/admin” segment and issues from manually encoding host.

Recommended approach (Shopify staff):

  • Do not manually encode host. Read it from the iframe query params: new URLSearchParams(window.location.search).get(‘host’).
  • Set forceRedirect: true so auth completes in Admin. shopOrigin is not needed in v2.
  • For Laravel (osiset), pass host from the request (Request::get(‘host’)) when creating the app.

Outcomes:

  • Original poster’s workaround: build host from Laravel Auth user name with “/admin” and btoa(); it works for them, though not recommended.
  • Another user reports “Failed to construct ‘URL’: Invalid URL” with that workaround; no fix posted.

Status: Partially resolved. Official guidance favors using host from query params with forceRedirect=true; some cases remain unresolved. A related GitHub issue was referenced.

Summarized with AI on January 9. AI used: gpt-5.

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:


    

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