从浏览器连接到 AWS IoT Core 上的 MQTT

Question

我的目标是创建一个网页，在其中我可以看到（目前即使只是在控制台中）发布在我在 AWS IoT Core 上的 MQTT 代理的特定主题上的消息。使用 AWS IoT Core 是一个重要的细节，因为您只能使用证书连接到它。

我成功地连接到该代理并使用 Python（使用 Paho MQTT）和 Node.js（使用 MQTT.js）接收消息。现在我希望能够在网页中获取消息。

我尝试使用与 Node.js 相同的方法（因此使用 MQTT.js），但我无法与代理建立连接，因为我收到通用的“Websocket 连接失败”错误消息。问题可能出在我使用证书的身份验证中。这是我测试过的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/mqtt/5.3.3/mqtt.js"></script>
<script language="javascript">
const keyValue = `-----BEGIN RSA PRIVATE KEY-----
ABC...
...
...XYZ
-----END RSA PRIVATE KEY-----`;

const certValue = `-----BEGIN CERTIFICATE-----
ABC...
...
...XYZ
-----END CERTIFICATE-----`;

const caValue = `-----BEGIN CERTIFICATE-----
ABC...
...
...XYZ
-----END CERTIFICATE-----`;

const options = {
    protocolVersion: 5,
    protocol: 'mqtts',
    host: 'XXXXXXXXXXXXXX-ats.iot.eu-central-1.amazonaws.com',
    port: 8883,
    ca: [caValue],
    cert: certValue,
    key: keyValue
};

console.log("Attempting to connect...");
const client = mqtt.connect(options);

client.on('connect', () => console.log("Connection established!"));
            
client.subscribe('party/window/ABCD');
client.on('message', function(topic, message) {
    console.log(`Received message on topic ${topic}: ${message}`);
});

client.on('disconnect', () => console.log('MQTT Connection lost'));
</script>

错误出现在消息“尝试连接”之后。我在这里明确编写了 key/cert/ca 值，以解决从文件加载它们时出现的问题（在 Node.js 中，我可以简单地使用 fs.readFileAsync 来实现）。

最后，我有两个问题：

1. 为什么我无法使用上面的代码连接到经纪商？
2. 处理此问题的更好方法是什么，以便我的密钥/证书/ca 值不会在代码中公开，因为最终目标是在公共网页上提供此解决方案？

Answer 1

您无法从浏览器使用基于证书的身份验证。

浏览器 JavaScript 沙箱仅允许您使用浏览器证书存储中已有的证书。

您需要使用浏览器中的签名 URL 身份验证方法。