FROM CACHE - en_header

.ngrok.io refused to connect.

Solved
alexandros
Tourist
8 2 5

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

Accepted Solutions (2)

Accepted Solutions
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.

View solution in original post

alexandros
Tourist
8 2 5

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

 

View solution in original post

Replies 7 (7)
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.

alexandros
Tourist
8 2 5
@enak thank you so much.

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

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 1

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


 

DianeDouglas
Tourist
7 0 5

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

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.

Balouchi
Excursionist
44 0 6

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
  1. 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.