Can't connect from blazor WASM using WebSocket and TLS

[FabrizioSalis]

Hi everyone!

I am trying to connect from a blazor WASM application to a cloud hosted MQTT server.
The only way to communicate is by the usage of WebSockets, because TCP access is denied from a browser.
Another requirement is to use TLS encryption.

This is my client configuration:

    var options = new MqttClientOptionsBuilder()
                .WithWebSocketServer("[MYAPP].cloudapp.azure.com:9883")
                .WithTls()
                .Build();

and this is the server part:

clientOptionsBuilder.WithTls().WithWebSocketServer("[MYAPP].cloudapp.azure.com:9883");

I got an error during the handshake. I guess something is missing in the server configuration, maybe I should set a certificate somewhere?

Thanks for your help

[chkr1011]

Please provide some more details which kind of error you get. Please try to connect using MQTTnetApp (https://github.com/chkr1011/MQTTnetApp) and let me know if it work for that app.

[FabrizioSalis]

Thank you for the answer.

I tried with your console, and same error. Here you have all the SERVER source code:

In the attachments, the client configuration.

using System.Security.Authentication;
using System.Security.Cryptography.X509Certificates;
using MQTTnet.AspNetCore;

var builder = WebApplication.CreateBuilder(args);
var certificate = new X509Certificate(@"D:\cert.pfx", "******", X509KeyStorageFlags.Exportable);


builder.Services.AddHostedMqttServer(options =>
{
    options.WithEncryptedEndpointPort(1883);
    options.WithEncryptedEndpoint();
    options.WithRemoteCertificateValidationCallback((sender, certificate, chain, errors) => true);
    options.WithEncryptionCertificate(certificate.Export(X509ContentType.Pfx));
    options.WithTlsEndpointReuseAddress();
    options.WithEncryptionSslProtocol(SslProtocols.Tls12);
});

builder.Services.AddMqttTcpServerAdapter();
builder.Services.AddMqttWebSocketServerAdapter();
builder.Services.AddMqttConnectionHandler();
builder.Services.AddConnections();
builder.WebHost.ConfigureKestrel(o =>
{
    o.ListenAnyIP(1883, l => l.UseMqtt());
    o.ListenAnyIP(5000);
});

var app = builder.Build();

app.MapGet("/", () => "The MQTT Service is running.");

app.UseRouting();
app.UseEndpoints(endpoints => {
        endpoints.MapConnectionHandler<MqttConnectionHandler>("/mqtt",
            httpConnectionDispatcherOptions => httpConnectionDispatcherOptions.WebSockets.SubProtocolSelector =
                protocolList => protocolList.FirstOrDefault() ?? string.Empty);
    });

app.Run();

and this is the exception from the test app:

MQTTnet.Exceptions.MqttCommunicationException: Unable to connect to the remote server
 ---> System.Net.WebSockets.WebSocketException (0x80004005): Unable to connect to the remote server
 ---> System.Net.Http.HttpRequestException: The SSL connection could not be established, see inner exception.
 ---> System.IO.IOException: Cannot determine the frame size or a corrupted frame was received.
   at System.Net.Security.SslStream.GetFrameSize(ReadOnlySpan`1 buffer)
   at System.Net.Security.SslStream.ReceiveBlobAsync[TIOAdapter](TIOAdapter adapter)
   at System.Net.Security.SslStream.ForceAuthenticationAsync[TIOAdapter](TIOAdapter adapter, Boolean receiveFirst, Byte[] reAuthenticationData, Boolean isApm)
   at System.Net.Http.ConnectHelper.EstablishSslConnectionAsync(SslClientAuthenticationOptions sslOptions, HttpRequestMessage request, Boolean async, Stream stream, CancellationToken cancellationToken)
   --- End of inner exception stack trace ---
   at System.Net.Http.ConnectHelper.EstablishSslConnectionAsync(SslClientAuthenticationOptions sslOptions, HttpRequestMessage request, Boolean async, Stream stream, CancellationToken cancellationToken)
   at System.Net.Http.HttpConnectionPool.ConnectAsync(HttpRequestMessage request, Boolean async, CancellationToken cancellationToken)
   at System.Net.Http.HttpConnectionPool.CreateHttp11ConnectionAsync(HttpRequestMessage request, Boolean async, CancellationToken cancellationToken)
   at System.Net.Http.HttpConnectionPool.AddHttp11ConnectionAsync(HttpRequestMessage request)
   at System.Threading.Tasks.TaskCompletionSourceWithCancellation`1.WaitWithCancellationAsync(CancellationToken cancellationToken)
   at System.Net.Http.HttpConnectionPool.GetHttp11ConnectionAsync(HttpRequestMessage request, Boolean async, CancellationToken cancellationToken)
   at System.Net.Http.HttpConnectionPool.SendWithVersionDetectionAndRetryAsync(HttpRequestMessage request, Boolean async, Boolean doRequestAuth, CancellationToken cancellationToken)
   at System.Net.Http.RedirectHandler.SendAsync(HttpRequestMessage request, Boolean async, CancellationToken cancellationToken)
   at System.Net.WebSockets.WebSocketHandle.ConnectAsync(Uri uri, CancellationToken cancellationToken, ClientWebSocketOptions options)
   at System.Net.WebSockets.WebSocketHandle.ConnectAsync(Uri uri, CancellationToken cancellationToken, ClientWebSocketOptions options)
   at System.Net.WebSockets.ClientWebSocket.ConnectAsyncCore(Uri uri, CancellationToken cancellationToken)
   at MQTTnet.Implementations.MqttWebSocketChannel.ConnectAsync(CancellationToken cancellationToken)
   at MQTTnet.Adapter.MqttChannelAdapter.ConnectAsync(CancellationToken cancellationToken)
   --- End of inner exception stack trace ---
   at MQTTnet.Adapter.MqttChannelAdapter.WrapAndThrowException(Exception exception)
   at MQTTnet.Adapter.MqttChannelAdapter.ConnectAsync(CancellationToken cancellationToken)
   at MQTTnet.Client.MqttClient.ConnectAsync(MqttClientOptions options, CancellationToken cancellationToken)
   at MQTTnet.Client.MqttClient.ConnectAsync(MqttClientOptions options, CancellationToken cancellationToken)
   at MQTTnetApp.Services.Mqtt.MqttClientService.Connect(ConnectionItemViewModel item) in C:\Users\fabri\Downloads\MQTTnetApp-main\Source\Services\Mqtt\MqttClientService.cs:line 108
   at MQTTnetApp.Pages.Connection.ConnectionPageViewModel.Connect(ConnectionItemViewModel item) in C:\Users\fabri\Downloads\MQTTnetApp-main\Source\Pages\Connection\ConnectionPageViewModel.cs:line 82