Setting up Livebook behind proxy

I’m trying to run Livebook behind proxy using teleport

When I visit livebook.myteleportproxy.net/apps it loads the apps but the page reload itself.

There is no log in the browser console but I see this logs in livebook console:

12:04:44.820 [debug] LiveView session was misconfigured or the user token is outdated.

1) Ensure your session configuration in your endpoint is in a module attribute:

    @session_options [
      ...
    ]

2) Change the `plug Plug.Session` to use said attribute:

    plug Plug.Session, @session_options

3) Also pass the `@session_options` to your LiveView socket:

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

4) Ensure the `protect_from_forgery` plug is in your router pipeline:

    plug :protect_from_forgery

5) Define the CSRF meta tag inside the `<head>` tag in your layout:

    <meta name="csrf-token" content={Plug.CSRFProtection.get_csrf_token()} />

6) Pass it forward in your app.js:

    let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
    let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}});

I tried to get the LivebookWeb.Endpoint settings (I’ve removed the salt and secrert)

[
  adapter: Bandit.PhoenixAdapter,
  pubsub_server: Livebook.PubSub,
  live_view: [signing_salt: "........."],
  drainer: [shutdown: 1000],
  render_errors: [formats: [html: LivebookWeb.ErrorHTML], layout: false],
  server: true,
  secret_key_base: "..............",
  http: [
    port: 8080,
    http_1_options: [max_header_length: 32768],
    http_2_options: [max_header_value_length: 32768],
    ip: {0, 0, 0, 0}
  ],
  url: [path: "/", host: "localhost"]
]

Anyone experience this issue while putting livebook behind proxy?

Few notes:

  • I tried to put my liveview behind kubernetes ingress(using nginx) and it’s still the same.
  • I’ve deployed a phoenix app with liveview behind teleport and it works fine(though using I’m using cowboy) the configs:
[
  adapter: Phoenix.Endpoint.Cowboy2Adapter,
  render_errors: [
    formats: [html: MyAppWeb.ErrorHTML, json: MyAppWeb.ErrorJSON],
    layout: false
  ],
  pubsub_server: MyAppWeb.PubSub,
  live_view: [signing_salt: "...."],
  cache_static_manifest: "priv/static/cache_manifest.json",
  server: true,
  url: [
    host: "myapp.myteleportproxy.net",
    port: 443,
    scheme: "https"
  ],
  http: [ip: {0, 0, 0, 0, 0, 0, 0, 0}, port: 4001],
  secret_key_base: "......"
]
1 Like

This could be a missing websocket proxy config in nginx?

# in nginx.conf
http {
  ...
  # Connection header for WebSocket reverse proxy
  map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
  }
  ...
}

# in the vhost config file
server {
   ...
    # could also be inside a `location` block
    # Websockets
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Origin "${scheme}://${proxy_host}";
}