WebSocket connection is broken.

[jamieshaw]

Recently, it appears an update has broken my config of the reverse proxy I use to access the web socket for the config UI – it looks as though there is a security issue although the WebSocket issue is at the same URL as the page.

Any ideas?

Refused to connect to wss://[redacted]/wsocket?token=[redacted] because it does not appear in the connect-src directive of the Content Security Policy.

[oznu]

Hi,

You'll need to proxy the Host header.

UseCanonicalName on
ProxyPreserveHost on

https://github.com/oznu/homebridge-config-ui-x/wiki/Reverse-Proxy:-Apache

[oznu]

I've added a proxyHost config option to make running behind a reverse proxy easier, and allow the UI to still work in cases where the reverse proxy cannot set the real host header.

"platforms": [
    {
      "platform": "config",
      "name": "Config",
      "port": 8080,
      "proxyHost": "my-domain.com:5000"
    }
]

proxyHost should match the domain shown in the browser, including a custom port if not using 80 or 443.

[randallbruder]

I might have a similar problem. I have a URL pointing to my server with an nginx reverse proxy. If I load homebridge-config-ui-x directly on my server using localhost:8151, everything works as expected. If I load it over the domain, homebridge-config-ui-x still loads, but cannot access HomeBridge:

The console shows this error too:

WebSocket connection to 'ws://[redacted]/wsocket?token=[redacted]' failed: Error during WebSocket handshake: Unexpected response code: 200

[oznu]

@randybruder - are you proxying the web socket in your nginx vhost config block?

  location / {
    proxy_pass                  http://127.0.0.1:8080; # replace 8080 with the port the ui is running on
    proxy_http_version          1.1;
    proxy_buffering             off;
    proxy_set_header            Host $host;
    proxy_set_header            Upgrade $http_upgrade;
    proxy_set_header            Connection "Upgrade";
    proxy_set_header            X-Real-IP $remote_addr;
    proxy_set_header            X-Forward-For $proxy_add_x_forwarded_for;
  }

[randallbruder]

All I had was:

location / {
	proxy_pass http://localhost:8151;
}

So obviously I was missing your fancy extra lines (sorry, I'm really new to nginx.) I added all the additional lines, rebooted nginx, and it's all working as expected.

Thank you so much for your help! I appreciate it.