zorchenhimer/MovieNight

Chat doesn't connect when proxied behind Nginx with HTTPS

Closed this issue · 4 comments

IonCannon218 commented

I have MovieNight behind an Nginx reverse proxy secured with HTTPS. Streaming works perfectly fine. However, the chat doesn't work, Firefox and Chrome blocks the chat.js due to "insecure". I have Nginx configure to proxy the websocket but it's blocked client side. I can't just disable HTTPS because HSTS.

Firefox dev console:

SecurityError: The operation is insecure. chat.js:175
    setupWebSocket https://domain.com/static/js/chat.js:175 <anonymous> https://domain.com/static/js/chat.js:232

Chrome dev console:

chat.js:136 Mixed Content: The page at 'https://domain.com/stream/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://domain.com/ws'. This request has been blocked; this endpoint must be available over WSS.
setupWebSocket @ chat.js:136
chat.js:136 Uncaught DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
    at setupWebSocket (https://domain.com/static/js/chat.js:136:10)
    at window.addEventListener (https://domain.com/static/js/chat.js:204:5)

Seems like you need to add secure websockets to the chat.js.

Version is commit 37cf2f7

zorchenhimer commented

I was testing this last week sometime. Try changing the websocket url to start with wss:// instead of ws://. It's on line 39 in chat.js in in the linked commit revision.

IIRC, there were some other issues that I didn't get around to figuring out yet though.

IonCannon218 commented

Sorry for taking a while to get back. I wasn't able to get wss:// to work with commit 37cf2f7 due to some issues with the wasm file not being generated but that was resolved with the install procedure change.

With the latest commit 5819bdb, I was able to get chat fully working with just changing ws:// to wss:// in chat.js on line 58.

This is my nginx configuration for reference:

location /stream/ {
    proxy_pass http://localhost:8089/;
}
location /static/ {
    proxy_pass http://localhost:8089/static/;
}
location /live {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_pass http://localhost:8089/live;
}
location /ws {
    proxy_pass http://localhost:8089/ws;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $host;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    access_log off;
}
joeyak commented

Is there a disadvantage to using wss:// buy default? I know you need certs when doing https vs http.

zorchenhimer commented

wss:// is "WebSocket over HTTPS" and will not work without a certificate.

Ideally, the JS would detect if it's connecting to the webserver over HTTPS and request the websocket as wss, but would default to unsecured http/ws.

  • 👍1