How to make Websocket connection working with HTTPS / TLS?

Question

In Ubuntu 18.04.4 Desktop I'm trying to make websocket connection working.

I started the discovery-swarm-webrtc :

(base) marco@pc01:~/webMatters/vueMatters/GGC/node_modules/hyperswarm-web/node_modules/.bin$ ./discovery-signal-
webrtc 
discovery-signal-webrtc running on 4000

I modified in the Hyperswarmweb.vue file the wsProxy as :

    this.swarm = hyperswarm({
      // If you omit this, it'll try to connect to 'wss://hyperswarm.mauve.moe'
      // It will also attempt to connect to a local proxy on `ws://localhost:4977`
      //wsProxy: 'ws://yourproxy.com',
      wsProxy: 'ws://ggc.world:4000',
      simplePeer:{
        config:{
        }
      }
    })

    // look for peers listed under this topic
    const topic = crypto.createHash('sha256')
      .update('my-hyperswarm-topic')
      .digest()

    this.swarm.join(topic)

I get this error :

" Websocket connection to 'ws://localhost:4977/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

Mixed Content: The page at 'https://ggc.world/signup' was loaded over HTTPS, but attempted to connect to the insecure
WebSocket endpoint 'ws://ggc.world:4000'. This request has been blocked; this endpoint will be available over WSS.

Uncaught DOMException: Failed to construct 'WebSocket': an insecure WebSocket connection may not be initiated from a page loaded "

This is the part of the nginx webserver configuration related to websocket:

upstream websocket {
    #server ggc.world:4977;
    #server ggc.world:1234;
    server ggc.world:4000;
}

server {
    listen 8443 ssl;
    server_name ggc.world;

    ssl_certificate /etc/letsencrypt/live/ggc.world-0002/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/ggc.world-0002/privkey.pem; # managed by Certbot
    ssl_trusted_certificate /etc/letsencrypt/live/ggc.world-0002/chain.pem;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    location /p2p {
        proxy_pass http://websocket;
        proxy_http_version 1.1;
        proxy_set_header Upgrade "Websocket";
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host ggc.world;
    }
}

As far as I understand reading here: WebSocket with SSL , we cannot use websockets with HTTPS but we can se websockets over TLS. And in order to use websockets over TLS, we have to use wss:// : Mixed Content error when accessing WebSocket server hosted in a different port

I modified in the Hyperswarmweb.vue file the wsProxy:

      //wsProxy: 'ws://yourproxy.com',
      wsProxy: 'wss://ggc.world:4000',

and now get this error:

" WebSocket connection to 'ws://localhost:4977' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED "

If I modify the Proxy in Hyperswarmweb.vue :

      //wsProxy: 'ws://yourproxy.com',
      //wsProxy: 'wss://ggc.world:4000'
      wssProxy: 'wss://ggc.world:4000',

I get this error:

"
WebSocket connection to 'ws://localhost:4977' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED "

I tried also to follow these indications: https://www.nginx.com/blog/websocket-nginx/ and modified the nginx configuration's part related to websocket as follows:

upstream websocket {
    server ggc.world:4000;
}

server {
    listen 8443 ssl;
    server_name ggc.world;

    ssl_certificate /etc/letsencrypt/live/ggc.world-0002/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/ggc.world-0002/privkey.pem; # managed by Certbot
    ssl_trusted_certificate /etc/letsencrypt/live/ggc.world-0002/chain.pem;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    location / {
        proxy_pass http://websocket;
        proxy_http_version 1.1;
        #proxy_set_header Upgrade "Websocket";
        proxy_set_header Upgrade $http_upgrade;
        #proxy_set_header Connection "Upgrade";
        proxy_set_header Connection $connection_upgrade;
        #proxy_set_header Host ggc.world;
        proxy_set_header Host $host;
    }
}

But I get the same error :

" WebSocket connection to 'wss://ggc.world:4000/' failed: Error in connection establishment: net::ERR_SSL_PROTOCOL_ERROR "

I read here: Using ws:// while on https:// (mixed content) "If you can serve the page via https somewhere on your server there are certificate and chain files, use these to serve a wss"

I already put them in the NGINX configuration, in the part related to the websocket. Where else should I put certificate and chain files paths? in wsProxy in Hyperswarmweb.vue?

Environment Info:

  System:
    OS: Linux 5.3 Ubuntu 18.04.4 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
  Binaries:
    Node: 14.3.0 - ~/.nvm/versions/node/v14.3.0/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.3.0/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Firefox: 77.0.1
  npmGlobalPackages:
    @vue/cli: 4.4.4

How to make the Websocket connection working? Looking forward to your kind help. Marco

There are too many questions in this one question to answer properly. — DougA, Jan 31 '21 at 23:58

score 0 · Answer 1 · answered Jan 31 '21 at 23:59

0

WebSocket connection to 'ws://localhost:4977' failed:

Is simply because you are not running a local hyperswarm proxy server on your machine. Start one up and your app will connect to it locally.

answered Jan 31 '21 at 23:59

DougA

1,213
9
17

How to make Websocket connection working with HTTPS / TLS?

1 Answers1