Vite hot reload client code passes malformed URI to new WebSocket in noorigin contexts

[JadedBlueEyes]

Describe the bug

When Vite is in a noorigin context, like an iframe loaded from the srcdoc attribute, it passes a malformed url to new WebSocket.

This results in an uncaught error that prevents scripts from executing.

Relevant code: https://github.com/vitejs/vite/blob/main/packages/vite/src/client/client.ts#L28

I intend to submit a patch to catch thrown errors when creating the WebSocket.

Reproduction

https://github.com/JoelEllis/vite-noorigin-mre

System Info

❯ pnpm dlx envinfo --system --npmPackages '{vite,@vitejs/*}' --binaries --browsers
Packages: +1
+
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: /tmp/.pnpm-store/v3
  Virtual store is at:             node_modules/.pnpm

/tmp/dlx-49960/5:
+ envinfo 7.8.1

Progress: resolved 1, reused 0, downloaded 1, added 1, done

  System:
    OS: Linux 5.16 Fedora Linux 35 (Workstation Edition)
    CPU: (12) x64 AMD Ryzen 5 3600XT 6-Core Processor
    Memory: 20.34 GB / 31.29 GB
    Container: Yes
    Shell: 5.1.8 - /bin/bash
  Binaries:
    Node: 16.14.0 - /usr/bin/node
    npm: 8.3.1 - /usr/bin/npm
  Browsers:
    Chrome: 98.0.4758.102
    Firefox: 97.0.1

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[JadedBlueEyes]

The patch is here: #7111