chore(call): pin element-call-embedded 0.25.0-lotus.21 (#43)

lotus.21 checks widget messages against the host's origin (works same- and
cross-origin) and accepts soundboard clip bytes. Same-origin behaviour is
unchanged; verified against the published package: join, both screenshare
paths, PTT/deafen in the frame, layout/reactions/settings, speaking and mic
level, soundboard, avatars, muted-speech warning, per-person volume, and the
foreign-frame spoof stays blocked.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA

package-lock.json

@@ -81,7 +81,7 @@
       },
       "devDependencies": {
         "@axe-core/playwright": "4.13.0",
-        "@lotusguild/element-call-embedded": "0.25.0-lotus.20",
+        "@lotusguild/element-call-embedded": "0.25.0-lotus.21",
         "@playwright/test": "1.63.0",
         "@rollup/plugin-inject": "5.0.5",
         "@rollup/plugin-wasm": "6.2.2",
@@ -2695,9 +2695,9 @@
       "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
     },
     "node_modules/@lotusguild/element-call-embedded": {
-      "version": "0.25.0-lotus.20",
-      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.20/element-call-embedded-0.25.0-lotus.20.tgz",
-      "integrity": "sha512-USac8cunc+nlkyivxV0dXshzJoSWTyNHc6Aq/xIpphKbkON05NzhEWBX+qNwgwdyVWacdmYAEX97z6jHA5J+Kw==",
+      "version": "0.25.0-lotus.21",
+      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.21/element-call-embedded-0.25.0-lotus.21.tgz",
+      "integrity": "sha512-Phtjop2qdKRrCLqAhzipRaJaVnU3MjK9CV4QwHkwU/Xlj8oguZBfjOlV7zTqOTzAr57OteOfLcyxLsmv5+u9tg==",
       "dev": true
     },
     "node_modules/@matrix-org/matrix-sdk-crypto-wasm": {

package.json

@@ -108,7 +108,7 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "4.13.0",
-    "@lotusguild/element-call-embedded": "0.25.0-lotus.20",
+    "@lotusguild/element-call-embedded": "0.25.0-lotus.21",
     "@playwright/test": "1.63.0",
     "@rollup/plugin-inject": "5.0.5",
     "@rollup/plugin-wasm": "6.2.2",

src/app/features/call/CallSoundboard.tsx

@@ -115,7 +115,12 @@ export function CallSoundboard({ callEmbed }: CallSoundboardProps) {
       try {
         const url = await resolveClipObjectUrl(mx, flat.clip.url);
         const vol = (flat.clip.volume / 100) * master;
-        const result = await callEmbed.control.injectAudio(url, vol);
+        // [Gitea #43] Send the bytes too: the call page may be on another
+        // origin, where this blob: URL can't be fetched.
+        const clipBytes = await fetch(url)
+          .then((r) => r.arrayBuffer())
+          .catch(() => undefined);
+        const result = await callEmbed.control.injectAudio(url, vol, clipBytes);
         if (!result.played) {
           // [EC#13] Refused fork-side (only reason today: local mic muted) —
           // don't play it locally either, or the user would think it went out.

src/app/features/room/widgets/RoomWidgetView.tsx

@@ -12,6 +12,7 @@ import { Capability, ClientWidgetApi, IRoomEvent, Widget } from 'matrix-widget-a
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { GeneralWidgetDriver } from './GeneralWidgetDriver';
 import { WidgetPermissionRequest, isWidgetUrlSafe } from './widgetUtils';
+import { restrictWidgetMessages } from '../../../plugins/widgetTransport';
 import { WidgetPermissionPrompt } from './WidgetPermissionPrompt';
 
 type PendingAsk = {
@@ -96,6 +97,9 @@ export function RoomWidgetView({ room, widget }: RoomWidgetViewProps) {
         }),
     );
     const clientApi = new ClientWidgetApi(current, iframe, driver);
+    // Only messages from this widget's own frame and origin are handled, so a
+    // widget can't impersonate another one (or the call).
+    restrictWidgetMessages(clientApi, iframe, current.origin);
     clientApi.setViewedRoomId(room.roomId);
 
     // Live room events for widgets that were allowed to see them

src/app/hooks/useClientConfig.ts

@@ -19,6 +19,12 @@ export type ClientConfig = {
 
   hashRouter?: HashRouterConfig;
   gifApiKey?: string;
+
+  /**
+   * [Gitea #43] Absolute https URL of the Element Call page on its own origin.
+   * Unset: the bundled copy on this origin. Ignored in the desktop app.
+   */
+  elementCallUrl?: string;
 };
 
 const ClientConfigContext = createContext<ClientConfig | null>(null);

src/app/pages/App.tsx

@@ -36,6 +36,7 @@ import { applyCustomAccent, removeCustomAccent } from '../utils/accentColor';
 import { zIndices } from '../styles/zIndex';
 import { OIDC_CALLBACK_PATH } from './paths';
 import { OidcCallback } from './auth/oidc/OidcCallback';
+import { resolveCallPageUrl, setCallPageUrl } from '../plugins/call/callPageUrl';
 
 // The emoji families (Twemoji when "Twitter emoji" is on, Twemoji flags on
 // Windows — see SystemEmojiFeature) must sit before the generic family, or the
@@ -220,23 +221,27 @@ function App() {
                     <ConfigConfigError error={err} retry={retry} ignore={ignore} />
                   )}
                 >
-                  {(clientConfig) => (
-                    <ClientConfigProvider value={clientConfig}>
-                      <QueryClientProvider client={queryClient}>
-                        <JotaiProvider>
-                          <AppearanceEffects />
-                          <TauriEffects />
-                          <DesktopChrome>
-                            <RouterProvider router={createRouter(clientConfig, screenSize)} />
-                          </DesktopChrome>
-                          <SeasonalEffect />
-                          <NightLightOverlay />
-                          <LotusToastContainer />
-                        </JotaiProvider>
-                        <ReactQueryDevtools initialIsOpen={false} />
-                      </QueryClientProvider>
-                    </ClientConfigProvider>
-                  )}
+                  {(clientConfig) => {
+                    // [Gitea #43] Idempotent: where the call page is loaded from.
+                    setCallPageUrl(resolveCallPageUrl(clientConfig.elementCallUrl, isTauri()));
+                    return (
+                      <ClientConfigProvider value={clientConfig}>
+                        <QueryClientProvider client={queryClient}>
+                          <JotaiProvider>
+                            <AppearanceEffects />
+                            <TauriEffects />
+                            <DesktopChrome>
+                              <RouterProvider router={createRouter(clientConfig, screenSize)} />
+                            </DesktopChrome>
+                            <SeasonalEffect />
+                            <NightLightOverlay />
+                            <LotusToastContainer />
+                          </JotaiProvider>
+                          <ReactQueryDevtools initialIsOpen={false} />
+                        </QueryClientProvider>
+                      </ClientConfigProvider>
+                    );
+                  }}
                 </ClientConfigLoader>
               </FeatureCheck>
             </ScreenSizeProvider>

src/app/plugins/call/CallControl.ts

@@ -564,19 +564,27 @@ export class CallControl extends EventEmitter implements CallControlState {
    * track (`io.lotus.inject_audio`) rather than splicing the mic. `url` must be
    * an https/blob URL the widget can fetch WITHOUT credentials — the host
    * resolves an mxc clip to a `blob:` object URL first (authenticated media
-   * can't be fetched cross-realm by the widget). `volume` is 0–1.
+   * can't be fetched cross-realm by the widget) — and `audio` the same clip's
+   * bytes, which the fork prefers. `volume` is 0–1.
    *
    * The local user does not hear their own published track, so callers should
    * also play the clip locally for feedback.
    */
-  public injectAudio(url: string, volume = 1): Promise<{ played: boolean; reason?: string }> {
+  public injectAudio(
+    url: string,
+    volume = 1,
+    audio?: ArrayBuffer,
+  ): Promise<{ played: boolean; reason?: string }> {
     // [EC#13] The fork now refuses while the local mic is muted and replies
     // { played:false, reason:"muted" }; older forks reply {} (treated as played).
+    // [Gitea #43] `audio` carries the clip's bytes: a `blob:` URL only works on
+    // this origin, so a call page on its own origin can't fetch it. Forks that
+    // predate `audio` ignore it and use `url`.
     return this.call.transport
-      .send<{ url: string; volume: number }, { played?: boolean; reason?: string }>(
-        'io.lotus.inject_audio',
-        { url, volume },
-      )
+      .send<
+        { url: string; volume: number; audio?: ArrayBuffer },
+        { played?: boolean; reason?: string }
+      >('io.lotus.inject_audio', audio ? { url, volume, audio } : { url, volume })
       .then((r) => ({ played: r?.played !== false, reason: r?.reason }))
       .catch(() => ({ played: true }));
   }

src/app/plugins/call/CallEmbed.ts

@@ -29,6 +29,8 @@ import { CallControl } from './CallControl';
 import { CallControlState } from './CallControlState';
 import { verifyDenoiseAssets } from './denoiseSmokeCheck';
 import { canDelegateCapability } from './utils';
+import { getCallPageUrl } from './callPageUrl';
+import { restrictWidgetMessages } from '../widgetTransport';
 
 // Maximum time to wait for the embedded Element Call iframe to progress from
 // initial load to a ready/joined state. If it hasn't by then, we assume the
@@ -253,10 +255,14 @@ export class CallEmbed {
       params.append('sendNotificationType', CallEmbed.dmCall(intent) ? 'ring' : 'notification');
     }
 
-    const widgetUrl = new URL(
-      `${trimTrailingSlash(import.meta.env.BASE_URL)}/public/element-call/index.html`,
-      window.location.origin,
-    );
+    // [Gitea #43] On its own origin when config.json sets elementCallUrl.
+    const externalPage = getCallPageUrl();
+    const widgetUrl = externalPage
+      ? new URL(externalPage)
+      : new URL(
+          `${trimTrailingSlash(import.meta.env.BASE_URL)}/public/element-call/index.html`,
+          window.location.origin,
+        );
     widgetUrl.search = params.toString();
 
     const options: IWidget = {
@@ -305,6 +311,8 @@ export class CallEmbed {
 
     const callWidgetDriver: WidgetDriver = new CallWidgetDriver(mx, room.roomId);
     const call: ClientWidgetApi = new ClientWidgetApi(widget, iframe, callWidgetDriver);
+    // Only messages from the call's own frame and origin reach the widget API.
+    restrictWidgetMessages(call, iframe, widget.origin);
 
     this.mx = mx;
     this.call = call;

src/app/plugins/call/callPageUrl.test.ts

@@ -0,0 +1,40 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { resolveCallPageUrl } from './callPageUrl';
+
+const URL_OK = 'https://call.chat.example.org/public/element-call/index.html';
+
+test('uses an absolute https URL on the web', () => {
+  assert.equal(resolveCallPageUrl(URL_OK, false), URL_OK);
+});
+
+test('strips a query or hash (the app adds its own parameters)', () => {
+  assert.equal(resolveCallPageUrl(`${URL_OK}?x=1#y`, false), URL_OK);
+});
+
+test('allows http only on localhost (development)', () => {
+  assert.equal(
+    resolveCallPageUrl('http://127.0.0.1:5174/public/element-call/index.html', false),
+    'http://127.0.0.1:5174/public/element-call/index.html',
+  );
+  assert.equal(resolveCallPageUrl('http://call.example.org/index.html', false), undefined);
+});
+
+test('desktop keeps the bundled page', () => {
+  assert.equal(resolveCallPageUrl(URL_OK, true), undefined);
+});
+
+test('anything else falls back to the bundled page', () => {
+  [
+    undefined,
+    null,
+    42,
+    '',
+    '  ',
+    'not a url',
+    '/public/element-call/index.html',
+    'http://call.chat.example.org/index.html',
+    ['javascript', 'alert(1)'].join(':'),
+    'data:text/html,x',
+  ].forEach((v) => assert.equal(resolveCallPageUrl(v, false), undefined, String(v)));
+});

src/app/plugins/call/callPageUrl.ts

@@ -0,0 +1,37 @@
+/**
+ * [Gitea #43] Where the Element Call page is loaded from.
+ *
+ * By default it's the copy bundled with this app (same origin). With
+ * `elementCallUrl` in config.json (e.g.
+ * "https://call.chat.lotusguild.org/public/element-call/index.html") the web
+ * app loads it from that origin instead, so the call frame can no longer
+ * reach this origin's storage (login token, crypto store) or service worker.
+ *
+ * Web only: the desktop app keeps its bundled copy (its CSP doesn't allow
+ * another frame origin, and a network copy could drift from the bundle).
+ * Anything that isn't an absolute https URL (http only on localhost, for
+ * development) is ignored, so a bad value falls
+ * back to the bundled page instead of breaking calls.
+ */
+export const resolveCallPageUrl = (value: unknown, desktop: boolean): string | undefined => {
+  if (desktop || typeof value !== 'string' || value.trim() === '') return undefined;
+  try {
+    const url = new URL(value);
+    // http only for local development (localhost is a secure context).
+    const local = url.hostname === 'localhost' || url.hostname === '127.0.0.1';
+    if (url.protocol !== 'https:' && !(url.protocol === 'http:' && local)) return undefined;
+    url.search = '';
+    url.hash = '';
+    return url.href;
+  } catch {
+    return undefined;
+  }
+};
+
+let callPageUrl: string | undefined;
+
+export const setCallPageUrl = (url: string | undefined): void => {
+  callPageUrl = url;
+};
+
+export const getCallPageUrl = (): string | undefined => callPageUrl;

src/app/plugins/widgetTransport.test.ts

@@ -0,0 +1,46 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { ClientWidgetApi } from 'matrix-widget-api';
+import { isFromWidgetFrame, restrictWidgetMessages } from './widgetTransport';
+
+const frame = {} as Window;
+const other = {} as Window;
+const ORIGIN = 'https://call.example.org';
+
+test('isFromWidgetFrame: only the widget frame at its origin', () => {
+  assert.equal(isFromWidgetFrame({ source: frame, origin: ORIGIN }, frame, ORIGIN), true);
+  assert.equal(isFromWidgetFrame({ source: other, origin: ORIGIN }, frame, ORIGIN), false);
+  assert.equal(isFromWidgetFrame({ source: frame, origin: 'null' }, frame, ORIGIN), false);
+  assert.equal(
+    isFromWidgetFrame({ source: frame, origin: 'https://evil.example' }, frame, ORIGIN),
+    false,
+  );
+  assert.equal(isFromWidgetFrame({ source: null, origin: ORIGIN }, null, ORIGIN), false);
+});
+
+test('restrictWidgetMessages swaps the listener and drops foreign messages', () => {
+  const seen: unknown[] = [];
+  const original = (ev: MessageEvent) => {
+    seen.push(ev.data);
+  };
+  const transport = { handleMessage: original };
+  const api = { transport } as unknown as ClientWidgetApi;
+  const iframe = { contentWindow: frame } as HTMLIFrameElement;
+  const listeners = new Set<EventListener>([original as EventListener]);
+  const inbound = {
+    addEventListener: (_t: string, l: EventListener) => listeners.add(l),
+    removeEventListener: (_t: string, l: EventListener) => listeners.delete(l),
+  } as unknown as Window;
+
+  restrictWidgetMessages(api, iframe, ORIGIN, inbound);
+  assert.equal(listeners.has(original as EventListener), false);
+  assert.equal(listeners.size, 1);
+  assert.equal(transport.handleMessage === original, false);
+
+  const dispatch = (ev: Partial<MessageEvent>) =>
+    listeners.forEach((l) => l(ev as unknown as Event));
+  dispatch({ source: other, origin: ORIGIN, data: 'spoof' });
+  dispatch({ source: frame, origin: 'null', data: 'wrong-origin' });
+  dispatch({ source: frame, origin: ORIGIN, data: 'real' });
+  assert.deepEqual(seen, ['real']);
+});

src/app/plugins/widgetTransport.ts

@@ -0,0 +1,47 @@
+import { ClientWidgetApi } from 'matrix-widget-api';
+
+type MessageLike = Pick<MessageEvent, 'source' | 'origin'>;
+
+/**
+ * True when a message came from the widget's own frame, at the origin the
+ * widget was loaded from.
+ */
+export const isFromWidgetFrame = (
+  ev: MessageLike,
+  frameWindow: Window | null | undefined,
+  widgetOrigin: string,
+): boolean => !!frameWindow && ev.source === frameWindow && ev.origin === widgetOrigin;
+
+type InboundTransport = {
+  handleMessage: (ev: MessageEvent) => void;
+};
+
+/**
+ * matrix-widget-api's host transport accepts a message from ANY window on the
+ * page as long as it carries the widget's id (its `strictOriginCheck` only
+ * compares against the host's own origin, and is off by default). The call
+ * widget's id is fixed ('call-embed'), so any other frame (a room widget, a
+ * URL-preview embed) could post fromWidget actions as the call: e.g. a fake
+ * push-to-talk keydown turned the user's mic on.
+ *
+ * Swap the transport's listener for one that only lets through messages from
+ * this widget's iframe and origin. `stop()` removes `handleMessage`, which is
+ * the guarded one after this. Call right after `new ClientWidgetApi(...)`,
+ * which has already started the transport.
+ */
+export const restrictWidgetMessages = (
+  api: ClientWidgetApi,
+  iframe: HTMLIFrameElement,
+  widgetOrigin: string,
+  inbound: Pick<Window, 'addEventListener' | 'removeEventListener'> = window,
+): void => {
+  const transport = api.transport as unknown as InboundTransport;
+  const original = transport.handleMessage;
+  const guarded = (ev: MessageEvent) => {
+    if (!isFromWidgetFrame(ev, iframe.contentWindow, widgetOrigin)) return;
+    original(ev);
+  };
+  inbound.removeEventListener('message', original as EventListener);
+  transport.handleMessage = guarded;
+  inbound.addEventListener('message', guarded as EventListener);
+};