From c1c28a8b29c1050fbc27c825fc28343cd2c4a382 Mon Sep 17 00:00:00 2001
From: Shannon Kerr <shannon@exaviz.com>
Date: Tue, 18 Aug 2026 15:34:04 -0400
Subject: [PATCH] fix: preview PDFs via blob URL instead of a remote iframe
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Iframing getFileUrl fails when the file server is cross-origin
(desktop loadFile, cloud dl.huly.app vs huly.app): cookies are not
sent, and X-Frame-Options: SAMEORIGIN blanks the frame.

Download the file with Authorization: Bearer (datalake already
accepts this; default cors() allows the preflight) and iframe a
blob: URL — the same workaround already used for HTML preview.
Same-origin self-host still works via cookies on the fetch.

Tokens stay out of the URL. pdf.js is not required.

Fixes #1
---
 .../src/components/PDFViewer.svelte           |   5 +-
 .../ui/src/__test__/file-embed-utils.test.ts  | 100 ++++++++++++++++++
 .../ui/src/components/EmbeddedHTML.svelte     |  31 +-----
 packages/ui/src/components/EmbeddedPDF.svelte |  57 +++++++++-
 packages/ui/src/file-embed-utils.ts           |  60 +++++++++++
 .../src/components/DOCXViewer.svelte          |   2 +-
 .../src/components/viewer/PDFViewer.svelte    |   7 +-
 7 files changed, 229 insertions(+), 33 deletions(-)
 create mode 100644 packages/ui/src/__test__/file-embed-utils.test.ts
 create mode 100644 packages/ui/src/file-embed-utils.ts

diff --git a/packages/presentation/src/components/PDFViewer.svelte b/packages/presentation/src/components/PDFViewer.svelte
index 550d219f44..e2decea5bf 100644
--- a/packages/presentation/src/components/PDFViewer.svelte
+++ b/packages/presentation/src/components/PDFViewer.svelte
@@ -15,6 +15,7 @@
 <script lang="ts">
   // import { Doc } from '@hcengineering/core'
   import type { Blob, Ref } from '@hcengineering/core'
+  import { getMetadata } from '@hcengineering/platform'
   import { Button, Dialog, EmbeddedPDF, Label, Spinner } from '@hcengineering/ui'
   import { createEventDispatcher, onMount } from 'svelte'
   import presentation, { getFileUrl } from '..'
@@ -45,6 +46,8 @@
   })
   let download: HTMLAnchorElement
 
+  const token = getMetadata(presentation.metadata.Token)
+
   $: src = file !== undefined ? getFileUrl(file, name) : undefined
 
   $: isImage = contentType !== undefined && contentType.startsWith('image/')
@@ -97,7 +100,7 @@
         <img class="img-fit" {src} alt="" />
       </div>
     {:else}
-      <EmbeddedPDF {src} {name} {css} fit />
+      <EmbeddedPDF {src} {name} {css} {token} fit />
     {/if}
   {:else}
     <div class="centered">
