Unable to connect to WAMP router on the client side of my application

Question

I'm building a web interface to an IoT device that will change the settings of the device. The tech stack that i'm using is as follows: - React.JS for the front end client - Node.js for the server - AutobahnJS library to communicate with WAMP to make RPC calls, Subscribe/Publish events.

On my client side, I'm trying to make a connection to my WAMP router w/ autobahn with the following code

//Define our WAMP connection via autobahn
var url = 'ws://{ip}:{port}/';
var realm = 'com.example.embedded.api';
var connection = new autobahn.Connection({url: url, realm: realm});
console.log(connection);

connection.onopen = function (session) {
  console.log("connected to WAMP router");
  app.session = session;
  console.log("connection to app success");
};

connection.onclose = function (reason, details) {
  console.log("WAMP connection closed", reason, details);
  app.session = null;
}

connection.open();

This connection fails. When I log out the issue in the console the error message is

websocket.js:167 Mixed Content: The page at 'https://{ipaddress}' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://{ip}:{port}/'. This request has been blocked; this endpoint must be available over WSS.

I'm not sure why my error message is telling me that the endpoint over WSS. I'm able to connect to that endpoint point on my code server.

//point to react build
app.use(express.static(path.join(__dirname, './client/build')));

//create a server
const server = https.createServer({
  key: fs.readFileSync('server.key'),
  cert: fs.readFileSync('server.cert')
}, app)
.listen(port, function () {
  console.log(`Example app listening on port ${port}! Go to https://localhost`)
});

//open up a websocket
const wss = new WebSocket.Server({ server });
console.log("wss", wss);

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });
  ws.send('something');
});

server.listen(port, () => console.log(`Listening on port ${port}`));

Answer 1

I'm not sure why my error message is telling me that the endpoint over WSS. I'm able to connect to that endpoint point on my code server.

The error message you get is telling you that the web page is loaded via https. That means that any other resources the page connects to or loads need to also be secure. But, your code for the webSocket connection is not secure. It's using ws://xxx which is insecure. This code:

//Define our WAMP connection via autobahn
var url = 'ws://{ip}:{port}/';
var realm = 'com.example.embedded.api';
var connection = new autobahn.Connection({url: url, realm: realm});

Is using a ws:// url which is insecure. If the main web page is loaded via https, then browsers enforce that other resources used by the page must also be loaded via secure links.

To fix this, the possible choices are:

1. Use wss://xxx to connect securely.
2. Change the page so it loaded insecurely over http (not recommended).
3. Change the way you connect to the resource so that you proxy the connection to the resource through a secure link to your server.