**[Help] Shopify Embedded App iframe shows blank – postMessage origin mismatch on **

Shopify Apps
1

[Help] Shopify Embedded App iframe shows blank – postMessage origin mismatch on

Hi everyone,

I’ve been stuck on this for 4 days and would really appreciate any help.

Environment:

  • Shopify App (Remix, @shopify/shopify-app-remix)
  • Hosted on
  • App URL: receipt-app-lzgr.fly.dev

Problem:
The app iframe in Shopify Admin is completely blank.

Console errors:

  • Failed to execute ‘postMessage’ on ‘DOMWindow’: target origin does not match recipient window’s origin (admin.shopify.com)
  • Uncaught Error: message channel closed before response was received

Current app/routes/app.tsx:
export const loader = async ({ request }) => {
await authenticate.admin(request);
return json({ apiKey: process.env.SHOPIFY_API_KEY || “” });
};
export default function App() {
const { apiKey } = useLoaderData();
return (

);
}

shopify.server.ts:
future: { unstable_newEmbeddedAuthStrategy: false }

fly.toml:
PORT = ‘3000’
HOST = ‘0.0.0.0’

Warning on every deploy:
App is not listening on 0.0.0.0:3000
Only hallpass SSH process found running

Has anyone deployed a Shopify embedded app on

successfully?

2

Hello @yo_zu

Did you check on the dev dashboard about what the application_url and redirection urls listed there?

Or you can do another thing.

Go to the folder where you app.toml is. Keep the old toml backup. Then open terminal and run

shopify app config link

Then check what is the application_url and redirection url is listed there. If it is localhost or something other than your app tunnel url, out the app backend url there and run

shopify app config push

Then build and dev. It will work.

Let me know what happens.

3

Thank you for the suggestion. I ran shopify app config link and shopify app deploy successfully. The config shows application_url = “https://receipt-app-lzgr.fly.dev/” which is correct.

However the iframe is still blank. The real issue is that on Fly.io, the PORT environment variable is empty inside the machine. remix-serve has no port to bind to and exits with code 0.

Still investigating with Shopify support.

4

I think you are mixing up two issues. First fix the bot issue then go for the postMessage issue.

The first thing I’d look at is that warning about the app not listening on 0.0.0.0:3000. That tells me your Remix server isn’t actually booting up on Fly, so the iframe has nothing to load — it’s blank before the postMessage stuff even comes into play. Jump into your fly logs and see what’s happening at startup. Nine times out of ten there’s a crash or a missing start command in the Dockerfile that’s easy to miss.

Once you’ve confirmed the app is actually running, the postMessage origin error is most likely coming from the auth strategy setting. Try flipping unstable_newEmbeddedAuthStrategy to true in your shopify.server.ts — the false setting can interfere with how App Bridge does its handshake with the Admin iframe on newer versions of the remix package.

Also worth double-checking your Partner Dashboard — make sure your App URL and redirect URLs match your Fly domain exactly