I’m facing an issue with redirect/navigation inside a Shopify embedded app (iframe) and would really appreciate guidance from anyone who has dealt with this

Shopify Apps
1

When I redirect from Product page which is in shopify editor to charge page over there I have kept one button when click on that than I get error, and main issue is I can’t use App Bridge on extension side

error: Unsafe attempt to initiate navigation for frame with origin ‘https://admin.shopify.com’
from frame with URL ‘https:///shopify/app/…’.
The frame attempting navigation of the top-level window is sandboxed and not allowed.

In Product Page (Shopify Admin) — :cross_mark: Restricted

When your app runs on a Product page, it is:

  • Inside Shopify Admin

  • Loaded in a sandboxed iframe

  • Hosted under https://admin.shopify.com

Post-Purchase Pages — :white_check_mark: Allowed

Thank You and Order Status pages are:

  • NOT part of Shopify Admin

  • Rendered on the storefront domain

  • Not sandboxed like Admin pages

  • Designed to allow controlled navigation

Because of this:

  • window.location.href

  • window.open

  • Anchor navigation

:right_arrow: Works normally
That’s why redirect logic works there.

2

Hey there. It looks like the error gives it away: you’re hitting a browser security wall. You are running in a sandboxed iframe, so the browser is correctly blocking you from hijacking the top-level URL (window.top.location) directly.
You actually have to use App Bridge here to escape the iframe context.
I’m assuming you are using the latest version (App Bridge v4). If you are, the fix is trivial because v4 polyfills standard navigation methods. You don’t need complex dispatch actions anymore; you just need to initialize the bridge correctly in your head.

Add this:

<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>

<script>
  shopify.config({
    apiKey: 'YOUR_API_KEY',
    host: new URLSearchParams(location.search).get("host"),
    forceRedirect: true
  });
</script>

Once that script loads, App Bridge intercepts your standard JS calls. You can keep your code as is:

// App Bridge v4 intercepts this and handles the redirect safely
window.top.location.href = ‘https://your-charge-url.com’;

That should resolve the sandbox violation.

3

Hi @youssefhe5 , I’m already using this window.top.location.href but as i mention above When I redirect from Product page which is in shopify editor to charge page over there I have kept one button when click on that than I get error