Mixed Content error when accessing WebSocket server hosted in a different port

Question

I've set up an express server with node.js on port 80 (http) and 443 (https). Separate from that server, I've set up a websocket server in a separate port, 8000:

var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({port: 8000});

The site served by express must connect to those services to work. The issue is: accessing my site through http works fine, but, from https, I get:

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

Why I'm getting this error? Has this anything to do with the fact the websocket server is in a different process/port than the http server? How can I get it to work?

score 32 · Answer 1 · edited May 23 '17 at 11:58

32

The error is telling you what to do. Use websocket with wss when using https

Look at this post html5 Websocket with SSL The WebSocket connection starts its life with an HTTP or HTTPS handshake. When the page is accessed through HTTP, you can use WS or WSS (WebSocket secure: WS over TLS) . However, when your page is loaded through HTTPS, you can only use WSS - browsers don't allow to "downgrade" security.

edited May 23 '17 at 11:58

Community

1
1

answered Jun 10 '16 at 17:24

pedrofb

37,271
5
94
142

Hi Where I have to use WSS? – Ashh Apr 17 '19 at 10:19
1

You have to switch the URL scheme and the port. For example: wss://test.mosquitto.org:8081 Instead of: ws://test.mosquitto.org:8080 – Michael Kühnel Jun 25 '19 at 08:17
2

This would be pretty insightful for the guys trying to run Vue Vite HMR module from inside a docker container. – simultsop Feb 09 '21 at 07:15

Mixed Content error when accessing WebSocket server hosted in a different port

1 Answers1

Linked