Fix Rails oauth facebook x-frame-options sameorigin error

Question

I can\'t for the life of me get my Facebook canvas app to display. Chrome console displays this error and nothing shows up inside the iframe - it\'s blank:

Refus

Answer 1

I found this part of the edge guide, which explains Rails 4's default headers, to be useful:

http://edgeguides.rubyonrails.org/security.html#default-headers

Here is the main point, copied and pasted:

Every HTTP response from your Rails application receives the following default security headers.

config.action_dispatch.default_headers = { 'X-Frame-Options' => 'SAMEORIGIN', 'X-XSS-Protection' => '1; mode=block',
'X-Content-Type-Options' => 'nosniff' }

You can configure defaultheaders in config/application.rb.

config.action_dispatch.default_headers = { 'Header-Name' => 'Header-Value', 'X-Frame-Options' => 'DENY' }

Or you can remove them.

config.action_dispatch.default_headers.clear

Answer 2

In Rails 4, X-FRAME-OPTIONS is set to SAMEORIGIN in the headers, which I guess prevents it from being loaded in a frame, as described in this issue. One person notes the difficulty this will cause Facebook app developers.

I managed to solve this by adding the following to application.rb:

config.action_dispatch.default_headers[:'X-Frame-Options'] = "ALLOW-FROM https://apps.facebook.com"

I also used Forward to create a domain to allow Facebook to access my local development machine. I entered this domain in the canvas and secure canvas fields in Facebook. Highly recommended.

Further info here:

• http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx
• https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options