Difficulty Establishing Secure Connection Between Web Server and MQTT Server

Using Django Deployment
1

Hello everyone,

I’m currently working on a project for monitoring robots, and I’ve developed a web platform using Django and Vue for data acquisition and visualization. At present, I’m utilizing an MQTT server to transmit all my data. However, I’ve encountered an issue while trying to configure communication between my web page, which has an SSL certificate generated by Certbot, and the MQTT server implemented on a Raspberry Pi 4.

I’ve attempted to generate an SSL certificate for MQTT using OpenSSL, but I’ve been unsuccessful in establishing a connection between the web server and the MQTT server. It seems that the web page doesn’t allow unencrypted connections with the MQTT server.

I’m employing the WebSocket protocol for this connection. Additionally, I’m unable to use Certbot to generate an SSL certificate for the Raspberry Pi, as I don’t have my own domain for the Raspberry Pi’s IP address.

Does anyone have any ideas about what might be happening or any alternative methods for securely establishing this connection?

Thanks in advance for your assistance.

2

I’m sorry, I’m not understanding what you’re trying to describe for the connections here.

What do you mean by this? By “web page”, are you referring to the page that has been rendered and returned to a browser? Or some other component?

Connection between what two processes?

Do you own your domain? You can create a wild-card cert and use a sub-domain name for your Pi. (That’s what I do.)

3

Hello @KenWhiteSell,

Let me explain in more detail the project we’re working on for clarity. We are developing a solution that integrates MQTT (Message Queuing Telemetry Transport) technology with a webpage. When I refer to the “webpage,” I mean the page I’m presenting. The main idea is to transmit data from an MQTT server to a web user interface in real-time using the WebSocket protocol.

Regarding the operating process:

  1. MQTT Server: We have implemented an MQTT server that acts as the central hub for receiving data. This server is configured to receive data from various sensors or other sources of information. Upon receiving the data, it publishes it to the respective MQTT channels.
  2. Webpage: We have created a dynamic webpage capable of receiving data in real-time and presenting it effectively in the user interface. To achieve this, we use WebSocket technology. The webpage establishes a WebSocket connection with the MQTT server to receive the published data.
  3. Data Transmission: When new data arrives at the MQTT server, it is transmitted through the WebSocket connection to the web client, i.e., the webpage. Subsequently, the webpage processes this data and displays it in real-time for the user to visualize and act upon.

Recently, during the connection testing between the webpage and the MQTT server, we encountered a specific error manifested as follows:

Error Detected:
mqtt.esm.js:5 Mixed Content: The page at 'https://imacunamqtt.com/Mqtt' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://imacunamqtt.live:8083/mqtt'. This request has been blocked; this endpoint must be available over WSS.

This error indicates that the webpage is loaded via HTTPS, signifying a secure connection. However, the webpage attempts to connect to an insecure WebSocket endpoint (ws://imacunamqtt.live:8083/mqtt) since it uses the non-encrypted ws protocol. Consequently, the web browser blocks this request due to mixed content security policies.

We’ve tried to implement a secure protocol, wss, but encountered the following error message: “WebSocket connection to ‘wss://172.17.#.#:8084/mqtt’ failed.” We’re unsure of what might be failing at this point. If you have any ideas on how to fix this, I would greatly appreciate it.

4

What process is it that is listening on port 8083 / 8084, that you are trying to establish a websocket connection with?

5

Ports 8083 and 8084 on the web server are open, however it appears that no processes are currently listening to them.

8084                       ALLOW       Anywhere                  
8084/tcp                   ALLOW       Anywhere                  
8083                       ALLOW       Anywhere  

sudo lsof -i :8084
sudo lsof -i :8083

In contrast, ports 8083 and 8084 on the Raspberry Pi 4 with the MQTT server listen to the following processes.

 $ sudo lsof -i :8084
COMMAND    PID      USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
mosquitto 2767 mosquitto   14u  IPv4  33693      0t0  TCP *:8084 (LISTEN)
mosquitto 2767 mosquitto   16u  IPv4  36308      0t0  TCP 172.17.#.#:8084->172.17.#.#:30940 (ESTABLISHED)
mosquitto 2767 mosquitto   17u  IPv4  36997      0t0  TCP 172.17.#.#:8084->172.17.#.#:30995 (ESTABLISHED)
mosquitto 2767 mosquitto   19u  IPv4  36348      0t0  TCP 172.17.#.#:8084->172.17.#.#:31119 (ESTABLISHED)

pi@raspberrypi:~ $ sudo lsof -i :8083
COMMAND    PID      USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
mosquitto 2767 mosquitto   10u  IPv4  33691      0t0  TCP *:8083 (LISTEN)