u-wave / web

Web client for üWave, the self-hosted collaborative listening platform.
https://demo.u-wave.net
MIT License
68 stars 15 forks source link

Server connection lost, when example.com is in HTTPS #1891

Open temikael opened 3 years ago

temikael commented 3 years ago

Hi,

Until now, my üWave server runs well and I can access to it via HTTP. Now, I want to secure my server and pass to HTTPS.

I already create a Let's Encrypt certificate. After an upgrade of my example.com.conf file and a reboot of Apache, I try to access my website via HTTPS and I receive this error:

image

When I glance at the console, I have these two messages:

socket.js:211 Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://example.com:6042/'. This request has been blocked; this endpoint must be available over WSS.

socket.js:211 Uncaught (in promise) DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
    at https://example.com/static/app_38e361f.js:1:111250
    at new Promise (<anonymous>)
    at e.value (https://example.com/static/app_38e361f.js:1:111214)
    at https://example.com/static/app_38e361f.js:1:112287
    at https://example.com/static/168_a1c4e93.js:1:7168
    at Object.dispatch (https://example.com/static/825_fab4136.js:2:277352)
    at e.value (https://example.com/static/app_38e361f.js:1:138480)
    at https://example.com/static/app_38e361f.js:1:147145
    at Object.49440 (https://example.com/static/app_38e361f.js:1:147643)
    at c (https://example.com/static/runtime_d813dbd.js:1:145)

This is my Apache VirtualHost for example.com:

<VirtualHost *:80>
        ServerName example.com

        # Logs
        LogLevel warn
        ErrorLog ${APACHE_LOG_DIR}/example.com.error.log
        CustomLog ${APACHE_LOG_DIR}/example.com.access.log combined
</VirtualHost>

<VirtualHost *:443>
        ServerName example.com

        # Logs
        LogLevel warn
        ErrorLog ${APACHE_LOG_DIR}/example.com.error.log
        CustomLog ${APACHE_LOG_DIR}/example.com.access.log combined

        # SSL
        SSLEngine On
        SSLCertificateFile /etc/letsencrypt/live/example.com/cert.pem
        SSLCertificateKeyFile /etc/letsencrypt/live/example.com/privkey.pem
        SSLCertificateChainFile /etc/letsencrypt/live/example.com/fullchain.pem

        # SSL Options
        SSLProtocol all -SSLv2
        SSLCipherSuite ALL:!ADH:!EXPORT:!SSLv2:RC4+RSA:+HIGH:+MEDIUM
        SSLHonorCipherOrder On
        SSLCompression off
        SSLSessionTickets off

        # Headers
        Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains"

        # Proxy
        SSLProxyEngine On
        ProxyPreserveHost On
        ProxyRequests off

        # Reverse proxy
        # This is for websocket requests
        ProxyPass /ws/ ws://example.com:6042/
        ProxyPassReverse /ws/ ws://example.com:6042/

        RewriteEngine on
        RewriteCond %{HTTP:UPGRADE} ^WebSocket$ [NC]
        RewriteCond %{HTTP:CONNECTION} ^Upgrade$ [NC]
    RewriteRule .* ws://example.com:6042%{REQUEST_URI} [P]

        # This is for normal requests
        ProxyPass / http://example.com:6041/
        ProxyPassReverse / http://example.com:6041/
</VirtualHost>

For your information, I neither change the configuration of the core nor the configuration of the web client.

What do I need to change to make üWave work when example.com is in HTTPS?

goto-bus-stop commented 3 years ago

Do you have a socketUrl: option set in the web client options?

createWebClient({
  socketUrl: 'wss://example.com/'
})

By default it should derive the socket URL from the current URL. Eg if you host on https://example.com, it will derive wss://example.com, or if you host on http://something, it will derive ws://something.

temikael commented 3 years ago

It works fine on Chromium-like browsers, but not on Firefox.

I have this message: Firefox can't establish a connection to the server at wss://example.com.