No More X-Frame-Options Errors: How to Use Multiple URLs in A Rails Shopify App
If you are trying to build a Shopify app in Ruby on Rails, you may run into an issue when you try to include a link to another path in the application. Open up your dev tools and you’ll see a message like this:
Refused to display 'https://96cbc4ff.ngrok.io/sync' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
This is a security feature in Ruby on Rails. By default, the X-Frame-Options header is set to ‘DENY’, which prevents your application from being embedded within in iFrame. Since Shopify embedded apps are contained within an iframe. This causes problems.
Add this to your ApplicationController:
after_action :allow_shopify_iframe private def allow_shopify_iframe response.headers['X-Frame-Options'] = 'ALLOWALL' end
If you are writing a private app, you can replace ALLOWALL with this line:
response.headers['X-Frame-Options'] = 'ALLOW-FORM mystoreurl.myshopify.com'