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:

Refused to display 'http://mysite.dev/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

I'm using Rails 4.0.0.rc1 and omniauth-facebook 1.4.1, following the Railscast on Facebook Authentication as a guide. I didn't use any of the Javascript code since it was optional and ideally the app should only be accessed within Facebook.

routes.rb

  match 'auth/:provider/callback', to: 'sessions#create', via: [:get, :post]
  match 'auth/failure', to: redirect('/'), via: [:get, :post]
  match 'signout', to: 'sessions#destroy', as: 'signout', via: [:get, :post]

sessions_controller.rb

class SessionsController < ApplicationController

  def create
    user = User.from_omniauth(env["omniauth.auth"])
    session[:user_id] = user.id
    redirect_to root_url
  end

  def destroy
    session[:user_id] = nil
    redirect_to root_url
  end

application_controller.rb

I had to comment this out because I kept getting InvalidAuthenticityToken errors which cost me the other half of my day. A bit more on that here.

  # protect_from_forgery with: :exception

Facebook settings

App domain: myapp.dev
Canvas URL: http://myapp.dev
Secure Canvas URL: -- blank -- if https is specified, I get webpage is unavailable

Please help before I start flipping desks. :)

manafire · Accepted Answer · 2013-06-18T20:27:07.803

5

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:

edited Jun 18 '13 at 20:27

answered May 15 '13 at 20:00

manafire

5,984
4
43
53

3

This actually resulted in another error: `Invalid 'X-Frame-Options' header encountered when loading 'http://myapp.dev/': 'ALLOW-FROM https://www.facebook.com' is not a recognized directive. The header will be ignored.` Still trying to sort all of this out. – manafire May 16 '13 at 13:53
Did you find out a solution for the comment above ? – Alexander Giraldo Jun 06 '13 at 21:47
This actually worked. The key is to get the header ignored because otherwise the page is blank. Ultimately, I ended up using [Forward](http://forwardhq.com/) to get my app to work properly which I would recommend to anyone developing locally who values their sanity. – manafire Jun 07 '13 at 15:34
1

Correction. This WAS working until today. Now the headers are reading "SAMEORIGIN, ALLOW-FROM https://www.facebook.com". Urgghh.. – manafire Jun 12 '13 at 16:36
The ALLOW-FROM value does matter - edited answer to be https://apps.facebook.com. – manafire Jun 18 '13 at 20:28
1

when making this change I also got an error that now there were multiple headers: SAMEORIGIN, ALLOW-FROM. The answer below: "config.action_dispatch.default_headers.clear" fixed that issue though I hope there is a better way without clearing them entirely – Nate914375 Feb 20 '14 at 23:38
It looks like "Allow-FROM" is not supported in all browsers(particularly Chrome): https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options. I'm using the solution listed here(http://stackoverflow.com/questions/18445782/how-to-override-x-frame-options-for-a-controller-or-action-in-rails-4) as an after-filter. Allow-From will be ignored on browsers that don't support it but by setting it in the after filter, it will clear out the SAME-ORIGIN header thereby getting this to work. godspeed. – Peter P. May 18 '14 at 20:37

score 4 · Answer 2 · edited Jun 20 '20 at 09:12

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

Fix Rails oauth facebook x-frame-options sameorigin error

2 Answers2

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

You can configure defaultheaders in config/application.rb.

Or you can remove them.

Linked