LiveView in IFrame blocked due to X-Frame-Options = SAMEORIGIN

Phoenix Forum Questions / Help
1

Hello,

I am using Phoenix 1.7.2 and LiveView 0.18.16. I am struggling to embed my LiveView page in an IFrame (I already tried all browsers).

The error is:

refused to display 'https://<domain>' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

In my router.ex, I did this:

pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_live_flash
    plug :put_root_layout, {KpimanBx24Web.Layouts, :root}
    plug :relax_iframe_opts
    # plug :protect_from_forgery
    # plug :put_secure_browser_headers
  end

where the :relax_iframe_opts plug does this:

conn
|> put_resp_header("Content-Security-Policy", "frame-ancestors #{fa};")
|> delete_resp_header("X-Frame-Options")
|> put_resp_header("X-Frame-Options", "ALLOW-FROM #{sub-domain}")

But there are 2 x-frame-options headers! Here is the CURL output:

< HTTP/2 200 
< server: nginx
< date: Tue, 06 Jun 2023 16:14:50 GMT
< content-type: text/html; charset=utf-8
< content-length: 5012
< content-security-policy: frame-ancestors https://*.domain>;
< x-frame-options: ALLOW-FROM https://<sub-domain>
< cache-control: max-age=0, private, must-revalidate
< x-request-id: F2Yd_tDZ_SQwJXsAAANi
< x-content-type-options: nosniff
< x-frame-options: SAMEORIGIN

My service is behind Nginx. I already tried the Nginx directive:

proxy_hide_header x-frame-options;

But that just removes the x-frame-options: ALLOW-FROM https://<sub-domain> header. The x-frame-options: SAMEORIGIN is always there.

I am aware of this thread and other similar SO threads, but none of them work for me.

Please advise. Thanks a lot!

2

There are a few threads about LiveViews on iframes now. For anyone landing here in the future, this is the current solution I’ve found:

After trying several things I gathered around the internet, I found the 3 minimal steps which limit security-related changes to the embeddable LiveViews only.

  • Separate LiveView Socket.
  • Separate Router Pipeline replacing x-frame-options HTTP header with a restrictive CSP.
  • Separate layout for embeddable LiveViews independent from session-based assigns.
1 Like