From 7b3d7a0ebaf86d4d257986d6f58c8dda38bcd6e9 Mon Sep 17 00:00:00 2001
From: silentoplayz <jacwoo21@outlook.com>
Date: Thu, 30 Jul 2026 00:14:26 -0400
Subject: [PATCH] fix: send auth when downloading an image from the image
 preview
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The preview's Download button fetched the image URL with no credentials.
Backend file URLs (/api/v1/files/{id}/content) require authentication, so
the request returned 401 — and because the response status was never
checked, the JSON error body was saved as the downloaded file
(generated_image.json containing {"detail":"Not authenticated"}).

Sends the bearer token when the target is this deployment's own backend.
That is not necessarily the page origin: in development the frontend is
served from a separate origin and WEBUI_BASE_URL points at the backend, so
a same-origin-only check would still fail there. A third-party image host
never receives the token.

Also rejects a non-OK response instead of writing its body to disk, and
surfaces failures as a toast rather than a console-only error.
---
 src/lib/components/common/ImagePreview.svelte | 35 +++++++++++++++++--
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/common/ImagePreview.svelte b/src/lib/components/common/ImagePreview.svelte
index d1186562cf..a47b3d379d 100644
--- a/src/lib/components/common/ImagePreview.svelte
+++ b/src/lib/components/common/ImagePreview.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { onDestroy, getContext } from 'svelte';
+	import { toast } from 'svelte-sonner';
 
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
+	import { WEBUI_BASE_URL } from '$lib/constants';
 	import PanzoomContainer from '$lib/components/common/PanzoomContainer.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
 
@@ -119,9 +121,35 @@
 							src.startsWith('http://') ||
 							src.startsWith('https://')
 						) {
-							// Handle remote URLs
-							fetch(src)
-								.then((response) => response.blob())
+							const ownOrigins = new Set([window.location.origin]);
+							if (WEBUI_BASE_URL) {
+								try {
+									ownOrigins.add(new URL(WEBUI_BASE_URL, window.location.origin).origin);
+								} catch {
+								}
+							}
+
+							let isOwnBackend = src.startsWith('/');
+							if (!isOwnBackend) {
+								try {
+									isOwnBackend = ownOrigins.has(new URL(src).origin);
+								} catch {
+									isOwnBackend = false;
+								}
+							}
+
+							fetch(
+								src,
+								isOwnBackend && localStorage.token
+									? { headers: { Authorization: `Bearer ${localStorage.token}` } }
+									: undefined
+							)
+								.then((response) => {
+									if (!response.ok) {
+										throw new Error(`Failed to download image: ${response.status}`);
+									}
+									return response.blob();
+								})
 								.then((blob) => {
 									// detect the MIME type from the blob
 									const mimeType = blob.type || 'image/png';
@@ -140,6 +168,7 @@
 								})
 								.catch((error) => {
 									console.error('Error downloading remote image:', error);
+									toast.error($i18n.t('Failed to download image'));
 								});
 							return;
 						}