Merge pull request #1705 from vector-im/dbkr/use_secure_random

Generate call passwords with secure RNG

package.json

@@ -47,7 +47,7 @@
     "@types/lodash": "^4.14.199",
     "@use-gesture/react": "^10.2.11",
     "@vector-im/compound-design-tokens": "^0.0.6",
-    "@vector-im/compound-web": "^0.4.0",
+    "@vector-im/compound-web": "^0.5.0",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "@vitejs/plugin-react": "^4.0.1",
     "buffer": "^6.0.3",
@@ -74,7 +74,7 @@
     "tinyqueue": "^2.0.3",
     "unique-names-generator": "^4.6.0",
     "uuid": "9",
-    "vaul": "^0.6.1"
+    "vaul": "^0.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.16.5",

public/.well-known/apple-app-site-association

@@ -10,7 +10,7 @@
         "components": [
           {
             "?": {
-              "no_universal_links": "*"
+              "no_universal_links": "?*"
             },
             "exclude": true,
             "comment": "Opt out of universal links"

public/locales/de/app.json

@@ -114,5 +114,10 @@
   "Start new call": "Neuen Anruf beginnen",
   "Call not found": "Anruf nicht gefunden",
   "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Anrufe sind nun Ende-zu-Ende-verschlüsselt und müssen auf der Startseite erstellt werden. Damit stellen wir sicher, dass alle denselben Schlüssel verwenden.",
-  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Dein Webbrowser unterstützt keine Medien-Ende-zu-Ende-Verschlüsselung. Unterstützte Browser sind Chrome, Safari, Firefox >=117"
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Dein Webbrowser unterstützt keine Medien-Ende-zu-Ende-Verschlüsselung. Unterstützte Browser sind Chrome, Safari, Firefox >=117",
+  "Copy link": "Link kopieren",
+  "Invite": "Einladen",
+  "Invite to this call": "Zu diesem Anruf einladen",
+  "Link copied to clipboard": "Link in Zwischenablage kopiert",
+  "Participants": "Teilnehmende"
 }

public/locales/it/app.json

@@ -23,7 +23,7 @@
   "Debug log request": "Richiesta registro di debug",
   "Developer": "Sviluppatore",
   "Developer Settings": "Impostazioni per sviluppatori",
-  "Display name": "Nome da mostrare",
+  "Display name": "Il tuo nome",
   "Element Call Home": "Inizio di Element Call",
   "Enable end-to-end encryption (password protected calls)": "Attiva crittografia end-to-end (chiamate protette da password)",
   "Encrypted": "Cifrata",

public/locales/uk/app.json

@@ -114,5 +114,10 @@
   "Back to recents": "Повернутися до недавніх",
   "Call not found": "Виклик не знайдено",
   "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "Відтепер виклики захищено наскрізним шифруванням, і їх потрібно створювати з домашньої сторінки. Це допомагає переконатися, що всі користувачі використовують один і той самий ключ шифрування.",
-  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Ваш браузер не підтримує наскрізне шифрування мультимедійних даних. Підтримувані браузери: Chrome, Safari, Firefox >=117"
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "Ваш браузер не підтримує наскрізне шифрування мультимедійних даних. Підтримувані браузери: Chrome, Safari, Firefox >=117",
+  "Invite": "Запросити",
+  "Link copied to clipboard": "Посилання скопійовано до буфера обміну",
+  "Participants": "Учасники",
+  "Copy link": "Скопіювати посилання",
+  "Invite to this call": "Запросити до цього виклику"
 }

public/locales/zh-Hant/app.json

@@ -114,5 +114,10 @@
   "Unmute microphone": "將麥克風取消靜音",
   "Call not found": "找不到通話",
   "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.": "通話現在是端對端加密的，必須從首頁建立。這有助於確保每個人都使用相同的加密金鑰。",
-  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "您的網路瀏覽器不支援媒體端到端加密。支援的瀏覽器包含了 Chrome、Safari、Firefox >=117"
+  "Your web browser does not support media end-to-end encryption. Supported Browsers are Chrome, Safari, Firefox >=117": "您的網路瀏覽器不支援媒體端到端加密。支援的瀏覽器包含了 Chrome、Safari、Firefox >=117",
+  "Copy link": "複製連結",
+  "Invite": "邀請",
+  "Invite to this call": "邀請到此通話",
+  "Link copied to clipboard": "連結已複製到剪貼簿",
+  "Participants": "參與者"
 }