diff --git a/packages/ui/src/__test__/file-embed-utils.test.ts b/packages/ui/src/__test__/file-embed-utils.test.ts
new file mode 100644
index 0000000000..b4af08791a
--- /dev/null
+++ b/packages/ui/src/__test__/file-embed-utils.test.ts
@@ -0,0 +1,100 @@
+//
+// Copyright © 2026 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import { authorizationHeaders, fetchAsObjectUrl, isLocalObjectUrl } from '../file-embed-utils'
+
+describe('isLocalObjectUrl', () => {
+  it('accepts blob and data URLs', () => {
+    expect(isLocalObjectUrl('blob:https://huly.app/abc')).toBe(true)
+    expect(isLocalObjectUrl('data:application/pdf;base64,AAA')).toBe(true)
+  })
+
+  it('rejects remote and relative URLs', () => {
+    expect(isLocalObjectUrl('https://dl.huly.app/blob/ws/file')).toBe(false)
+    expect(isLocalObjectUrl('/files/ws/file')).toBe(false)
+    expect(isLocalObjectUrl('')).toBe(false)
+  })
+})
+
+describe('authorizationHeaders', () => {
+  it('omits Authorization when the token is empty', () => {
+    expect(authorizationHeaders(undefined)).toEqual({})
+    expect(authorizationHeaders('')).toEqual({})
+  })
+
+  it('sends a Bearer token', () => {
+    expect(authorizationHeaders('abc.def')).toEqual({ Authorization: 'Bearer abc.def' })
+  })
+})
+
+describe('fetchAsObjectUrl', () => {
+  const originalFetch = global.fetch
+  const originalCreate = URL.createObjectURL
+
+  beforeEach(() => {
+    global.fetch = jest.fn()
+    URL.createObjectURL = jest.fn(() => 'blob:https://huly.app/generated')
+  })
+
+  afterEach(() => {
+    global.fetch = originalFetch
+    URL.createObjectURL = originalCreate
+  })
+
+  it('returns local object URLs without fetching', async () => {
+    const src = 'blob:https://huly.app/existing'
+    await expect(fetchAsObjectUrl(src, 'token')).resolves.toEqual({ url: src, owned: false })
+    expect(global.fetch).not.toHaveBeenCalled()
+  })
+
+  it('fetches remote files with Authorization and wraps the body in a blob URL', async () => {
+    const body = new Blob(['%PDF-1.4'], { type: 'application/pdf' })
+    ;(global.fetch as jest.Mock).mockResolvedValue({
+      ok: true,
+      blob: async () => body
+    })
+
+    await expect(fetchAsObjectUrl('https://dl.huly.app/blob/ws/file', 'tok')).resolves.toEqual({
+      url: 'blob:https://huly.app/generated',
+      owned: true
+    })
+    expect(global.fetch).toHaveBeenCalledWith('https://dl.huly.app/blob/ws/file', {
+      headers: { Authorization: 'Bearer tok' },
+      signal: undefined
+    })
+    expect(URL.createObjectURL).toHaveBeenCalledWith(body)
+  })
+
+  it('does not send credentials via the Authorization header when no token is given', async () => {
+    ;(global.fetch as jest.Mock).mockResolvedValue({
+      ok: true,
+      blob: async () => new Blob(['x'])
+    })
+
+    await fetchAsObjectUrl('/files/ws/file')
+    expect(global.fetch).toHaveBeenCalledWith('/files/ws/file', {
+      headers: {},
+      signal: undefined
+    })
+  })
+
+  it('throws when the file server rejects the request', async () => {
+    ;(global.fetch as jest.Mock).mockResolvedValue({ ok: false, status: 401 })
+    await expect(fetchAsObjectUrl('https://dl.huly.app/blob/ws/file', 'tok')).rejects.toThrow(
+      'Failed to fetch file: 401'
+    )
+    expect(URL.createObjectURL).not.toHaveBeenCalled()
+  })
+})
diff --git a/packages/ui/src/components/EmbeddedHTML.svelte b/packages/ui/src/components/EmbeddedHTML.svelte
index e8cd5adfb7..cd48f63bc6 100644
--- a/packages/ui/src/components/EmbeddedHTML.svelte
+++ b/packages/ui/src/components/EmbeddedHTML.svelte
@@ -14,39 +14,14 @@
 -->
 
 <script lang="ts">
-  import { onDestroy } from 'svelte'
   import EmbeddedPDF from './EmbeddedPDF.svelte'
-  import Loading from './Loading.svelte'
 
   export let src: string
   export let name: string
   export let fit: boolean = false
   export let css: string | undefined = undefined
-
-  let iframeSrc: string | undefined
-
-  async function loadFile (src: string): Promise<void> {
-    if (iframeSrc !== undefined) {
-      URL.revokeObjectURL(iframeSrc)
-      iframeSrc = undefined
-    }
-
-    const response = await fetch(src)
-    const blob = await response.blob()
-    iframeSrc = URL.createObjectURL(blob)
-  }
-
-  $: void loadFile(src)
-
-  onDestroy(() => {
-    if (iframeSrc !== undefined) {
-      URL.revokeObjectURL(iframeSrc)
-    }
-  })
+  export let token: string | undefined = undefined
 </script>
 
