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.
Solved! Go to the solution
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.
@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:
The link seems to works fine the first three times.
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.
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).
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?
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:See 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.
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:
Make sure that the route home is available and you are good to go.
Shopify should probably update their docs to mention this.