AppBridge invalid origin issue while embedding the app

Shopify Apps

Topic summary

Main issue: After switching the embedded app’s URL to the server domain to manage Content-Security-Policy (CSP) headers, Shopify App Bridge (v3.7.9) throws APP::ERROR::INVALID_ORIGIN when the app loads in the Shopify Admin iframe.

Context: The app uses separate client and server domains. Originally, the app URL (in the Partner Dashboard) pointed to the client domain, but CSP configuration there was difficult. They moved CSP handling and the authentication/login flow to the server, making the app URL the server domain.

Impact: The app renders in the iframe, but App Bridge cannot validate the origin. As a result, key App Bridge features (e.g., side panel navigation, route state persistence) do not work.

Relevant terms: App Bridge is Shopify’s SDK for embedded apps; CSP controls which sources can be loaded; the error indicates an origin validation failure within the embedded context (iframe).

Status/updates: No fix or workaround shared. A follow-up asks if the issue was resolved, suggesting the discussion remains open with no confirmed solution.

Summarized with AI on December 20. AI used: gpt-5.
1

I have embedded the app using App Bridge version 3.7.9. Our app’s client and server domains are different. Previously, the app’s URL (from the partner panel) was on the client’s domain. However, an issue arose with the Content-Security-Policy in the iframe. Setting the recommended CSP from the client’s end was challenging, so we configured it from the server end. Consequently, we changed the authentication login process to use the server domain. As a result, our app’s URL is now on the server domain.

Although the app is opening in the iframe within the Shopify admin, the App Bridge is encountering an issue in identifying the origin, leading to the following error:

AppBridgeError {name: 'AppBridgeError', message: 'APP::ERROR::INVALID_ORIGIN', action: {…}, type: 'APP::ERROR::INVALID_ORIGIN', stack: 'AppBridgeError: APP::ERROR::INVALID_ORIGIN'}

Due to this error, App Bridge functionalities such as the side panel navigation bar and route state persistence are not working.
How can I resolve this? My app is built in React.

2 Likes
2

Have you resolved the above problem yet? Are there any new updates?