App frame refusing to load on reloading for 4 times.

Solved
Excursionist
13 2 2

We are developing a Shopify embedded application and we are facing a weird issue. The app seemingly works fine in normal situations. However, if I attempt to reload the app page in a development store 4 times in a row, the app's frame refuses to load and the console logs the following error:

 

Refused to display 'https://demo-testing-app.myshopify.com/admin/apps?oauth_error=third_party_cookies' in a frame because it set 'X-Frame-Options' to 'deny'.
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://gmerchantsync.iqz.systems') does not match the recipient window's origin ('null').

 This is preventing us from entering the app for listing. Any help here is appreciated. Thanks.

0 Likes
Shopify Staff
Shopify Staff
1555 79 240

It looks like whatever library you're using is performing a redirect to an admin path without it being a full page redirect, effectively trying to frame the admin. If you're using a first party library and this is reliably replicable, I recommend creating an issue in the corresponding public repository. The same applies if it is a third party library, but that will depend on the current state of support for that library by the authors.

 

Cheers.

0 Likes
Excursionist
13 2 2

@Alex I am not using any third party library for authentication and I have followed this tutorial https://help.shopify.com/en/api/tutorials/build-a-shopify-app-with-node-and-express by shopify for the authentication. 

 

I am trying to redirect them to the below url for authentication:

https://${shop}/admin/oauth/authorize?client_id=${process.env.SHOPIFY_API_KEY}&scope=${process.env.SHOPIFY_SCOPE}&state=${state}&redirect_uri=${redirectUri}

The link seems to works fine the first three times.

0 Likes
Shopify Staff
Shopify Staff
1555 79 240

Ah, thanks for clarification! I was able to look into this more.

 

It looks like we have loop detection built into that OAuth path. We detect the loop be incrementing a cookie integer value by 1 (a tick) each time a specific app sends someone to that path on a specific shop. It looks like visiting that link quickly in succession leads to this.

0 Likes
New Member
1 0 0

Thanks for the insight. What do you suggest we do in this case? Is this because we've handled something in a not recommended way?

0 Likes
Shopify Staff
Shopify Staff
1555 79 240

What I'm curious about is what you need to be doing to cause this besides visiting /oauth/authorize (via your redirect) several times in a short span of time. If your concern is about seeing this in production, this only applies on a per-client basis since the "ticker" is stored in cookies. Unless you're repeatedly sending a single client to this route, or they don't have cookies enabled, they shouldn't see this.

 

If you're just debugging and running into this, the best thing you can do if you see this is wait about 1 minute (the expiration time).

 

Cheers.

0 Likes
Highlighted
Excursionist
13 2 2

@Alex Thanks for your response. This issue was raised  by Shopify during our app review process. Is there a work around for this issue?

0 Likes
Shopify Staff
Shopify Staff
1555 79 240

Thanks for the heads up. It's not an obvious precaution we have implemented, so I'll talk to the one reviewing your listing  and we'll get that sorted out when we can.

 

Cheers.

0 Likes
New Member
2 0 0

I'm running into the same issue. I was doing just exactly as the tutorial with NextJS, KoaJS and React told me to do so. After reading your responses,  I found that there is a cookie named oauth_loop_detector in my Shopify store which will increase by 1 every time the app reloads. Really appreciate it if someone could help me fix this?

0 Likes

Success.

Excursionist
13 2 2

We have figured this one out. The tutorial doesn't make it obvious but Shopify seems to check for an auth loop whenever the root url ('/') of the application is accessed.

The tutorial has code like the following:Screenshot from 2019-10-29 11-34-33.pngSee the ctx.redirect('/') there? That's the offending piece of code. In trying to check for a loop, Shopify is incorrectly flagging a legitimate access url access as a bad one.

 

The fix:

It's quite simple. Never redirect to root in your application. Move the main page of your app to something like '/home' and do this instead:

ctx.redirect('/home');

Make sure that the route home is available and you are good to go.

Shopify should probably update their docs to mention this.

1 Like