0

I am trying to allow others embed pages from my rails app on many websites. I can get it to work in Chrome and Firefox using X-Frame-Options. Is there a content security policy that is equivalent response.headers['X-Frame-Options'] = "ALLOW-FROM *"

Here is the bit using X-Frame-Options

class PeopleController < ApplicationController
  def embed
    response.headers['X-Frame-Options'] = "ALLOW-FROM *"
    @company = People.new
  end
end

But does not work, when using content security policy in both Chrome and Google when i use content security policy

class PeopleController < ApplicationController

  content_security_policy do |p|
    p.frame_ancestors "self", "*"
  end

  def embed
    @company = People.new
  end
end

When using Content Security Policy, it throws this error:

Refused to frame 'http://localhost:3000/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors self".

and this is an example of the embed code:

  <iframe src="http://localhost:3000/people/embed"></iframe>

and this is another one I tried:

  <iframe src="/people/embed"></iframe>

Update

With content-security policy, this works only on Firefox:

content_security_policy do |p|
  p.frame_ancestors 'self', "*"
end
brg
  • 3,915
  • 8
  • 37
  • 66

1 Answers1

1

Modern Chrome and Firefox do not support ALLOW-FROM key in the X-Frame-Options header. You can publish X-Frame-Options: ALLOW-FROM ### or X-Frame-Options: ALLOW-FROM http://example.com - they restrict nothing, headers with ALLOW-FROM key be just ignore by browsers.

If you wish to allow iframing for unlimited domains, it's easier not to publish X-Frame-Options header (and frame-ancestors directive) at all.

If you have a counted set of allowed domains you can use CSP header with frame-ancestors domain1 domain2 ... domainN;.

When using Content Security Policy, it throws this error: ... because an ancestor violates the following Content Security Policy directive: "frame-ancestors self"

This error means that you really published frame-ancestors 'self', not frame-ancestors 'self' * as expected.
Maybe you published two different CSP headers at the same time, maybe you have error in code. You can check what CSP header you actually got in browser.

Note 1: 'self' token should be a single-quoted - use "'self'" string in code.

Note 2: 'self' token commonly covers standard ports 80/443 only, it's not cover http://localhost:3000 (it's browser's depend). An asterisk * does cover any port numbers.

granty
  • 7,234
  • 1
  • 14
  • 21
  • Based on your suggestion, from the controller, I tried **response.headers.delete "X-Frame-Options"** , but the form submission only works for Firefox and fails for Chrome unless i add to the controller **skip_before_action :verify_authenticity_token** – brg May 17 '21 at 11:04
  • It's not a CSP-related issue. `Can't verify CSRF token authenticity` in Chrome related to `http;` usage instead of `https:` Firefox [somehow able to redirect](https://stackoverflow.com/questions/45003696/getting-cant-verify-csrf-token-authenticity-error-on-chrome-works-fine-on-sa/45004133#45004133) http to https. but Chrome does not. People commonly [solve this](https://github.com/heartcombo/devise/issues/2734) using `proxy_set_header X-Forwarded-Proto $scheme;` in Nginx, but firstly you have to try to clear Crome browser cache and coockie, – granty May 17 '21 at 16:16