@rapidmx/web-client 0.4.0 → 0.5.0

package/apps/shared/components/layout/AppShell.tsx

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import "../../styles/app.css";
-import React, { PropsWithChildren, useState, useEffect } from "react";
+import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
 import type { IconType } from "react-icons";
 import { HiOutlineCalendarDays, HiOutlineClipboardDocumentList, HiOutlineEnvelope, HiOutlineUsers } from "react-icons/hi2";
 import { useRedirectIfUnauthenticated } from "@rapidmx/react-shared/auth/session.js";
@@ -12,11 +12,38 @@ import { stopImpersonating } from "@rapidmx/react-shared/mail/mailApi.js";
 import useBranding from "@rapidmx/react-shared/branding/useBranding.js";
 import { useIdleKeyTimeout } from "@rapidmx/react-shared/crypto/useIdleKeyTimeout.js";
 import ComposeProvider from "../mail/compose/ComposeContext.js";
+import { flushComposeDrafts, markSigningOut } from "../mail/compose/composeFlushRegistry.js";
 import BottomTabBar from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
 import { BrandingFooter, BrandingHeader } from "./BrandingChrome.js";
 import UserMenu from "./UserMenu.js";
 import { UnlockPromptProvider } from "./UnlockPromptProvider.js";
-import { destroyAllLocalIndexes } from "../../search/localIndexRpcClient.js";
+import { SIGN_OUT_CHANNEL, destroyAllLocalIndexes } from "../../search/localIndexRpcClient.js";
+import { authApiFetch } from "@rapidmx/react-shared/util/api.js";
+import { destroyUnlockedKeys } from "@rapidmx/react-shared/crypto/keySession.js";
+import { clearPinnedSignerCache } from "../mail/pinnedSigners.js";
+
+/** How long sign-out waits for auth-server's logout before navigating anyway. */
+export const LOGOUT_TIMEOUT_MS = 3_000;
+
+/**
+ * Calls auth-server's logout (`POST /api/auth/logout`, cross-origin with credentials), which clears the auth
+ * cookie and invalidates the session's refresh token. Bounded by `LOGOUT_TIMEOUT_MS` and never rejects - a
+ * failure (unreachable server, CORS) must not keep the user from leaving.
+ */
+async function logOutOfAuthServer(authServerUrl: string | undefined): Promise<void> {
+    if (!authServerUrl) {
+        return;
+    }
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), LOGOUT_TIMEOUT_MS);
+    try {
+        await authApiFetch(authServerUrl, "/auth/logout", { method: "POST", signal: controller.signal });
+    } catch {
+        // Navigate anyway - see this function's doc comment.
+    } finally {
+        clearTimeout(timer);
+    }
+}
 
 export type AppShellApp = "mail" | "calendar" | "contacts" | "tasks";
 
