React-native websocket TLS Connection

Question

I am trying to use websocket to connect to a TLS server using react-native. Below is my code (running on windows + android ):

 var ws = new WebSocket('wss://hub.fingi-staging.com:20020',{
  rejectUnauthorized: false
});

ws.onopen = () => {
  // connection opened

  ws.send('something'); // send a message
};

ws.onmessage = (e) => {
  // a message was received

  console.log('message : ' + e.data);
};

ws.onerror = (e) => {
  // an error occurred
  console.log('error:'+e.message);
};

ws.onclose = (e) => {
  // connection closed
  console.log('close:'+e.code, e.reason);
};

However, it fails with : error:java.security.cert.CertPathValidatorException: Trust anchor for certification path not found. This is because the server uses a self signed certificate.

Is there any way to fix this?

Answer 1

Replying a bit late, but hopefully this can point other people in the right direction.

I believe the error you are getting suggests you are missing the certificate chain file, which is used to verify if the CA used to sign your server's certificate is valid, i.e if the chain of trust is valid.

This, however, usually fails (is troublesome, at least) if you are working with self signed certificates. You can take a look here if you need some help generating some self-signed certificates and the appropriate certificate chain. Also, see if you need to specify the trusted CA's by having the client use that file as a parameter when connecting.

I have been struggling with setting up a secure websocket server using a self sign certificate (for development purposes, in production a proper certificate/CA must be used) but haven't had much success and reverted back to using non-TLS websocket server.

Answer 2

If anyone else happens to be struggling with implementing secure websocket connections in React-Native, here is what I found tonight: React-Native wants to use port 443 when working with secure websocket connections.

Let's take the original poster above's code. He has:

var ws = new WebSocket('wss://hub.fingi-staging.com:20020',{
  rejectUnauthorized: false
});

What I've found that works for me is:

var ws = new WebSocket('wss://hub.fingi-staging.com');

And then on your WebSocket server, make sure you are serving everything up on port 443, and not port 20020 (or whatever port you happened to be using previously). For example, my Python websocket server was previously using port 8765. However, in React-Native you need to be using port 443 for secure websocket connections or things simply aren't going to work.