英文:
MQTT.js wss connection failed in browser
问题
我正在使用React框架编写一个浏览器应用程序。在这个应用程序中，我订阅了MQTT主题。我正在使用MQTT.js包。如果我在浏览器中运行应用程序（已测试Edge和Firefox），并使用https连接，我被迫使用安全的WebSocket（wss）连接。如果我强制浏览器使用http连接，WebSocket连接（ws）正常工作。但是使用wss时连接失败：
WebSocket connection to 'wss://serveradress.tld:8084/mqtt' failed
从独立的MQTT客户端（MQTTX）到经纪人的wss连接也正常工作。但从像hivemq或mqttx web这样的Web客户端连接则无法正常工作。
这是我连接MQTT经纪人的代码：
var mqtt = require('mqtt/dist/mqtt');
var mqttOptions = {
protocol: 'wss',
keepalive: 20,
clientId: "mqttjs_" + Math.random().toString(16).substr(2, 8),
path: "/mqtt/",
rejectUnauthorized: false
};
const mqttUrl = "wss://serveradress.tld:8084";
var mqttClient = mqtt.connect(mqttUrl, mqttOptions);
因为我在封闭网络中运行连接，所以我不需要验证证书。我认为选项rejectUnauthorized: false是否接受了这一点？
有什么建议我如何调试这个问题吗？
提前感谢！
尼科
英文:
I am coding a browser app by using the react framework. In this app mqtt topics are subscribed. I am using the MQTT.js package. If I am running the app in the browser (Edge and Firefox tested) by using an https connection I am forced to using secure websocket (wss) connections. If I am forcing the browser to use an http connection the websocket connection (ws) works fine. But with wss the connection fails:
WebSocket connection to 'wss://serveradress.tld:8084/mqtt' failed
The wss connection to the broker works also fine from a standalone MQTT client (MQTTX). But it does not work from an webclient like hivemq or mqttx web either.
Here my code for connecting the mqtt broker:
var mqtt = require('mqtt/dist/mqtt');
var mqttOptions = {
protocol: 'wss',
keepalive: 20,
clientId: "mqttjs_" + Math.random().toString(16).substr(2, 8),
path: "/mqtt/,
rejectUnauthorized: false
};
const mqttUrl = "wss://serveradress.tld:8084";
var mqttClient = mqtt.connect(mqttUrl, mqttOptions);
I do not need to verify the certificates because I am running the connection in a closed network. I am thinking, that the option "rejectUnauthorized: false" accepts this?
Any recommendations how I can debug this?
Thank in advance!
nico
答案1
得分: 1
在浏览器中运行时，JavaScript 代码无法控制 TLS/SSL 处理，所有这些都由浏览器完成。
浏览器也不会显示一个屏幕来询问您是否接受无效证书，就像访问 HTTPS 页面时那样。
您唯一的选择（除非使用由“真实” CA 颁发的证书）就是将经纪人证书或其 CA 证书添加到每个想要使用经纪人的浏览器的证书存储中。这样浏览器就知道要信任它。
如何将证书/CA 证书添加到浏览器中，对于每个浏览器略有不同，但通常可以在“安全”选项下找到。
英文:
When running in the browser, the JavaScript code has no control over the TLS/SSL handling, all that is done by the browser.
The browser will also not present a screen asking you to accept an invalid certificate as it does when accessing a HTTPS page.
You ONLY option (other than using a cert issued by "real" CA) is to add either the broker certificate or it's CA certificate to the certificate store of EVERY browser that wants to use the broker. This is so the browser knows to trust this.
How you add certificates/CA certificates to browsers is slightly different for every browser, but usually found under "Security" in the Settings.
答案2
得分: 0
最后，这是经纪人配置中的错误。 经纪人（EMQX）未使用正确的证书，因为侦听器仅为端口8883上的SSL连接定义了。 在为WSS侦听器定义证书路径之后，连接成功建立。
英文:
Finally it was a fault in the broker configuration. The broker (EMQX) was not using the correct certificates because the listener was only defined for the SSL connection on port 8883.
After defining the path to the certificates for the WSS listener, the connection was successfully established.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论