[Help] Where the certificates are defined in the MQTTX web app?

[hsmptg]

I was trying to use MQTTX web app to make a wss connection to my mqtt broker but unlike MQTTX desktop app I can not specify the self signed certificates, why?

As you can check in the following screenshots, even selecting the SSL options, only the desktop app allows the defenition of the certificates:

[ysfscream]

Hi! Thank you for your question about using certificates in the MQTTX web app. You're correct that the web version currently does not allow specifying custom certificates like the desktop version does.

This limitation is due to browser security restrictions that prevent JavaScript from directly accessing or manipulating SSL/TLS certificates. Browsers handle certificate management internally for security reasons.

For use cases requiring custom certificates or two-way SSL authentication, I would highly recommend using the MQTTX Desktop application or CLI instead. These versions give you full control over certificate configuration.

The desktop and CLI versions allow you to:

• Specify custom CA certificates
• Use client certificates for mutual TLS authentication
• Configure all certificate-related options needed for your specific setup

While the web version is convenient for basic usage, the desktop/CLI versions are better suited for more advanced configurations involving custom certificates.

[hsmptg]

Hi Thanks for your reply but what do you mean by:

This limitation is due to browser security restrictions that prevent JavaScript from directly accessing or manipulating SSL/TLS certificates. Browsers handle certificate management internally for security reasons.

I thought that websockets and wss in particular were used precisely in order to web apps be able to make broker connection securely.

I am developing a React frontend app that connects to a self hosted broker and while it connects successfully to your emqx public broker by wss, when I try to do the same with my broker (that use self signed cerificates) it fails so I would like to try with another web client to see what could be the problem.

Do you know any web mqtt client using certificates that I could use instead?

Regards

[ysfscream]

MQTT clients in web browsers indeed have difficulty implementing client certificate uploads. The key points are:

1. WebSocket Secure (WSS) can be used for secure connections, but this typically only involves server-side (Broker) certificate verification.

2. In a web environment, the browser handles SSL/TLS connections and verifies the server's certificate. This is one-way TLS authentication.

3. For self-signed certificates, the issue is that browsers may not trust them unless you manually add an exception in the browser.

4. Implementing client certificate authentication (like two-way TLS or upload CA file) is indeed challenging in a web environment because browsers restrict access to and manipulation of client certificates.

For your situation, I recommend:

1. Configure secure connections on the Broker side, implementing one-way secure connections via WSS. This should be sufficient for most use cases' security requirements.

2. If you truly need client certificate authentication, you may need to consider using desktop applications or other non-browser solutions.

3. For development and testing, you can add security exceptions for self-signed certificates in your browser.

4. In production environments, it's best to use certificates issued by trusted CAs to avoid certificate issues.

Regarding the React frontend application you're developing, if it successfully connects to the EMQX public Broker but fails to connect to your self-hosted Broker, the issue might be:

1. The self-signed certificate is not trusted by the browser
2. There might be issues with the WSS configuration on your Broker