Why does this MS Blazor App Websocket connection fail? - Fixed

Zero Trust Cloudflare Tunnel
1 
curl -v 'https://xxx.xxx.com/' -H 'Upgrade: websocket' -H 'Connection: Upgrade'
*   Trying 172.66.40.230:443...
* Connected to xxx.xxx.com (172.66.40.230) port 443 (#0)
* schannel: disabled automatic use of client certificate
* ALPN: offers http/1.1
* ALPN: server accepted http/1.1
> GET / HTTP/1.1
> Host: xxx.xxx.com
> User-Agent: curl/7.83.1
> Accept: */*
> Upgrade: websocket
> Connection: Upgrade
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Date: Thu, 26 Jan 2023 07:46:09 GMT
< Content-Type: text/plain
< Transfer-Encoding: chunked
< Connection: keep-alive
< Strict-Transport-Security: max-age=15552000; includeSubDomains; preload
< Upgrade: websocket
< CF-Cache-Status: DYNAMIC
< Report-To: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?s=FjY0uiUeGkaAXjrzf1k1rnv0Af1BXHqC2eHNW%2BW0CNNuzKmVwIELyvB%2BX308hhi2AD5%2F%2Bkkc5lt8KuiLFbMfddRmSisxyUP2lJwvKMS12CMLgjcOlcPhp44kR%2Bv2vh7VQ73WeCfLv58IsDg%3D"}],"group":"cf-nel","max_age":604800}
< NEL: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
< X-Content-Type-Options: nosniff
< Server: cloudflare
< CF-RAY: 78f7a217a95c17cf-MEL
< alt-svc: h3=":443"; ma=86400, h3-29=":443"; ma=86400
<
* schannel: server closed abruptly (missing close_notify)
* Closing connection 0
* schannel: shutting down SSL/TLS connection with qrcodeauth.darkedges.com port 443
curl: (56) Failure when receiving data from the peer

It is going via a Cloudflare Tunnel. If I go direct I get a response.

Any ideas on how I can debug?

Here is it failing behind Tunnel

image
image1264×333 13 KB

Here is it working if I go direct
image
image1258×339 17.6 KB

5

Found the answer.

Blazor App requires HTML Comments to operate



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <script src="/cdn-cgi/apps/head/thZWnQCN16sHq_42os2XW0EExu8.js"></script><link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="PingFederateQRCodeServerApp.styles.css" rel="stylesheet" />
    <!--Blazor:{"sequence":1,"type":"server","prerenderId":"dac57b7fd29a4dc0997578f6de244c6e","descriptor":"CfDJ8FCq4mQfyOtBrSDQWGdsOj3JMykyrogaV/s5O64KvmFQqzlBM1067RhYMFqoFLxiOb7GdEbjCLC24MHRh96QN5/b1hC0wlt6jBVYOoSl/0OiHFzCfGn0n6xVwetlMFonG3YsbX7MbUmId/R\u002Bw5KhBOnh9JjuEDlFGqd5FC5P/vPNrcJpPcZCHrGIV1Y1md4DBeF/YvRUsL8Go3w6jeOXN74prUpdph/qotpqGFFPDCQ4no2qpJmMhCneYCZ4suNBiV6HZ7k4DVcIlWbXaXggkrCVufLT1PsoWvmTJeT2INFA/SIPt9OoDax3ntl9e1o7EvGhom3AfYTaK3fBwRpAGuW/2g9EcErL91APe1QXLiBwkPXDx4hyI1oyeDRg2XqKll3Cj5ZU2X2bWGj60vlaRM2C7d\u002BXFHg79sXPscFwUu\u002BV"}--><title>jump</title><!--Blazor:{"prerenderId":"dac57b7fd29a4dc0997578f6de244c6e"}-->
</head>
<body>
    
<!--Blazor:{"sequence":0,"type":"server","prerenderId":"2dbb2417de4a4b248a149cfceb4a155c","descriptor":"CfDJ8FCq4mQfyOtBrSDQWGdsOj15yvMSoGErc95NwnTuzW4HlcvfrJhlL9qWfJntIqWA90x0DyGB1qo9nPizFy4PhZSEeXjiw27n/wDDGF8DbaLIVYm1qbS0JsTjNaF8Uh8/qNJad2C7xfdWsfAC9nkOLM\u002BKz8/yJ2DdG663yaNnG7cYcc9Oxw8j2WXMdLT5BXJFHf/I5x1eYCsMs9jjhjUx0jOZFknFSpqEgBOJARAtdg\u002BkcZUM2UsIkRrk1qIJv18V07KGFVQB8S1jo5wvoN3zqldxG5WKEL3qsxg\u002B/00di9ebu0pZ2Jucqtx4aM7jEUri8FoP1wccoevzsivodSVOHKGf76ZgYdUrIJU6lb7HhmHvlJHrA91LOr0e9cuFU/paYyto2BxYROuf3wbU2pNRmoc="}-->


<div id="center-screen"><div id="auth"><h1>QR Code Authenticator</h1>
		<div id="qrcode"><form method="post" action="/qrcode"><input type="hidden" name="item1" value="Item 1">
				<input type="hidden" name="item2" value="Item 2">
				<input type="hidden" name="item3" value="Item 3">
				<input type="hidden" name="item4" value="Item 4">
				<input type="submit"></form></div></div></div>
        <!--Blazor:{"prerenderId":"2dbb2417de4a4b248a149cfceb4a155c"}-->
<!--Blazor-Component-State:CfDJ8FCq4mQfyOtBrSDQWGdsOj2CG2AsSC/sSLM4ryUrWBhvX8zymekbGQ80dwIs/DWAH/2MwAPisdUM57xGAwkctpKa2b/YocXN9BpdDwZ6LzIfF4mvmXmE2OU5BiZNdFXIhQ==-->


    <div id="blazor-error-ui">
        
            An error has occurred. This application may no longer respond until reloaded.
        
        
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.server.js" type="a88fb38cd477c1ed54c73f3d-text/javascript"></script>
    <script src="_content/BlazorZXingJs/zxingjs-0.18.2/umd/index.min.js" type="a88fb38cd477c1ed54c73f3d-text/javascript"></script>
<script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="a88fb38cd477c1ed54c73f3d-|49" defer=""></script></body>
</html>

If there are not there then it cannot start the WebSocket to continue the app.

By default when you proxy through Cloudflare it minifies the HTML, as well as CSS / JS, and in doing so it strips out the comments, which in turn disables the WebSocket.

You need to create a Page Rule to not minify the HTML for your Blazor Apps.

image
image930×103 5.18 KB

Once done, WebSockets work as normal and you get your Blazor App displayed.
qrcodeauth

This has been a couple of weeks of pain as I was looking in all the wrong places.

1 Like