src/UrlParams.ts

@@ -33,6 +33,9 @@ interface RoomIdentifier {
 // clearer what each flag means, and helps us avoid coupling Element Call's
 // behavior to the needs of specific consumers.
 interface UrlParams {
+  // Widget api related params
+  widgetId: string | null;
+  parentUrl: string | null;
   /**
    * Anything about what room we're pointed to should be from useRoomIdentifier which
    * parses the path and resolves alias with respect to the default server name, however
@@ -178,6 +181,9 @@ export const getUrlParams = (
   const fontScale = parseFloat(parser.getParam("fontScale") ?? "");
 
   return {
+    widgetId: parser.getParam("widgetId"),
+    parentUrl: parser.getParam("parentUrl"),
+
     // NB. we don't validate roomId here as we do in getRoomIdentifierFromUrl:
     // what would we do if it were invalid? If the widget API says that's what
     // the room ID is, then that's what it is.
@@ -218,33 +224,39 @@ export function getRoomIdentifierFromUrl(
   hash: string
 ): RoomIdentifier {
   let roomAlias: string | null = null;
+  pathname = pathname.substring(1); // Strip the "/"
+  const pathComponents = pathname.split("/");
+  const pathHasRoom = pathComponents[0] == "room";
+  const hasRoomAlias = pathComponents.length > 1;
 
-  // Here we handle the beginning of the alias and make sure it starts with a "#"
+  // What type is our url: roomAlias in hash, room alias as the search path, roomAlias after /room/
   if (hash === "" || hash.startsWith("#?")) {
-    roomAlias = pathname.substring(1); // Strip the "/"
-
-    // Delete "/room/", if present
-    if (roomAlias.startsWith("room/")) {
-      roomAlias = roomAlias.substring("room/".length);
+    if (hasRoomAlias && pathHasRoom) {
+      roomAlias = pathComponents[1];
     }
-    // Add "#", if not present
-    if (!roomAlias.startsWith("#")) {
-      roomAlias = `#${roomAlias}`;
+    if (!pathHasRoom) {
+      roomAlias = pathComponents[0];
     }
   } else {
     roomAlias = hash;
   }
 
   // Delete "?" and what comes afterwards
-  roomAlias = roomAlias.split("?")[0];
+  roomAlias = roomAlias?.split("?")[0] ?? null;
 
-  if (roomAlias.length <= 1) {
+  if (roomAlias) {
     // Make roomAlias is null, if it only is a "#"
-    roomAlias = null;
-  } else {
-    // Add server part, if not present
-    if (!roomAlias.includes(":")) {
-      roomAlias = `${roomAlias}:${Config.defaultServerName()}`;
+    if (roomAlias.length <= 1) {
+      roomAlias = null;
+    } else {
+      // Add "#", if not present
+      if (!roomAlias.startsWith("#")) {
+        roomAlias = `#${roomAlias}`;
+      }
+      // Add server part, if not present
+      if (!roomAlias.includes(":")) {
+        roomAlias = `${roomAlias}:${Config.defaultServerName()}`;
+      }
     }
   }
 

src/e2ee/sharedKeyManagement.ts

@@ -19,7 +19,7 @@ import { useEffect, useMemo } from "react";
 import { useEnableE2EE } from "../settings/useSetting";
 import { useLocalStorage } from "../useLocalStorage";
 import { useClient } from "../ClientContext";
-import { PASSWORD_STRING, useUrlParams } from "../UrlParams";
+import { useUrlParams } from "../UrlParams";
 import { widget } from "../widget";
 
 export const getRoomSharedKeyLocalStorageKey = (roomId: string): string =>
@@ -60,29 +60,6 @@ export const useRoomSharedKey = (roomId: string): string | null => {
   return useInternalRoomSharedKey(roomId)[0] ?? passwordFormUrl;
 };
 
-export const useManageRoomSharedKey = (roomId: string): string | null => {
-  const urlParams = useUrlParams();
-
-  const urlPassword = useKeyFromUrl(roomId);
-
-  const [e2eeSharedKey] = useInternalRoomSharedKey(roomId);
-
-  useEffect(() => {
-    const hash = location.hash;
-
-    if (!hash.includes("?")) return;
-    if (!hash.includes(PASSWORD_STRING)) return;
-    if (urlParams.password !== e2eeSharedKey) return;
-
-    const [hashStart, passwordStart] = hash.split(PASSWORD_STRING);
-    const hashEnd = passwordStart.split("&").slice(1).join("&");
-
-    location.replace((hashStart ?? "") + (hashEnd ?? ""));
-  }, [urlParams, e2eeSharedKey]);
-
-  return e2eeSharedKey ?? urlPassword;
-};
-
 export const useIsRoomE2EE = (roomId: string): boolean | null => {
   const { client } = useClient();
   const room = useMemo(() => client?.getRoom(roomId) ?? null, [roomId, client]);

src/home/CallList.tsx

@@ -68,9 +68,11 @@ function CallTile({ name, avatarUrl, room }: CallTileProps) {
   return (
     <div className={styles.callTile}>
       <Link
-        // note we explicitly omit the password here as we don't want it on this link because
-        // it's just for the user to navigate around and not for sharing
-        to={getRelativeRoomUrl(room.roomId, room.name)}
+        to={getRelativeRoomUrl(
+          room.roomId,
+          room.name,
+          roomSharedKey ?? undefined
+        )}
         className={styles.callTileLink}
       >
         <Avatar id={room.roomId} name={name} size={Size.LG} src={avatarUrl} />

src/home/RegisteredView.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import { useState, useCallback, FormEvent, FormEventHandler } from "react";
 import { useHistory } from "react-router-dom";
 import { MatrixClient } from "matrix-js-sdk/src/client";
-import { randomString } from "matrix-js-sdk/src/randomstring";
 import { useTranslation } from "react-i18next";
 import { Heading } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
@@ -42,8 +41,6 @@ import { Form } from "../form/Form";
 import { useEnableE2EE, useOptInAnalytics } from "../settings/useSetting";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { E2EEBanner } from "../E2EEBanner";
-import { setLocalStorageItem } from "../useLocalStorage";
-import { getRoomSharedKeyLocalStorageKey } from "../e2ee/sharedKeyManagement";
 
 interface Props {
   client: MatrixClient;
@@ -77,18 +74,19 @@ export function RegisteredView({ client }: Props) {
         setError(undefined);
         setLoading(true);
 
-        const roomId = (
-          await createRoom(client, roomName, e2eeEnabled ?? false)
-        )[1];
+        const createRoomResult = await createRoom(
+          client,
+          roomName,
+          e2eeEnabled ?? false
+        );
 
-        if (e2eeEnabled) {
-          setLocalStorageItem(
-            getRoomSharedKeyLocalStorageKey(roomId),
-            randomString(32)
-          );
-        }
-
-        history.push(getRelativeRoomUrl(roomId, roomName));
+        history.push(
+          getRelativeRoomUrl(
+            createRoomResult.roomId,
+            roomName,
+            createRoomResult.password
+          )
+        );
       }
 
       submit().catch((error) => {

src/home/UnauthenticatedView.tsx

@@ -44,8 +44,6 @@ import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { useEnableE2EE, useOptInAnalytics } from "../settings/useSetting";
 import { Config } from "../config/Config";
 import { E2EEBanner } from "../E2EEBanner";
-import { getRoomSharedKeyLocalStorageKey } from "../e2ee/sharedKeyManagement";
-import { setLocalStorageItem } from "../useLocalStorage";
 
 export const UnauthenticatedView: FC = () => {
   const { setClient } = useClient();
@@ -87,18 +85,13 @@ export const UnauthenticatedView: FC = () => {
           true
         );
 
-        let roomId: string;
+        let createRoomResult;
         try {
-          roomId = (
-            await createRoom(client, roomName, e2eeEnabled ?? false)
-          )[1];
-
-          if (e2eeEnabled) {
-            setLocalStorageItem(
-              getRoomSharedKeyLocalStorageKey(roomId),
-              randomString(32)
-            );
-          }
+          createRoomResult = await createRoom(
+            client,
+            roomName,
+            e2eeEnabled ?? false
+          );
         } catch (error) {
           if (!setClient) {
             throw error;
@@ -127,7 +120,13 @@ export const UnauthenticatedView: FC = () => {
         }
 
         setClient({ client, session });
-        history.push(getRelativeRoomUrl(roomId, roomName));
+        history.push(
+          getRelativeRoomUrl(
+            createRoomResult.roomId,
+            roomName,
+            createRoomResult.password
+          )
+        );
       }
 
       submit().catch((error) => {

src/livekit/useLiveKit.ts

@@ -20,6 +20,7 @@ import {
   ExternalE2EEKeyProvider,
   Room,
   RoomOptions,
+  Track,
 } from "livekit-client";
 import { useLiveKitRoom } from "@livekit/components-react";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -158,12 +159,54 @@ export function useLiveKit(
     if (room !== undefined && connectionState === ConnectionState.Connected) {
       const syncDevice = (kind: MediaDeviceKind, device: MediaDevice) => {
         const id = device.selectedId;
-        if (id !== undefined && room.getActiveDevice(kind) !== id) {
-          room
-            .switchActiveDevice(kind, id)
-            .catch((e) =>
-              logger.error(`Failed to sync ${kind} device with LiveKit`, e)
-            );
+
+        // Detect if we're trying to use chrome's default device, in which case
+        // we need to to see if the default device has changed to a different device
+        // by comparing the group ID of the device we're using against the group ID
+        // of what the default device is *now*.
+        // This is special-cased for only audio inputs because we need to dig around
+        // in the LocalParticipant object for the track object and there's not a nice
+        // way to do that generically. There is usually no OS-level default video capture
+        // device anyway, and audio outputs work differently.
+        if (
+          id === "default" &&
+          kind === "audioinput" &&
+          room.options.audioCaptureDefaults?.deviceId === "default"
+        ) {
+          const activeMicTrack = Array.from(
+            room.localParticipant.audioTracks.values()
+          ).find((d) => d.source === Track.Source.Microphone)?.track;
+
+          const defaultDevice = device.available.find(
+            (d) => d.deviceId === "default"
+          );
+          if (
+            defaultDevice &&
+            activeMicTrack &&
+            // only restart if the stream is still running: LiveKit will detect
+            // when a track stops & restart appropriately, so this is not our job.
+            // Plus, we need to avoid restarting again if the track is already in
+            // the process of being restarted.
+            activeMicTrack.mediaStreamTrack.readyState !== "ended" &&
+            defaultDevice.groupId !==
+              activeMicTrack.mediaStreamTrack.getSettings().groupId
+          ) {
+            // It's different, so restart the track, ie. cause Livekit to do another
+            // getUserMedia() call with deviceId: default to get the *new* default device.
+            // Note that room.switchActiveDevice() won't work: Livekit will ignore it because
+            // the deviceId hasn't changed (was & still is default).
+            room.localParticipant
+              .getTrack(Track.Source.Microphone)
+              ?.audioTrack?.restartTrack();
+          }
+        } else {
+          if (id !== undefined && room.getActiveDevice(kind) !== id) {
+            room
+              .switchActiveDevice(kind, id)
+              .catch((e) =>
+                logger.error(`Failed to sync ${kind} device with LiveKit`, e)
+              );
+          }
         }
       };
 

src/matrix-utils.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022-2023 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -35,6 +35,8 @@ import IndexedDBWorker from "./IndexedDBWorker?worker";
 import { getUrlParams, PASSWORD_STRING } from "./UrlParams";
 import { loadOlm } from "./olm";
 import { Config } from "./config/Config";
+import { setLocalStorageItem } from "./useLocalStorage";
+import { getRoomSharedKeyLocalStorageKey } from "./e2ee/sharedKeyManagement";
 
 export const fallbackICEServerAllowed =
   import.meta.env.VITE_FALLBACK_STUN_ALLOWED === "true";
@@ -71,6 +73,14 @@ function waitForSync(client: MatrixClient) {
   });
 }
 
+function secureRandomString(entropyBytes: number): string {
+  const key = new Uint8Array(entropyBytes);
+  crypto.getRandomValues(key);
+  return btoa(
+    key.reduce((acc, current) => acc + String.fromCharCode(current), "")
+  ).replace(/=*$/, "");
+}
+
 /**
  * Initialises and returns a new standalone Matrix Client.
  * If true is passed for the 'restore' parameter, a check will be made
@@ -269,11 +279,17 @@ export function isLocalRoomId(roomId: string, client: MatrixClient): boolean {
   return parts[1] === client.getDomain();
 }
 
+interface CreateRoomResult {
+  roomId: string;
+  alias?: string;
+  password?: string;
+}
+
 export async function createRoom(
   client: MatrixClient,
   name: string,
   e2ee: boolean
-): Promise<[string, string]> {
+): Promise<CreateRoomResult> {
   logger.log(`Creating room for group call`);
   const createPromise = client.createRoom({
     visibility: Visibility.Private,
@@ -336,7 +352,20 @@ export async function createRoom(
     true
   );
 
-  return [fullAliasFromRoomName(name, client), result.room_id];
+  let password;
+  if (e2ee) {
+    password = secureRandomString(16);
+    setLocalStorageItem(
+      getRoomSharedKeyLocalStorageKey(result.room_id),
+      password
+    );
+  }
+
+  return {
+    roomId: result.room_id,
+    alias: e2ee ? undefined : fullAliasFromRoomName(name, client),
+    password,
+  };
 }
 
 /**

src/room/GroupCallView.tsx

@@ -39,10 +39,7 @@ import { useMediaDevices, MediaDevices } from "../livekit/MediaDevicesContext";
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
 import { enterRTCSession, leaveRTCSession } from "../rtcSessionHelpers";
 import { useMatrixRTCSessionJoinState } from "../useMatrixRTCSessionJoinState";
-import {
-  useManageRoomSharedKey,
-  useIsRoomE2EE,
-} from "../e2ee/sharedKeyManagement";
+import { useIsRoomE2EE, useRoomSharedKey } from "../e2ee/sharedKeyManagement";
 import { useEnableE2EE } from "../settings/useSetting";
 import { useRoomAvatar } from "./useRoomAvatar";
 import { useRoomName } from "./useRoomName";
@@ -75,7 +72,7 @@ export function GroupCallView({
   const memberships = useMatrixRTCSessionMemberships(rtcSession);
   const isJoined = useMatrixRTCSessionJoinState(rtcSession);
 
-  const e2eeSharedKey = useManageRoomSharedKey(rtcSession.room.roomId);
+  const e2eeSharedKey = useRoomSharedKey(rtcSession.room.roomId);
   const isRoomE2EE = useIsRoomE2EE(rtcSession.room.roomId);
 
   useEffect(() => {
@@ -217,13 +214,16 @@ export function GroupCallView({
         sendInstantly
       );
 
-      leaveRTCSession(rtcSession);
+      await leaveRTCSession(rtcSession);
       if (widget) {
         // we need to wait until the callEnded event is tracked on posthog.
         // Otherwise the iFrame gets killed before the callEnded event got tracked.
         await new Promise((resolve) => window.setTimeout(resolve, 10)); // 10ms
         widget.api.setAlwaysOnScreen(false);
         PosthogAnalytics.instance.logout();
+
+        // we will always send the hangup event after the memberships have been updated
+        // calling leaveRTCSession.
         widget.api.transport.send(ElementWidgetActions.HangupCall, {});
       }
 

src/rtcSessionHelpers.ts

@@ -47,7 +47,9 @@ export function enterRTCSession(rtcSession: MatrixRTCSession) {
   rtcSession.joinRoomSession([makeFocus(livekitAlias)]);
 }
 
-export function leaveRTCSession(rtcSession: MatrixRTCSession) {
+export async function leaveRTCSession(
+  rtcSession: MatrixRTCSession
+): Promise<void> {
   //groupCallOTelMembership?.onLeaveCall();
-  rtcSession.leaveRoomSession();
+  await rtcSession.leaveRoomSession();
 }

src/widget.ts

@@ -70,9 +70,7 @@ interface WidgetHelpers {
  */
 export const widget: WidgetHelpers | null = (() => {
   try {
-    const query = new URLSearchParams(window.location.search);
-    const widgetId = query.get("widgetId");
-    const parentUrl = query.get("parentUrl");
+    const { widgetId, parentUrl } = getUrlParams();
 
     if (widgetId && parentUrl) {
       const parentOrigin = new URL(parentUrl).origin;