@@ -85,6 +112,7 @@ export default function AppShell({
     children,
 }: PropsWithChildren<AppShellProps>) {
     const [stoppingImpersonation, setStoppingImpersonation] = useState(false);
+    const signingOutRef = useRef(false);
     const { branding, iconSrc } = useBranding();
 
     useRedirectIfUnauthenticated(userUid, authServerUrl);
@@ -92,10 +120,11 @@ export default function AppShell({
     // specifically so activity in *any* app resets the idle clock - see that hook's own doc comment.
     useIdleKeyTimeout();
 
-    // An administrator on a server that hasn't finished first-run setup is sent to the setup wizard. Everyone else
-    // gets a 403 from the setup status check (it's admin-only), which is ignored along with any other failure.
+    // An administrator on a server that hasn't finished first-run setup is sent to the setup wizard. The status
+    // check is admin-only, so it's only made for a trusted caller - everyone else would just get a 403 on every
+    // page load. Any failure is ignored.
     useEffect(() => {
-        if (!userUid || impersonating) {
+        if (!userUid || impersonating || !trusted) {
             return;
         }
         getSetupStatus()
@@ -105,15 +134,56 @@ export default function AppShell({
                 }
             })
             .catch(() => undefined);
-    }, [userUid, impersonating]);
-
-    function handleSignOut() {
-        // Best-effort, fire-and-forget: the Tier 2 local index MUST be destroyed on explicit logout, the
-        // same as unlocked keys themselves (spec §11) - this component has no specific mailboxUid of its
-        // own to pass (it's shared by every app, not just Mail), so this destroys every mailbox's index
-        // the session has open rather than needing one threaded through. Not awaited - the navigation
-        // below shouldn't wait on it, and destroyAllLocalIndexes() never throws either way.
-        void destroyAllLocalIndexes();
+    }, [userUid, impersonating, trusted]);
+
+    // Another tab signing out (this app's `handleSignOut`, or the admin/escrow consoles' `signOutOfConsole()`)
+    // ended this session too - its auth cookie is gone - so this tab destroys its own unlocked keys and every
+    // local search index on the device, then leaves as well. The consoles have no local-index client of their
+    // own, so this is what actually removes the indexes after a console sign-out (the console also records a
+    // pending deletion, retried on the next mail load, in case no mail tab is open). `destroyAllLocalIndexes()`
+    // announces the sign-out on this same channel, which this tab then hears itself, so the ref is set first:
+    // each tab reacts once, and the tab that started the sign-out ignores its own announcement.
+    useEffect(() => {
+        if (!userUid || typeof BroadcastChannel === "undefined") {
+            return;
+        }
+        const channel = new BroadcastChannel(SIGN_OUT_CHANNEL);
+        channel.addEventListener("message", (event: MessageEvent<{ type?: string }>) => {
+            if (event.data?.type !== "sign-out" || signingOutRef.current) {
+                return;
+            }
+            signingOutRef.current = true;
+            // Compose windows must not ask "Leave site?" - that would let this forced navigation be cancelled.
+            markSigningOut();
+            destroyUnlockedKeys();
+            clearPinnedSignerCache();
+            // Bounded by its own timeout and never rejects - awaited so navigating doesn't kill the Worker mid-delete.
+            void destroyAllLocalIndexes().then(() => {
+                window.location.href = authServerUrl ?? "/";
+            });
+        });
+        return () => channel.close();
+    }, [userUid, authServerUrl]);
+
+    async function handleSignOut() {
+        signingOutRef.current = true;
+        // Before flushing and navigating: compose windows then skip their "Leave site?" prompt, which could
+        // otherwise cancel the sign-out's own navigation.
+        markSigningOut();
+        // Unlocked private keys never outlive an explicit sign-out.
+        destroyUnlockedKeys();
+        // Trusted signer pins read from contacts don't outlive the session either.
+        clearPinnedSignerCache();
+        // Open compose windows save edits still waiting on their autosave debounce while the session is still
+        // valid - logout invalidates it. Bounded the same way as logout itself, and never rejects.
+        await flushComposeDrafts(LOGOUT_TIMEOUT_MS);
+        // The Tier 2 local index MUST be destroyed on explicit logout, the same as unlocked keys themselves
+        // (spec §11). Destroys every index on this device (not only mailboxes opened this page load) and is
+        // awaited before navigating - a navigation tears down the Worker mid-delete otherwise.
+        // destroyAllLocalIndexes() is bounded by its own timeout and never rejects, so sign-out can't hang.
+        // In parallel, auth-server's logout clears the auth cookie and invalidates the session's refresh
+        // token - without it, "Sign Out" would only navigate away from a still-valid session.
+        await Promise.all([destroyAllLocalIndexes(), logOutOfAuthServer(authServerUrl)]);
         window.location.href = authServerUrl ?? "/";
     }
 
@@ -139,7 +209,9 @@ export default function AppShell({
         // ComposeWindow's sign/encrypt toggles and MessageDetailPane's encrypted-message view (both Mail)
         // are today's only useUnlockPrompt() callers, but this needs to be available to any app shell.
         <UnlockPromptProvider>
-            <ComposeProvider userUid={userUid}>
+            {/* An impersonating admin acts with the impersonated user's access, so their own trusted role
+                mustn't skip the per-mailbox checks. */}
+            <ComposeProvider userUid={userUid} trusted={!!trusted && !impersonating}>
             <div className="min-h-screen flex flex-col bg-surface-alt">
                 <BrandingHeader branding={branding} />
                 {impersonating && (

package/apps/shared/components/layout/BrandingChrome.tsx

@@ -3,23 +3,61 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React from "react";
+import DOMPurify from "dompurify";
 import { Branding } from "@rapidmx/react-shared/branding/brandingApi.js";
 
+/** Elements that could run script, restyle the whole page, collect input, or embed another page - stripped on
+ * top of DOMPurify's defaults (which already drop `<script>`, `on*` handlers, and `javascript:` URLs). */
+const FORBIDDEN_TAGS = [
+    "script",
+    "style",
+    "form",
+    "input",
+    "button",
+    "textarea",
+    "select",
+    "option",
+    "iframe",
+    "frame",
+    "frameset",
+    "object",
+    "embed",
+    "link",
+    "meta",
+    "base",
+    "svg",
+    "math",
+];
+const FORBIDDEN_ATTRS = ["action", "formaction", "srcdoc"];
+
 /**
- * Renders the admin-configured `Branding.headerHtml`/`footerHtml` (see `useBranding()`) — shared by every
- * chrome in this project (`AppShell`, `AdminShell`, and the public `apps/book` pages) so the setting applies
- * everywhere its own admin UI copy (`apps/admin/branding/index.tsx`) claims it does.
+ * Sanitizes admin-configured branding HTML before it's rendered. The server sanitizes on save too; this also
+ * covers anything stored before that. Returns `""` where there's no DOM to sanitize with (server-side
+ * rendering), so unsanitized HTML is never emitted.
  */
-export function BrandingHeader({ branding }: { branding: Branding | null }) {
-    if (!branding?.headerHtml) {
-        return null;
+export function sanitizeBrandingHtml(html: string): string {
+    if (!DOMPurify.isSupported) {
+        return "";
     }
-    return <div dangerouslySetInnerHTML={{ __html: branding.headerHtml }} />;
+    return DOMPurify.sanitize(html, { FORBID_TAGS: FORBIDDEN_TAGS, FORBID_ATTR: FORBIDDEN_ATTRS });
 }
 
-export function BrandingFooter({ branding }: { branding: Branding | null }) {
-    if (!branding?.footerHtml) {
+function BrandingHtml({ html }: { html: string | undefined }) {
+    const clean = html ? sanitizeBrandingHtml(html) : "";
+    if (!clean) {
         return null;
     }
-    return <div dangerouslySetInnerHTML={{ __html: branding.footerHtml }} />;
+    return <div dangerouslySetInnerHTML={{ __html: clean }} />;
+}
+
+/**
+ * Renders the admin-configured `Branding.headerHtml`/`footerHtml` (see `useBranding()`), sanitized - shared by
+ * the webmail and admin chromes. The escrow console deliberately renders no branding HTML at all.
+ */
+export function BrandingHeader({ branding }: { branding: Branding | null }) {
+    return <BrandingHtml html={branding?.headerHtml} />;
+}
+
+export function BrandingFooter({ branding }: { branding: Branding | null }) {
+    return <BrandingHtml html={branding?.footerHtml} />;
 }