Shopify_app: What is the preferred way to redirect and the expected behaviour

[hirowatari]

A bit of code to clarify my intentions:

module ShopifyApp
  class ChargesController < AuthenticatedController
    def create_charge_callback
      charge = ShopifyAPI::RecurringApplicationCharge.create(<snip>)
      params[:shop] = shop_session.url
      fullpage_redirect_to charge.confirmation_url
      # redirect_to charge.confirmation_url
    end
  end
end

I'm using writing a rails embedded app using shopify_app 7.2.3 and I'm struggling to understand how to redirect the user to the confirmation_url.

My first attempt was to use Rails redirect_to but that gives the error: Refused to display 'https://<snip>.myshopify.com/admin/charges/<snip>' in a frame because it set 'X-Frame-Options' to 'DENY'.

I tried next to use ShopifyApp::LoginProtection.redirection_javascript since it's already included in my ApplicationController, but it doesn't behave the way I expected. If I'm reading it correctly it will only redirect to urls in that child iframe (when embedded). In my case it tried to redirect to https://abc.ngrok.iohttps//<snip>.myshopify.com/admin/charges/<snip>. Is the intended behaviour?

I changed the line in redirection_javascript from

data: { location: window.location.origin + #{url.to_json} }

to
data: { location: #{url.to_json} }

and it did what I wanted it to. Is this bad/wrong?

I believe this is the commit that introduced this behaviour

[kevinhughes27]

Looks like we didn't consider the billing api when fixing the embedded app auth. @jamiemtdwyer @Hammadk

[jamiemtdwyer]

cc @ShayneP

[Hammadk]

Yeah the new version doesn't really work with absolute URLs. We'll have to change this line to allow relative URLs.

I'll work on a solution.

[Hammadk]

@kevinhughes27 I am working on a solution for this in https://github.com/Shopify/shopify_app/pull/389. We just have to allow absolute URLs in addition to relative URLs. I'll test it on a few browsers and get back to you.

[kevinhughes27]

Thanks @Hammadk 🎉

[Hammadk]

Hi @hirowatari. Can you please try out the support-absolute-urls branch of this gem and check if you are still having that issue?

[Hammadk]

@hirowatari This fix is now in version 7.2.5 of this gem.

[hirowatari]

@Hammadk @kevinhughes27 Thanks a ton. It all works now. Sorry for the slow response, I was moving house.

[amitpatelx]

I am getting the same issue with an app built using shopify_app (7.4.0). When it redirects after creating a charge with redirect_to charge.confirmation_url, I get following error

Refused to display 'https://omnivoire.myshopify.com/admin/charges/7586108/confirm_recurring_application_charge?signature=BAhpAzzBcw%3D%3D--bfb6d55d8d7830dcebdbc92573567817cc4e7d87' in a frame because it set 'X-Frame-Options' to 'deny'.

Here are the steps to reproduce the issue

1. Install the app and you will see the charge page
2. Don't do anything with charge page and click on admin apps link again
3. Find the app you just installed and click on the app again

The embedded app section becomes blank.

[kevinhughes27]

Unfortunately you always need to use a services like ngrok or forward locally due to new browser security policies.

[amitpatelx]

@kevinhughes27 I am using ngrok and the issue is with the only case mentioned above.

It works fine in case

1. Accept the charge, go back to apps page and click on the installed app again
2. Follow steps 1 and 2 in my previous comment. Again install the app again by clicking Get button on the app listing without removing the installed app.

[jamiemtdwyer]

Wasn't this the issue that was fixed in https://github.com/Shopify/shopify_app/pull/504 ?

[amitpatelx]

@jamiemtdwyer thanks for pointing out. We have been using shopify_app (7.4.0) so will check with the master branch now.

[overallduka]

Thanks @jamiemtdwyer, I was facing the same problem of @AmitPatel-BoTreeConsulting and check with master branch works perfectly.

[jamiemtdwyer]

Glad to hear it's working!

[amitpatelx]

@jamiemtdwyer not working either for master branch. Also tried with commit 323b188 but same issue in case of scenario I explained in https://github.com/Shopify/shopify_app/issues/387#issuecomment-347495709

I checked it with latest version of Chrome and Firefox

[kevinhughes27]

Does your controller include include ShopifyApp::EmbeddedApp? Can you see if Rails is event attempting to remove the header but putting a debugger in that concern

[amitpatelx]

Yes. My controller is extending Shopify::AuthenticatedController which includes ShopifyApp::EmbeddedApp

I placed debugger in beginning of set_esdk_headers of ShopifyApp::EmbeddedApp and inspected response.headers each time the method was called but the headers did not contain X-Frame-Options header.

Here is the last trace before the error comes

{"X-XSS-Protection"=>"1; mode=block",
 "X-Content-Type-Options"=>"nosniff",
 "P3P"=>"CP=\"Not used\"",
 "Location"=>
  "https://omnivoire.myshopify.com/admin/charges/7609066/confirm_recurring_application_charge?signature=BAhpA%2BoadA%3D%3D--e7069675a3278bfced25ddd62e99a7beed085ae1"}

I compare the response both success and error when clicking on the app(https://omnivoire.myshopify.com/admin/apps/embeded-shopify-feed-champion-local. In both case I get X-Frame-Options:DENY. The only different is
Set-Cookie:request_method=; path=/; max-age=0; expires=Thu, 01 Jan 1970 00:00:00 -0000 which I get when I click on the app first time in private browsing window.

P.S. I test in private browsing window. If I open new private session and click on the app link, it shows me the charge page. But if I leave that page by clicking Apps from left navigation and click again, I will get the error again.

[kevinhughes27]

Is it possible that something is adding back the X-Frame-Options:DENY header?

[amitpatelx]

@kevinhughes27 I placed extra after filter for all actions of the app to remove X-Frame-Options:DENY but no luck. Not sure what part of the application adds that header.

Here is simplified version of the app where also I was able to reproduce the issue.

https://github.com/BoTreeConsultingTeam/shopify_8x

[kevinhughes27]

Can you try using the full_page_redirect for the charge url? https://github.com/Shopify/shopify_app/blob/master/lib/shopify_app/controller_concerns/login_protection.rb#L65

[amitpatelx]

@kevinhughes27 awesome! That worked with the app I shared. I will check with origin app where I faced the issue and update you. Thanks a lot for your help!

[amitpatelx]

@kevinhughes27 that solution worked in other app as well. Big thanks for being with me and help fixing the issue.

[kevinhughes27]

My pleasure. Glad to hear its working!