Reverse Proxy for Web Sockets (WSS) using Caddy

Question

Project GitHub URL

I have just started using caddy. I have made a simple chat application which I am serving using caddy.
The WebSockets are served on ws instead of wss by the application, similar to how the application is served on HTTP and not https, by the application. I am trying to secure the protocols using caddy and have successfully done that for https. Since I wouldn't be able to use ws when I am using https, I would need to serve the WebSockets on wss as well. I couldn't find a way in the docs where I can find how to reverse proxy wss to ws as I did with https to http.

What I tried

your.tld.com {
    proxy / 0.0.0.0:8266 {
        transparent
        websocket
    }
}

2)

your.tld.com {
    proxy / 0.0.0.0:8266 {
        transparent
    }
   proxy /ws 0.0.0.0:8266 {
        transparent
    }
}

3)

your.tld.com {
    proxy / 0.0.0.0:8266 {
        transparent
    }
   proxy /ws 0.0.0.0:8266/ws {
        transparent
   }
}

---

The above attemots did not work. Hopefully will get a solution here.

Tantrum

These do not look like reverse proxy. The config for Caddy for reverse proxy is reverse_proxy – Dewy

Answer 1

I have something like this is my config files :

proxy /api/v1/streaming http://localhost:4000 {
    websocket
} 

So for you it will be something like :

your.tld.com {
   proxy / 0.0.0.0:8266 {
        transparent
   }
   proxy /ws http://0.0.0.0:8266 {
        websocket
   }
}

Belloir

Hi @papey, mind to share and update Caddy V2 equivalent codes for this answer? This would be useful for future visitors =) – Fabyola

@JerryChong "Websocket proxying "just works" in v2; there is no need to "enable" websockets like in v1." from the docs caddyserver.com/docs/v2-upgrade#proxy – Buckels

Answer 2

I've been spending a whole night to solve this problem when I start to use https or wss or ssl. It always says connection stopped before establish with 400 error code.

Just a minutes ago, I found a solution for that:

0. Cloudflare

At the SSL/TLS tab:

• If you have your own cert or SSL or HTTPS: set it to Full. (The following 123 steps assume you have your own https certification)

• If you only have an http server: set it to Flexible. (The Cloudflare will add https or ssl to your website automatically.)

• After that, go to DNS tab, set Proxied.

If you are not sure what you are doing, just go to DNS tab, set DNS only

1. Make sure you have a right proxy configuration.

server {
    listen 80;
    server_name ai-tools-online.xyz;
    return 301 https://ai-tools-online.xyz$request_uri;
}

server {
    listen 443 ssl http2;

    ssl_certificate       /data/v2ray.crt;
    ssl_certificate_key   /data/v2ray.key;
    ssl_protocols         TLSv1.2 TLSv1.3;
    #ssl_ciphers           3DES:RSA+3DES:!MD5;
    server_name ai-tools-online.xyz;

    location / {
        proxy_pass http://127.0.0.1:5000;
    }

    location /socket.io {
        proxy_http_version 1.1;
        proxy_buffering off;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_pass http://127.0.0.1:5000/socket.io;
    }
}

ai-tools-online.xyz is your domain, http://127.0.0.1:5000 is your socket server.

2. Make sure your server Cross-Origin Controls is set to '*' to allow Cross-Origin Access

For flask-socketio, is to use flask_socketio.SocketIO(app, cors_allowed_origins = '*')

3. You must restart the nginx to let the new config work

systemctl restart nginx

4. For more details about how to set caddy, see the following links:

https://github.com/yingshaoxo/Web-Math-Chat#reverse-proxy-configuration-for-https https://caddy.community/t/using-caddy-0-9-1-with-socket-io-and-flask-socket-io/508/6 https://www.nginx.com/blog/nginx-nodejs-websockets-socketio/

Astatic

The question asked for Caddy, this answer only mentions Cloudflare & nginx?!? – Sesame