Unable to proxy websockets?
Author: teamonCreated May 11, 2022Updated Feb 5, 2025
I'm trying to use Phoenix LiveView over tunnelto. Everything works just fine without proxy or when using ngrok. With tunnelto I get:
[info] Sent 200 in 2ms
[info] CONNECTED TO Phoenix.LiveView.Socket in 25µs
Transport: :websocket
Serializer: Phoenix.Socket.V2.JSONSerializer
Parameters: %{...}
[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:
<%= csrf_meta_tag() %>
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}});This happens in all browsers. Standard HTTP requests are proxies just fine. tunnelto version is 0.1.18.
Source: agrinman/tunnelto