CODEWITHSUNDEEP
vue.jswebsocketvuejs3reverse-proxycaddy
Lenich
Lenich

Reputation: 11

Caddy 2 Reverse Proxy with WSS to WS

I have my home server and use Caddy 2 to access local services from internet with automatic certificate generation for subdomains. Caddy listens on 443 port for https connections and reverse_proxy them to different local ports with unsecure http. I don't know is it safe enough, but I weight on router security and I'm okay with unsecure connections inside my lan network. Also it's very easy to add new subdomains for the new services with caddy and I like it.

So, recently I've tried to make Vue 3 application and I failed to expose it through caddy to internet. It does work with local ip but not from internet. In google console I see this:

WebSocketClient.js? 5586:16 Mixed Content:
The page at 'https://vue.domain.com/' was loaded over HTTPS, but attempted to connect to the
insecure WebSocket endpoint 'ws://192.168.1.1:8000/ws'. 
This request has been blocked; this endpoint must be available over WSS.

My Caddy config is json file written in yaml (for readability):

apps:
  http:
    http_port: 8080
    https_port: 443
    servers:
      myserver:
        listen:
        - ":443"
        routes:
        - match:
          - host:
            - vue.domain.com
          handle:
          - handler: subroute
            routes:
            - handle:
              - handler: reverse_proxy
                upstreams:
                - dial: 127.0.0.1:8000
          terminal: true

What should I do to make it work? Is it issue of vue development server \ frontend application settings or is it Caddy problem? I had such issue with other services too which use web sockets.

OS: Debian 11, Caddy v2.5.1, Vue 3.2.13 configured with vue ui.

Upvotes: 1

Views: 2125

Answers (2)

TeemuK
TeemuK

Reputation: 2559

Yeah for anyone else who ended up here. The problem is right here: ws://192.168.1.1:8000/ws. You are using ws when you should be using wss. I suppose Lenich figured this out as well.

Upvotes: 0

user2078922
user2078922

Reputation: 61

If you have an index.html file in your app add this meta tag:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Upvotes: 2

Related Questions