App doesn't load in iframe on firefox/safari

Highlighted
Shopify Expert
29 0 20

Refused to display 'https://example.myshopify.com/admin/auth/login' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

We were getting this error in some of our apps, where people couldn't login from Firefox or Safari. When trying to fix it, we scorched the forums for some information but couldn't find anything helpful. 

Now that i found a solution, decided to share it in here and also ask a few questions about it. 

 

In our redirect steps we were doing:

//old code
window.location.replace(...);

//fixed code
window.top.location.replace(...)

 

Before fixing the code, the redirect happened inside the iframe, hence the error. Now with the fix the redirect happens on the top site which is fine. 

 

This solution got us into another issue that took a bit of time find. Our app routes are like this:

/login  (entry route set in Shopify app settings)

/settings (settings page)

/           (index page where our app content is)

 

The flow was something like  when you come from Shopify Store -> App you first access the /login route (inside of iframe), oAuth happens, your top page is redirected to `/` index page, Shopify Bridge, redirects back to Shopify and displays the app in iframe. App is ready to use. 

 

Here is the problem we found. When you click on the app from the Shopify store, the url in the top browser is something like : 

 

Shopify Admin route Actual route inside our app
(browser)(iframe)
/admin/apps/APP_ID//login
/admin/apps/APP_ID/settings/settings
/admin/apps/APP_ID//

 

So when the Shopify Bridge redirect happened and was showing the app in an iframe, it was using the initial admin url, which actually loaded /login instead, causing a big redirect loop. 

 

The final fix we did was to no longer use `/` as index root but instead rename it to something like `/dashboard` `/index`. 

 

 

Related topics: 

Make more sales by sending discount links or apply discounts automatically based on what's in their shopping cart with ✌ Automatic Discount https://apps.shopify.com/automatic-discount-rules ❖ The only app that allows you to upsell add-ons and bundles without duplicate variants and without any coding needed ✌Ultimate Upsell https://apps.shopify.com/ultimate-upsell
2 Likes
Highlighted
Tourist
9 0 7

window.top.location will need the browser to have permission for redirects/popups hence it wont work in most cases. It's recommended to use app bridge instead https://shopify.dev/tools/app-bridge/actions/navigation/redirect#redirect-to-an-absolute-url-outside...

1 Like