Constrain workspace photo DOM updates

gitcommit90 · gitcommit90 · commit 95459d0e4eb0 · 2026-07-27T04:24:55.000Z
Use the fixed authenticated workspace-photo route after uploads instead of reinterpreting an API-returned URL, and retain a focused source contract.

Signed-off-by: Joseph Yaksich &lt;gitcommit90@users.noreply.github.com&gt;
diff --git a/public/index.html b/public/index.html
@@ -34,6 +34,6 @@
 </head>
 <body class="h-screen w-screen overflow-hidden antialiased">
   <div id="app" class="h-full w-full"></div>
-  <script type="module" src="/bundle.js?v=745230018af2"></script>
+  <script type="module" src="/bundle.js?v=525ac42f9d00"></script>
 </body>
 </html>
diff --git a/src/client/settings.ts b/src/client/settings.ts
@@ -178,6 +178,15 @@ function adminPanel(): HTMLElement {
   const file = h("input", { type: "file", accept: "image/png,image/jpeg,image/webp,image/gif", class: "hidden" }) as HTMLInputElement;
   const presetColors = ["#c8552f", "#4f6d7a", "#8a6b7c", "#a67c52", "#7a6a4f", "#2e7d4f", "#2166b8", "#64748b"];
   const presetRow = h("div", { class: "mt-2 flex flex-wrap gap-2" });
+  const applyWorkspacePhoto = (workspace: typeof S.workspace): void => {
+    // The endpoint is fixed and same-origin; never turn an API-returned string
+    // into an arbitrary DOM URL. This also keeps session tokens out of any
+    // server-selected destination.
+    S.workspace = workspace;
+    const source = workspacePhotoSrc("/api/workspace/photo", Date.now());
+    photo.src = source;
+    document.querySelectorAll<HTMLImageElement>(".logo-asset").forEach((image) => { image.src = source; });
+  };
   const applyPreset = async (hex: string): Promise<void> => {
     status.textContent = "Applying workspace color…";
     const canvas = document.createElement("canvas");
@@ -190,7 +199,7 @@ function adminPanel(): HTMLElement {
     const response = await fetch(apiUrl("/api/workspace/photo"), { method: "POST", headers: { authorization: `Bearer ${getToken()}`, "content-type": "image/png" }, body: blob });
     const result = await response.json().catch(() => ({}));
     if (!response.ok) { status.textContent = result.error || `HTTP ${response.status}`; return; }
-    S.workspace = result.workspace; photo.src = workspacePhotoSrc(S.workspace.photo_url, Date.now()); document.querySelectorAll<HTMLImageElement>(".logo-asset").forEach((image) => { image.src = workspacePhotoSrc(S.workspace.photo_url, Date.now()); }); status.textContent = "Workspace photo updated.";
+    applyWorkspacePhoto(result.workspace); status.textContent = "Workspace photo updated.";
   };
   for (const hex of presetColors) presetRow.append(h("button", { class: "h-8 w-8 rounded-lg border border-line shadow-sm transition hover:scale-105", style: `background:${hex}`, title: hex, onclick: () => { void applyPreset(hex); } }));
   file.onchange = async () => {
@@ -199,7 +208,7 @@ function adminPanel(): HTMLElement {
     const response = await fetch(apiUrl("/api/workspace/photo"), { method: "POST", headers: { authorization: `Bearer ${getToken()}`, "content-type": image.type }, body: image });
     const result = await response.json().catch(() => ({}));
     if (!response.ok) { status.textContent = result.error || `HTTP ${response.status}`; return; }
-    S.workspace = result.workspace; photo.src = workspacePhotoSrc(S.workspace.photo_url, Date.now()); document.querySelectorAll<HTMLImageElement>(".logo-asset").forEach((image) => { image.src = workspacePhotoSrc(S.workspace.photo_url, Date.now()); }); status.textContent = "Workspace photo updated.";
+    applyWorkspacePhoto(result.workspace); status.textContent = "Workspace photo updated.";
   };
   const save = async (): Promise<void> => {
     try { S.workspace = (await api<{ workspace: typeof S.workspace }>("/api/workspace", { method: "PATCH", body: { name: name.value.trim().slice(0, 100), theme: theme.value } })).workspace; applyWorkspaceTheme(); document.querySelectorAll<HTMLElement>("[data-workspace-name]").forEach((node) => { node.textContent = S.workspace.name; }); status.textContent = "Workspace settings saved."; }
diff --git a/test/workspace-interactions.mjs b/test/workspace-interactions.mjs
@@ -40,6 +40,8 @@ test("profile, naming, routing, and usage language match the visible product con
   assert.match(app, /toBlob\(resolve, "image\/jpeg", 0\.86\)/, "the square avatar is compressed before upload");
   assert.match(app, /Photo ready\. Adjust the crop, then choose Save profile\./, "file choice does not instantly upload the raw photo");
   assert.match(settings, /maxlength: 100/, "workspace naming allows and caps a generous 100 characters");
+  assert.match(settings, /workspacePhotoSrc\("\/api\/workspace\/photo", Date\.now\(\)\)/, "workspace photo updates use the fixed same-origin asset route instead of an API-returned DOM URL");
+  assert.equal([...settings.matchAll(/workspacePhotoSrc\(S\.workspace\.photo_url, Date\.now\(\)\)/g)].length, 1, "only the already-loaded workspace value may initialize the preview; update responses never become image destinations");
   assert.match(app, /dataset: \{ workspaceName: "" \}/, "the complete workspace name has a stable wrapping hook");
   assert.match(settings, /Connection availability/, "connections use direct availability wording");
   assert.doesNotMatch(settings, /More connections/, "the ambiguous connections heading is gone");
