Missing header for connection handshake

[bergmorten]

I'm trying to get Chrome to connect to a local server using WebTransport, and I’ve managed to get past the initial TLS handshake. What I did was use an ECDSA certificate with less than 7 days before expiry, and added its fingerprint in the browser JavaScript using the custom certificate requirements spec:

const transport = new WebTransport('https://localhost:3000', {
  serverCertificateHashes: [
    {
      algorithm: 'sha-256',
      value: new Uint8Array(
        'f5:85:3d:28:5a:65:6c:9f:77:76:72:6a:22:f3:73:39:fd:16:e8:a6:e4:06:08:99:98:c7:3f:af:ff:ac:c3:04'
          .split(':')
          .map((v) => parseInt(v, 16)),
      ),
    },
  ],
});

With this setup, I get past the TLS handshake, but a new issue arises:

App.vue:45 WebTransport not supported
WebTransportError: Opening handshake failed.

I found that the Python library aioquic (used by aiortc) had a similar issue, discussed here: #237 and in a related Chrome example: GoogleChrome/samples#751.

The solution in that case was to add the following server header:

headers.append((b"sec-webtransport-http3-draft", b"draft02"))

Question:
Is this header in your server code, and if not, how can I include it or configure custom headers properly?

[martenrichter]

And how does your local server code look like? (This package should set all necessary headers.)
And what is the version of your browser and the version of this package.

[bergmorten]

Sorry, I found the error — I was connecting to the server using an incomplete path: https://localhost:3000 instead of https://localhost:3000/test. This caused the error messages, which matched the same error in the Python library.

You can close this ticket