.ngrok.io refused to connect.

[alexandros]

Hello world...

1st time posting here. 
I am developing my 1st shopify app and started getting a weird `xxxxxxx.ngrok.io refused to connect.` 

This happens only when I try to display a custom form on my embedded app.
I have no idea why this is happening and no posts I have read helped so far.

Any help would be greatly appreciated.

Thank you in advance.

[enak · Accepted solution]

This happened to me and was driving me crazy for hours! I was blocking 3rd party cookies in chrome. Look for an icon with red x through a cookie in your onmnibar. 

If this isn't the case, take a look at the Network tab of Chrome Dev Tools.

[enak · Accepted solution]

This happened to me and was driving me crazy for hours! I was blocking 3rd party cookies in chrome. Look for an icon with red x through a cookie in your onmnibar. 

If this isn't the case, take a look at the Network tab of Chrome Dev Tools.

[alexandros]

@enak thank you so much.

I will try when I am in front of a pc and let you know.

[alexandros · Accepted solution]

I found the fix on this site.
My app is a Rails app and by default X-Frame-Options HTTP header value has been set as SAMEORIGIN, this allows iframing only on the same domain and prevents clickjacking.

So, in my application controller I added:

after_action :allow_shopify_iframe

private

def allow_shopify_iframe
  response.headers['X-Frame-Options'] = 'ALLOWALL'
end

[DianeDouglas]

This worked for me too, also a rails app. Any redirect will get this error without changing the headers this way. Nicely done!

[johnrweir]

It appears that Shopify displays some information in an iframe and that can cause a problem -- for example, if a merchant selects 'Apps' and then 'About' your App and then 'Open App' then your App should display in an iframe.

The problem is that modern browsers have enhanced security and block cross-domain use of iframes -- in this example, something.shopify.com is the domain of the main page which is trying to display output from your App which is the yourapp.example.com domain.

The problem may appear to be random and affect some users but not others -- that could well be that they are using a different browser or that their browser settings are different from yours.

The recommendation from alexandros and others (Thanks!) to use X-Frame-Options should solve the problem, except that X-Frame-Options is deprecated. I used the following (in PHP) to set the recommended headers to allow my App pages to display in any shopify shop:

header('Content-Security-Policy: frame-ancestors https://*.myshopify.com/;');

As implied above, the recommended way would be to use the 'Content-Security-Policy' header.

[Balouchi]

Hello Can You Please Help me in resolving this issue ? I am stuck here. Help is appreciated.

Thanks

ISSUE

Requirements that must be met before initial screening

App must set security headers to protect against clickjacking. Your app must set the proper frame-ancestors content security policy directive to avoid clickjacking attacks. The 'content-security-policy' header should set frame-ancestors https://[shop].myshopify.com https://admin.shopify.com, where [shop] is the shop domain the app is embedded on.

[Codemire]

download Ignore X frame headers extension.

It will work

---

@alexandros wrote:

Hello world...

1st time posting here. 
I am developing my 1st shopify app and started getting a weird `xxxxxxx.ngrok.io refused to connect.` 

This happens only when I try to display a custom form on my embedded app.
I have no idea why this is happening and no posts I have read helped so far.

Any help would be greatly appreciated.

Thank you in advance.

---