How to force non secure connection via paho mqqt js client?

Question

I get this error in staging but not in development when the browser tries to connect to my mosquitto server in Firefox:

SecurityError: The operation is insecure.

I'm not running the system with ssl and I know I should fix this but for the time been I would like to make this work.

  function mqtt() {
    // Create a client instance
    client = new Paho.MQTT.Client('localhost', 9091, "", "tablet_1");
    // set callback handlers
    client.onConnectionLost = onConnectionLost;
    client.onMessageArrived = onMessageArrived;
    client.reconnect = true
    willMessage = new Paho.MQTT.Message("Rescue me");
    connectOptions = {
        userName: 'server',
        password: '1234',
        // willMessage: willMessage,
        onSuccess:onConnect,
        cleanSession: true,
        reconnect: true,
        useSSL: false
    }
    // connect the client
    client.connect(connectOptions);
  }

This are my port configurations in mosquitto:

listener 1883
listener 8883
cafile ca.crt
certfile server.crt
keyfile server.key
tls_version tlsv1.2

listener 9091
protocol websockets

Answer 1

As hashed out in the comments, this is the browser blocking none secure content when the host page is loaded over https.

You can force mixed content by clicking on the shield in the URL bar, but this is not the right approach.

The correct solution to this is to run HTTPS/TLS everywhere (even in dev/staging).