WebSocket Secure connection via Angular Frontend WebApp

Question

I've set up a new dev environment with Nginx as reverse proxy using self signed certificates and a Mosquitto MQTT broker.

I have a NestJS backend using MQTT with following configuration:

private readonly connection = mqtt.connectAsync('wss://mqtt-ssl.test.duckdns.org:9001', {
    username: 'local',
    password: '12345',
    clientId: "backend",
    rejectUnauthorized: false, //self signed
});

It immediately connects to the Mosquitto broker running in a docker container.

the angular 20 frontend with same configuration fails to connect to the broker:

export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
    url: "wss://mqtt-ssl.test.duckdns.org:9001",
    username: "local",
    password: "12345",
    clientId: "frontend",
    rejectUnauthorized: false,
  };
    
  @NgModule({
    imports: [
      CommonModule,
      MqttModule.forRoot(MQTT_SERVICE_OPTIONS)
    ]

WebSocket connection to 'wss://mqtt-ssl.test.duckdns.org:9001/' failed:

Is there any additional step required?

I open the frontend via: https://frontend.test.duckdns.org (chrome) and starting it with run config: "ng serve --host 192.168.2.178 --disable-host-check"

I also use MQTTX and I can connect with the same config as I use in the frontend.

hardillb · Accepted Answer · 2025-11-02 07:27:33Z

2

Is the angular app loaded with https using the same self signed cert? No browser will prompt to accept a untrusted certificate if it's first accessed via Javascript.

You will either need to import the certificate into the browsers trust store (how to do that differs by browser type) or load the page/application using the same certificate and accept the warning before the Javascript MQTT client tries to connect.

Browsers can also not honour rejectUnauthorized: false

edited Nov 2 at 7:27

answered Nov 1 at 14:28

hardillb

60.6k11 gold badges81 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NeoGER89 Nov 1 at 16:56

Thank you, after i added the certificate it worked!

Collectives™ on Stack Overflow

WebSocket Secure connection via Angular Frontend WebApp

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related