在浏览器中尝试连接 mqtt

Question

I'm trying to get a mqtt connection on my browser with JS

I'm following this tutorial: https://emqx.medium.com/use-websocket-to-connect-to-mqtt-broker-9e7baf1aa773

So I've got this:

<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
<script>
    // Globally initializes an mqtt variable    
    const clientId = 'mqttjs_' + Math.random().toString(16).substr(2, 8)
    
    
    const host = 'ws://broker.***.***.com:9883'
    
    const options = {
        keepalive: 60,
        clientId: clientId,
        username: '***',
        password: '***',
        protocolId: 'MQTT',
        protocolVersion: 4,
        clean: true,
        reconnectPeriod: 1000,
        connectTimeout: 30 * 1000,
        
        will: {
            topic: 'WillMsg',
            payload: 'Connection Closed abnormally..!',
            qos: 0,
            retain: false
        },
    }
    
    console.log('Connecting mqtt client')
    const client = mqtt.connect(host, options)
    
    client.on('connect', () => {
        console.log('Client connected:' + clientId)
        // Subscribe
    })
</script>

And in my browser I've got this error:

After some research, some people say that need to use certificate: https://github.com/eclipse/paho.mqtt.javascript/issues/187

So, I've got this :

<script src="../browserMqtt.js"></script>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

<script>
            var options = {
                keyPath: '../credentials/client-key.pem',
                certPath: '../credentials/client-cert.pem',
                rejectUnauthorized : false, 
                ca: ['../credentials/a-cert.pem'],
                protocolId: 'MQTT',
                username: '***',
                password: '***',
                clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8)
            };

            var client = mqtt.connect('ws://broker.***.***.com:9883',options);

            client.on('connect', function(){
                console.log('Connected');
            });    
                    
</script>

I've got the same error in browser ...

The broker conguration for mosquitto, it's like this :

allow_anonymous false
password_file /mosquitto/config/passwd

#TCP
listener 1883
socket_domain ipv4

#SSL
listener 8883
socket_domain ipv4
cafile /mosquitto/config/tls/ca/ca-cert.pem
certfile /mosquitto/config/tls/server/server-cert.pem
keyfile /mosquitto/config/tls/server/server-key.pem
tls_version tlsv1.2
socket_domain ipv4

#WSS
listener 9883
socket_domain ipv4
protocol websockets
cafile /mosquitto/config/tls/ca/ca-cert.pem
certfile /mosquitto/config/tls/server/server-cert.pem
keyfile /mosquitto/config/tls/server/server-key.pem
tls_version tlsv1.2

persistence true
persistence_location /mosquitto/data/

log_dest file /mosquitto/log/mosquitto.log
log_timestamp_format %Y-%m-%dT%H:%M:%S
log_type all

I can't understand how can I solve it ? Thanks for your help

Answer 1

You can't use client side certs in the browser to authenticate the client (unless you load them into the browsers keystore, but even then I'm not convinced it will work unless there is only one cert/key for the browser to pick as javascript code won't normally prompt the user to pick the right one).

Also loading client certs over http from the server totally defeats the point of using a client cert as anybody can download them.

You need to remove all of the following from the options

keyPath: '../credentials/client-key.pem',
certPath: '../credentials/client-cert.pem',
rejectUnauthorized : false, 
ca: ['../credentials/a-cert.pem'],
protocolId: 'MQTT',

Because the paths are meaningless in the browser (and for the reasons I mentioned earlier)

You should also be starting your broker URL with wss:// to make it clear you are trying to connect over secure WebSockets.