-{#if iframeSrc}
-  <EmbeddedPDF src={iframeSrc} {name} {fit} {css} />
-{:else}
-  <Loading />
-{/if}
+<!-- css is injected into the iframe document by EmbeddedPDF (DOCX-to-HTML preview). -->
+<EmbeddedPDF {src} {name} {fit} {css} {token} />
diff --git a/packages/ui/src/components/EmbeddedPDF.svelte b/packages/ui/src/components/EmbeddedPDF.svelte
index db4c12cb6c..d613e6baeb 100644
--- a/packages/ui/src/components/EmbeddedPDF.svelte
+++ b/packages/ui/src/components/EmbeddedPDF.svelte
@@ -14,12 +14,63 @@
 -->
 
 <script lang="ts">
+  import { onDestroy } from 'svelte'
+  import { fetchAsObjectUrl } from '../file-embed-utils'
+  import Loading from './Loading.svelte'
+
   export let src: string
   export let name: string
   export let fit: boolean = false
   export let css: string | undefined = undefined
+  export let token: string | undefined = undefined
 
   let iframe: HTMLIFrameElement | undefined = undefined
+  let iframeSrc: string | undefined
+  let owned = false
+  let failed = false
+  let controller: AbortController | undefined
+
+  function revokeOwned (): void {
+    if (owned && iframeSrc !== undefined) {
+      URL.revokeObjectURL(iframeSrc)
+    }
+    iframeSrc = undefined
+    owned = false
+  }
+
+  async function loadFile (src: string, token?: string): Promise<void> {
+    controller?.abort()
+    controller = new AbortController()
+    const { signal } = controller
+
+    failed = false
+    revokeOwned()
+
+    try {
+      const result = await fetchAsObjectUrl(src, token, signal)
+      if (signal.aborted) {
+        if (result.owned) {
+          URL.revokeObjectURL(result.url)
+        }
+        return
+      }
+      iframeSrc = result.url
+      owned = result.owned
+    } catch (err: any) {
+      if (err?.name === 'AbortError') {
+        return
+      }
+      failed = true
+      console.error('Failed to load embedded file', err)
+    }
+  }
+
+  $: void loadFile(src, token)
+
+  onDestroy(() => {
+    controller?.abort()
+    revokeOwned()
+  })
 
   // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
   $: if (css !== undefined && iframe !== undefined && iframe !== null) {
@@ -42,7 +93,11 @@
   }
 </script>
 
-<iframe bind:this={iframe} class:fit src={src + '#view=FitH&navpanes=0'} title={name} on:load />
+{#if iframeSrc}
+  <iframe bind:this={iframe} class:fit src={iframeSrc + '#view=FitH&navpanes=0'} title={name} on:load />
+{:else if !failed}
+  <Loading />
+{/if}
 
 <style lang="scss">
   iframe {
diff --git a/packages/ui/src/file-embed-utils.ts b/packages/ui/src/file-embed-utils.ts
new file mode 100644
index 0000000000..079cc99b70
--- /dev/null
+++ b/packages/ui/src/file-embed-utils.ts
@@ -0,0 +1,60 @@
+//
+// Copyright © 2026 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+/**
+ * blob: and data: URLs are already same-origin object URLs. Embedding them
+ * in an iframe does not need another download, and the caller owns revoke.
+ */
+export function isLocalObjectUrl (src: string): boolean {
+  return src.startsWith('blob:') || src.startsWith('data:')
+}
+
+/**
+ * Non-credentialed Authorization header. Datalake accepts Bearer tokens this
+ * way; default cors() allows the preflight. Do not use credentials:'include'
+ * — the file server answers Access-Control-Allow-Origin: * without
+ * Allow-Credentials, so a cookie-bearing cross-origin fetch is blocked.
+ */
+export function authorizationHeaders (token: string | undefined): HeadersInit {
+  if (token === undefined || token === '') {
+    return {}
+  }
+  return { Authorization: `Bearer ${token}` }
+}
+
+/**
+ * Download a remote file (with optional Bearer token) and return a blob: URL
+ * suitable for iframe embedding. Local object URLs are returned as-is.
+ */
+export async function fetchAsObjectUrl (
+  src: string,
+  token?: string,
+  signal?: AbortSignal
+): Promise<{ url: string, owned: boolean }> {
+  if (isLocalObjectUrl(src)) {
+    return { url: src, owned: false }
+  }
+
+  const response = await fetch(src, {
+    headers: authorizationHeaders(token),
+    signal
+  })
+  if (!response.ok) {
+    throw new Error(`Failed to fetch file: ${response.status}`)
+  }
+
+  const blob = await response.blob()
+  return { url: URL.createObjectURL(blob), owned: true }
+}
diff --git a/plugins/print-resources/src/components/DOCXViewer.svelte b/plugins/print-resources/src/components/DOCXViewer.svelte
index 73bd02cc6f..580e471dda 100644
--- a/plugins/print-resources/src/components/DOCXViewer.svelte
+++ b/plugins/print-resources/src/components/DOCXViewer.svelte
@@ -270,7 +270,7 @@
       <Spinner size="medium" />
     </div>
   {:else}
-    <EmbeddedHTML {src} {name} {css} />
+    <EmbeddedHTML {src} {name} {css} {token} />
   {/if}
 {/if}
 
diff --git a/plugins/view-resources/src/components/viewer/PDFViewer.svelte b/plugins/view-resources/src/components/viewer/PDFViewer.svelte
index 62bded043a..31c14d1443 100644
--- a/plugins/view-resources/src/components/viewer/PDFViewer.svelte
+++ b/plugins/view-resources/src/components/viewer/PDFViewer.svelte
@@ -14,12 +14,15 @@
 -->
 <script lang="ts">
   import { type Blob, type Ref } from '@hcengineering/core'
-  import { getFileUrl } from '@hcengineering/presentation'
+  import { getMetadata } from '@hcengineering/platform'
+  import presentation, { getFileUrl } from '@hcengineering/presentation'
   import { EmbeddedPDF } from '@hcengineering/ui'
 
   export let value: Ref<Blob>
   export let name: string
   export let fit: boolean = false
+
+  const token = getMetadata(presentation.metadata.Token)
 </script>
 
-<EmbeddedPDF src={getFileUrl(value, name)} {name} {fit} />
+<EmbeddedPDF src={getFileUrl(value, name)} {name} {fit} {token} />