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.

The Fix

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'

 

 

Click Here to Leave a Comment Below 0 comments

Leave a Reply: