Phoenix Liveview - Websocket connect_info blocking iframe content

Question

I'm actually working on a phoenix app which I require to render in some websites embeded on an iframe, I finished coding the logic but I found that it was only working on Firefox, when using it on Chome or Opera, it end on an infinite loop recharging trying to render the content, throwing the following warning:

I was trying to allow this with the extra option like this with no success.

  @session_options [
    store: :cookie,
    key: "_analytics_key",
    signing_salt: "BM3P8GYS",
    extra: "SameSite=None;",
  ]

and then I found that on the last version of the Endpoint it had an specific option for this cookie called same_site, so I tried like this but I got the same results:

  @session_options [
    store: :cookie,
    key: "_analytics_key",
    signing_salt: "BM3P8GYS",
    same_site: "None",
    #extra: "SameSite=None;",
    secure: true
  ]

and everytime it fails rendering I got this logs on my console:

Anything seemed to work, but I found that removing the connect_info from the websocket on the endpoint automatically solved the issue, just like this:

# socket "/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]]
  socket "/live", Phoenix.LiveView.Socket, websocket: []

But this will affect things like guardian and I guess a few security things, so I was looking for a way to remove this ONLY when trying to render the page on the iframe, I was thinking on a plug to do this but I don't know if this is possible for this specific part, maybe anyone know about something I could do here to accomplish what I want? Thanks in advance!

yes sir, I actually tried with a custom plug but it doesn't help me because the livesocket creations is directly on the Endpoint, and I can't access the conn on it. The only thing solved my problem was to use a second endpoint for the iframe requests but I don't know if this can be configured on the production enviroment — Lorenzo Zuluaga

Gregor Ibic Gregor Ibic · Accepted Answer · 2020-12-20T12:26:17

You need to configure csp headers when embedding in another page/site. An leave connect_info like it is default.

defmodule UtasksWeb.Plugs.Csp do
  import Plug.Conn
  import Phoenix.Controller

  def init(opts), do: opts

  def call(conn, _opts) do
    put_resp_header conn, "content-security-policy", csp(conn)
  end

  defp csp(conn) do
    "default-src 'self' *.googleapis.com *.gstatic.com; \
    connect-src 'self' #{ws_url conn} #{ws_url conn, "wss"}; \
    script-src 'self' 'unsafe-inline' 'unsafe-eval' https://statics.teams.cdn.office.net; \
    style-src 'self' 'unsafe-inline' 'unsafe-eval' *.googleapis.com *.gstatic.com; \
    frame-ancestors teams.microsoft.com *.teams.microsoft.com *.skype.com"
  end

  defp ws_url(conn, protocol \\ "ws") do
    endpoint = Phoenix.Controller.endpoint_module(conn)
    %{endpoint.struct_url | scheme: protocol} |> URI.to_string()
  end
end

Phoenix Liveview - Websocket connect_info blocking iframe content

1 Answers