Added ability to use SSL for MQTT connections on port 443

[Marko298]

Hello, currently, if you try to use reverse proxy with SSL, you will face the issue that HomeUI will still try to use a WS connection over the HTTPS-served page to establish MQTT connection. Such behavior will cause the following error.

Mixed Content: The page at 'https://your-domain.com/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://your-domain:443/mqtt'. This request has been blocked; this endpoint must be available over WSS.
v._doConnect @ main.640d40dd027f9102c521.js:2

After examining the code base, I found that the MQTT library supports WSS connection. We need to pass useSSL option as true.

homeui/app/lib/mqttws31.js

Line 971 in f84679f

if (this.connectOptions.useSSL) {

This PR adds the check if the current port is 443 and sets useSSL to true

[sikmir]

Doesn't work for me, I got Uncaught DOMException: The operation is insecure..

[Marko298]

Ok, will try to launch ui somehow locally and test better

[Marko298]

it works if you could somehow specify the port before it crashes

[webconn]

it works if you could somehow specify the port before it crashes

Maybe it will be better to force SSL by default if HTTPS is used and also try port 443 if default one is configured? Thus it will work both via HTTP (in local network) and via HTTPS reverse proxy automatically

[Marko298]

Let me push the fix for empty screen first. Then I will try to implement your proposal

[Marko298]

Done. Now it renders UI properly

[Marko298]

Maybe it will be better to force SSL by default if HTTPS is used and also try port 443 if default one is configured? Thus it will work both via HTTP (in local network) and via HTTPS reverse proxy automatically

Done. Take a look please

[webconn]

LGTM, thanks for the contribution! We will increase version number and this package will appear in testing in an hour or so

[Marko298]

Waiting to test 🔥