.ngrok.io refused to connect.

Solved
alexandros
Tourist
8 2 4

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.Screenshot from 2019-06-17 00-22-46.png

enak
New Member
1 1 0

This is an 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. 

 

third party cookies.PNG

 

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

0 Likes
alexandros
Tourist
8 2 4
@enak thank you so much.

I will try when I am in front of a pc and let you know.
0 Likes
alexandros
Tourist
8 2 4

This is an 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

 

Codemire
New Member
1 0 0

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.Screenshot from 2019-06-17 00-22-46.png


 

0 Likes
DianeDouglas
Tourist
4 0 0

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

0 Likes
johnrweir
New Member
2 0 1

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.