Attempting to connect via http on an external connection causes crash

[willbruceSmartDCSIT]

Describe the bug
When running the chatterbox client on my web browser to connect to the homeserver - using my networks IP (192.168.0.X) - the CB client crashes when loading up. The error message valid in the Chrome Inspect panel is:
VM42 main.ts:104 TypeError: Cannot read properties of undefined (reading 'deriveBits') at new Crypto (VM46 hydrogen-view-sdk.js:8749:23) at new Platform (VM46 hydrogen-view-sdk.js:9774:21) at main (VM42 main.ts:57:20)
VM46 hydrogen-view-sdk.js:8749 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'deriveBits') at new Crypto (VM46 hydrogen-view-sdk.js:8749:23) at new Platform (VM46 hydrogen-view-sdk.js:9774:21) at main (VM42 main.ts:57:20)

To Reproduce
Steps to reproduce the behavior:

1. Follow installation steps outlined in the readme
2. Adjust config.json
3. Connect to server IP
4. Error visible in the Chrome Inspect Console

Expected behavior
Chatterbox client should open up as normal - this works when connecting to localhost

Desktop (please complete the following information):

• Browser: Chrome
• Version: 121.0.6167.139

[Rhys-T]

I ran into that too. It's not exactly a bug in Chatterbox, but rather a limitation in what your browser allows non-secure websites to do. Chatterbox/Hydrogen uses the Web Crypto API, and like a lot of newer web APIs, it's only allowed in secure contexts - which basically means either HTTPS or localhost. So when you connect to another server like 192.168.0.X over insecure HTTP, the entire crypto.subtle object is missing, and CB doesn't bother to check whether it exists before using it, so it ends up crashing (not that CB could work without it anyway).

To let Chatterbox use that API, you can either:

• Serve Chatterbox and the host page over HTTPS (even a self-signed certificate is enough to allow the Web Crypto API, once you tell the browser to accept it)
• Tunnel/proxy the connection through localhost somehow (e.g. ssh -L8000:localhost:80 192.168.0.X then go to localhost:8000)
• Use a browser-specific setting to force 192.168.0.X to be treated as a secure context
  • Firefox: Go to about:config, and create dom.securecontext.allowlist as a comma-separated list of domains/addresses to treat as secure (e.g. 192.168.0.X,192.168.0.Y).
  • Chrome: Go to chrome://flags/#unsafely-treat-insecure-origin-as-secure, and enter a comma-separated list of origins to treat as secure (e.g. http://192.168.0.X,http://192.168.0.Y:8000).