From db74cfb891834f8d24b559565e09e3160e3a85cb Mon Sep 17 00:00:00 2001
From: yharby <me@youssefharby.com>
Date: Thu, 24 Sep 2026 16:39:31 +0300
Subject: [PATCH 1/7] Support SVG icons and previews

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f0a0833ca..620a36cf9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - New config option `displayPreviewsForChildren` controls preview images on maps showing multiple Items
+- SVG icons, thumbnails and previews (`image/svg+xml`) are shown
 
 ### Fixed
 

From 1270949012c883819e7835611461604c054147b1 Mon Sep 17 00:00:00 2001
From: yharby <me@youssefharby.com>
Date: Fri, 25 Sep 2026 15:54:33 +0300
Subject: [PATCH 2/7] fix: serve authenticated SVG images as data URLs

---
 src/models/authMedia.js | 44 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/models/authMedia.js b/src/models/authMedia.js
index 84e98b2af..e2ac31ae7 100644
--- a/src/models/authMedia.js
+++ b/src/models/authMedia.js
@@ -7,6 +7,10 @@ import { size } from 'stac-js/src/utils.js';
  * header-based authentication methods (API key in header, HTTP Basic, OIDC)
  * require. For those, the media is requested through the regular
  * (authenticated) request pipeline and exposed as an object URL instead.
+ * SVG images are exposed as `data:` URLs instead of object URLs: an object URL
+ * has the origin of STAC Browser, so an SVG opened from it (e.g. through a
+ * download link) could run scripts with access to the storage and cookies of
+ * STAC Browser. A `data:` URL has an opaque origin.
  *
  * Object URLs are cached per source URL and reference-counted so that
  * repeated usage (e.g. the same icon in a list of cards) only requests
@@ -21,6 +25,31 @@ import { size } from 'stac-js/src/utils.js';
 
 const cache = new Map();
 
+/**
+ * Whether the given blob is an SVG image.
+ *
+ * @param {Blob} blob The blob.
+ * @returns {boolean} `true` if the blob is an SVG image.
+ */
+function isSvg(blob) {
+  return typeof blob.type === 'string' && blob.type.toLowerCase().startsWith('image/svg+xml');
+}
+
+/**
+ * Reads the given blob as a `data:` URL.
+ *
+ * @param {Blob} blob The blob.
+ * @returns {Promise<string>} The `data:` URL.
+ */
+function toDataUrl(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(blob);
+  });
+}
+
 /**
  * Whether the given URL must be loaded through an authenticated request
  * to receive the credentials (i.e. request headers are configured and the
@@ -52,7 +81,7 @@ export function release(store, url) {
   entry.refs--;
   if (entry.refs <= 0) {
     cache.delete(url);
-    if (entry.objectUrl) {
+    if (entry.objectUrl && entry.objectUrl.startsWith('blob:')) {
       URL.revokeObjectURL(entry.objectUrl);
     }
   }
@@ -60,7 +89,7 @@ export function release(store, url) {
 
 /**
  * Requests the given URL with the configured credentials and returns an
- * object URL for the response.
+ * object URL for the response (a `data:` URL for SVG images).
  *
  * Every successful call must be paired with a `release` call for the same
  * URL. Failed requests are not cached, but do NOT trigger the login dialog
@@ -68,7 +97,7 @@ export function release(store, url) {
  *
  * @param {Object} store The Vuex store.
  * @param {string} url The absolute URL of the media.
- * @returns {Promise<string>} The object URL for the media.
+ * @returns {Promise<string>} The object URL (or `data:` URL) for the media.
  */
 export async function acquire(store, url) {
   let entry = cache.get(url);
@@ -82,8 +111,13 @@ export async function acquire(store, url) {
           axiosOptions: { responseType: 'blob' },
           noRetry: true
         })
-        .then(response => {
-          entry.objectUrl = URL.createObjectURL(response.data);
+        .then(async response => {
+          if (isSvg(response.data)) {
+            entry.objectUrl = await toDataUrl(response.data);
+          }
+          else {
+            entry.objectUrl = URL.createObjectURL(response.data);
+          }
           return entry.objectUrl;
         })
     };

From 9d242f19ca137de3bdc62e364aca5dd607c1921f Mon Sep 17 00:00:00 2001
From: yharby <me@youssefharby.com>
Date: Fri, 25 Sep 2026 15:54:33 +0300
Subject: [PATCH 3/7] fix: download SVG files instead of opening them

---
 src/components/HrefActions.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/HrefActions.vue b/src/components/HrefActions.vue
index b6dba6e0e..0381214ed 100644
--- a/src/components/HrefActions.vue
+++ b/src/components/HrefActions.vue
@@ -238,6 +238,10 @@ export default {
       if (this.useAltDownloadMethod)  {
         return false;
       }
+      // SVG files opened in the browser can run scripts, so they are downloaded instead
+      if (typeof this.data?.type === 'string' && this.data.type.toLowerCase().startsWith('image/svg+xml')) {
+        return false;
+      }
       if (this.data.canBrowserDisplayImage()) {
         return true;
       }

From 38a18e3b36734a68dae0a94aa848ac4fd2de16b1 Mon Sep 17 00:00:00 2001
From: yharby <me@youssefharby.com>
Date: Fri, 25 Sep 2026 15:54:33 +0300
Subject: [PATCH 4/7] fix: hide images that fail to load, fall back to the next
 thumbnail

---
 src/components/AuthImage.vue  | 20 ++++++++++++++------
 src/components/CardMixin.js   | 21 +++++++++++++++++++--
 src/components/Catalog.vue    |  2 +-
 src/components/Item.vue       |  2 +-
 src/components/Thumbnails.vue | 13 +++++++++----
 5 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/src/components/AuthImage.vue b/src/components/AuthImage.vue
index 6c61e063b..dd5c95e67 100644
--- a/src/components/AuthImage.vue
+++ b/src/components/AuthImage.vue
@@ -1,9 +1,9 @@
 <template>
   <img
-    v-if="displaySrc" :src="displaySrc" :alt="alt" :title="title"
+    v-if="displaySrc && !broken" :src="displaySrc" :alt="alt" :title="title"
     :crossorigin="crossorigin" :class="placement ? `card-img-${placement}` : null"
     :loading="lazy ? 'lazy' : null" :width="width" :height="height"
-    @load="$emit('load', $event)" @error="$emit('error', $event)"
+    @load="$emit('load', $event)" @error="onError"
   >
 </template>
 
@@ -22,8 +22,9 @@ import { acquire, needsAuthenticatedFetch, release } from '../models/authMedia';
  * never receive credentials.
  *
  * Failed authenticated requests fall back to loading the image directly
- * (without the headers) and never open the login dialog; errors are
- * reported through the `error` event.
+ * (without the headers) and never open the login dialog. Images that fail
+ * to load are hidden and reported through the `error` event, e.g. so that
+ * parents can fall back to another image.
  */
 export default {
   name: 'AuthImage',
@@ -70,6 +71,8 @@ export default {
       // The URL currently held in the authMedia cache
       acquiredUrl: null,
       failed: false,
+      // Whether the image element failed to load the image
+      broken: false,
       disposed: false,
       // Whether a lazy image is close enough to the viewport to be loaded
       nearViewport: false,
@@ -103,6 +106,7 @@ export default {
     },
     src() {
       this.failed = false;
+      this.broken = false;
       this.resolve();
     },
     requestHeaders: {
@@ -110,6 +114,7 @@ export default {
       handler() {
         // Re-resolve after login/logout
         this.failed = false;
+        this.broken = false;
         this.resolve();
       }
     }
@@ -149,6 +154,10 @@ export default {
     this.releaseAcquired();
   },
   methods: {
+    onError(event) {
+      this.broken = true;
+      this.$emit('error', event);
+    },
     disconnectObserver() {
       if (this.observer) {
         this.observer.disconnect();
@@ -177,7 +186,7 @@ export default {
         this.releaseAcquired();
         this.acquiredUrl = url;
         this.blobUrl = blobUrl;
-      } catch (error) {
+      } catch {
         if (this.disposed || url !== this.src || !this.useAuthenticatedFetch) {
           return;
         }
@@ -188,7 +197,6 @@ export default {
         // reports the failure through the error event of the element.
         this.failed = true;
         this.blobUrl = null;
-        this.$emit('error', error);
       }
     },
     releaseAcquired() {
diff --git a/src/components/CardMixin.js b/src/components/CardMixin.js
index 1c9343e02..27ce2a97a 100644
--- a/src/components/CardMixin.js
+++ b/src/components/CardMixin.js
@@ -17,6 +17,12 @@ export default {
       validator: value => value === null || ['list', 'cards'].includes(value)
     }
   },
+  data() {
+    return {
+      // The index of the thumbnail to show, increased if a thumbnail fails to load
+      thumbnailIndex: 0
+    };
+  },
   computed: {
     ...mapState(['cardViewMode', 'crossOriginMedia', 'defaultThumbnailSize']),
     isList() {
@@ -28,8 +34,8 @@ export default {
     thumbnail() {
       if (this.data) {
         let thumbnails = this.data.getThumbnails(true, 'thumbnail', true);
-        if (thumbnails.length > 0) {
-          let t = thumbnails[0];
+        if (thumbnails.length > this.thumbnailIndex) {
+          let t = thumbnails[this.thumbnailIndex];
           let width, height;
           const shape = t.getMetadata('proj:shape');
           if (Array.isArray(shape) && shape.length === 2) {
@@ -65,5 +71,16 @@ export default {
     summarizeDescription() {
       return this.hasDescription ? Utils.summarizeMd(this.data.getMetadata('description'), 300) : '';
     }
+  },
+  watch: {
+    data() {
+      this.thumbnailIndex = 0;
+    }
+  },
+  methods: {
+    // Falls back to the next thumbnail, hides the image if there's none
+    nextThumbnail() {
+      this.thumbnailIndex++;
+    }
   }
 };
diff --git a/src/components/Catalog.vue b/src/components/Catalog.vue
index 310613b15..e2796c42e 100644
--- a/src/components/Catalog.vue
+++ b/src/components/Catalog.vue
@@ -1,7 +1,7 @@
 <template>
   <b-card no-body :class="classes" v-visible.400="load" :img-placement="isList ? 'end' : undefined">
     <div class="card-img-wrapper">
-      <AuthImage v-if="hasImage" class="thumbnail" v-bind="thumbnail" lazy />
+      <AuthImage v-if="hasImage" class="thumbnail" v-bind="thumbnail" lazy @error="nextThumbnail" />
     </div>
     <b-card-body>
       <b-card-title>
diff --git a/src/components/Item.vue b/src/components/Item.vue
index 5a34b256a..6ffdbc9ba 100644
--- a/src/components/Item.vue
+++ b/src/components/Item.vue
@@ -1,7 +1,7 @@
 <template>
   <b-card no-body class="item-card" :class="classes" v-visible.400="load" :img-placement="isList ? 'end' : undefined">
     <div class="card-img-wrapper">
-      <AuthImage v-if="hasImage" class="thumbnail" v-bind="thumbnail" lazy />
+      <AuthImage v-if="hasImage" class="thumbnail" v-bind="thumbnail" lazy @error="nextThumbnail" />
     </div>
     <b-card-body>
       <b-card-title>
diff --git a/src/components/Thumbnails.vue b/src/components/Thumbnails.vue
index 924d2683e..161abe611 100644
--- a/src/components/Thumbnails.vue
+++ b/src/components/Thumbnails.vue
@@ -5,12 +5,12 @@
     </div>
     <div class="content">
       <a
-        v-for="thumbnail in thumbnails" :key="thumbnail.href" :href="hrefs[thumbnail.href] || thumbnail.getAbsoluteUrl()"
+        v-for="thumbnail in shownThumbnails" :key="thumbnail.href" :href="hrefs[thumbnail.href] || thumbnail.getAbsoluteUrl()"
         target="_blank" rel="noopener noreferrer" download
       >
         <AuthImage
           class="thumbnail" :src="thumbnail.getAbsoluteUrl()" :crossorigin="crossOriginMedia"
-          @resolved="url => hrefs[thumbnail.href] = url"
+          @resolved="url => hrefs[thumbnail.href] = url" @error="broken[thumbnail.href] = true"
         />
       </a>
     </div>
@@ -37,11 +37,16 @@ export default {
     return {
       // The URLs the thumbnails are shown from (incl. credentials / object URLs),
       // so that the download links download what is shown
-      hrefs: {}
+      hrefs: {},
+      // The thumbnails that failed to load, they are hidden
+      broken: {}
     };
   },
   computed: {
-    ...mapState(['crossOriginMedia'])
+    ...mapState(['crossOriginMedia']),
+    shownThumbnails() {
+      return this.thumbnails.filter(thumbnail => !this.broken[thumbnail.href]);
+    }
   }
 };
 </script>

From bf92f33050501dd0aac3cf75d2c24f371b08760d Mon Sep 17 00:00:00 2001
From: yharby <me@youssefharby.com>
Date: Fri, 25 Sep 2026 15:54:33 +0300
Subject: [PATCH 5/7] test: cover SVG data URLs and thumbnail fallback

---
 tests/e2e/authentication.spec.js | 40 ++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/tests/e2e/authentication.spec.js b/tests/e2e/authentication.spec.js
index 8dc60899a..00119da19 100644
--- a/tests/e2e/authentication.spec.js
+++ b/tests/e2e/authentication.spec.js
@@ -210,6 +210,29 @@ test.describe('Authenticated media', () => {
     await expect(img).toHaveAttribute('src', /^blob:/);
   });
 
+  test('SVG thumbnails load with the auth header via data URLs', async ({ page, worker }) => {
+    await configureBrowser(page, {
+      authConfig: { type: 'apiKey', in: 'header', name: 'X-API-Key' },
+    });
+    const { catalog, item } = createCatalogWithItem();
+    await catalog.createServer(worker);
+    const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><rect width="10" height="10"/></svg>';
+    await worker.use(
+      http.get(THUMB_URL, ({ request }) => {
+        if (!hasHeader('x-api-key', 'secret')(request)) {
+          return new HttpResponse(null, { status: 401 });
+        }
+        return new HttpResponse(svg, { headers: { 'Content-Type': 'image/svg+xml' } });
+      }),
+    );
+    await loginOnItemPage(page, worker, catalog, item);
+
+    const img = await openThumbnailsTab(page);
+    await expect.poll(() => img.evaluate(el => el.naturalWidth)).toBeGreaterThan(0);
+    // A data URL has an opaque origin, unlike an object URL
+    await expect(img).toHaveAttribute('src', /^data:image\/svg\+xml/);
+  });
+
   test('thumbnails carry the private query parameter without object URLs', async ({ page, worker }) => {
     await configureBrowser(page, {
       authConfig: { type: 'apiKey', in: 'query', name: 'API_KEY' },
@@ -278,6 +301,23 @@ test.describe('Authenticated media', () => {
     await expect(img).toHaveAttribute('src', THUMB_URL);
   });
 
+  test('card thumbnails fall back to the next thumbnail if one fails', async ({ page, worker }) => {
+    const { catalog, item } = createCatalogWithItem();
+    const fallbackUrl = 'https://stac.example/fallback.png';
+    item.data.assets.fallback = { href: fallbackUrl, type: 'image/png', roles: ['thumbnail'] };
+    await catalog.createServer(worker);
+    await mockImage(worker, THUMB_URL, () => false);
+    await mockImage(worker, fallbackUrl);
+
+    await page.goto(catalog.root.getBrowserPath());
+    await waitForBrowserReady(page);
+
+    const img = page.locator('.card img.thumbnail').first();
+    await img.scrollIntoViewIfNeeded();
+    await expect(img).toHaveAttribute('src', fallbackUrl);
+    await expect.poll(() => img.evaluate(el => el.naturalWidth)).toBeGreaterThan(0);
+  });
+
   test('card thumbnails on the catalog page load with the auth header', async ({ page, worker }) => {
     await configureBrowser(page, {
       catalogUrl: ROOT_URL,

From 6c1e392ae5b21caa3bc891c5028d3b45b60407bb Mon Sep 17 00:00:00 2001
From: yharby <me@youssefharby.com>
Date: Fri, 25 Sep 2026 15:54:33 +0300
Subject: [PATCH 6/7] docs: recommend a separate origin and a strict CSP for
 SVG data

---
 CHANGELOG.md    | 6 +++++-
 docs/options.md | 7 +++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 620a36cf9..05f5adb47 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,7 +10,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - New config option `displayPreviewsForChildren` controls preview images on maps showing multiple Items
-- SVG icons, thumbnails and previews (`image/svg+xml`) are shown
+- SVG icons, thumbnails and previews (`image/svg+xml`) are shown, SVG files are offered for download instead of being opened
+
+### Fixed
+
+- Icons, logos and thumbnails that fail to load are hidden, cards fall back to the next thumbnail
 
 ### Fixed
 
diff --git a/docs/options.md b/docs/options.md
index b4491f1fd..c9b84ba59 100644
--- a/docs/options.md
+++ b/docs/options.md
@@ -62,6 +62,7 @@ The override order for the configuration is:
   - [allowExternalAccess](#allowexternalaccess)
   - [allowedDomains](#alloweddomains)
   - [crossOriginMedia](#crossoriginmedia)
+  - [SVG images](#svg-images)
   - [authConfig](#authconfig)
     - [API Keys](#api-keys)
     - [HTTP Basic](#http-basic)
@@ -249,6 +250,12 @@ Domain and subdomain patterns ignore schema, userinfo, port, path, query and fra
 
 The value for the [`crossorigin` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) that is sent when loading images through the browser. Default to `null`. If you encounter issues with loading images, you may want to try setting this to `anonymous`.
 
+### SVG images
+
+STAC Browser shows SVG images (`image/svg+xml`), e.g. icons and thumbnails.
+SVG files can contain scripts, which don't run when the image is shown in STAC Browser, but may run when a user opens the file directly.
+We recommend to serve SVG data from a different origin (domain) than STAC Browser and to set a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) without `unsafe-inline` for STAC Browser.
+
 ### authConfig
 
 ***experimental***

From de34b2a2859485f252ca0e16b724d514db217494 Mon Sep 17 00:00:00 2001
From: Matthias Mohr <m.mohr@uni-muenster.de>
Date: Sun, 11 Oct 2026 18:55:11 +0200
Subject: [PATCH 7/7] Code review

---
 CHANGELOG.md                     |  5 +----
 docs/options.md                  |  9 ++++++---
 package-lock.json                |  8 ++++----
 package.json                     |  2 +-
 src/components/AuthImage.vue     | 25 +++++++++++++++++--------
 src/components/CardMixin.js      | 21 ++-------------------
 src/components/Catalog.vue       |  2 +-
 src/components/HrefActions.vue   |  4 ++--
 src/components/Item.vue          |  2 +-
 src/components/Thumbnails.vue    | 15 +++++----------
 src/models/authMedia.js          | 14 +++-----------
 tests/e2e/authentication.spec.js | 18 +++++++++---------
 tests/e2e/item.spec.js           | 32 ++++++++++++++++++++++++++++++++
 13 files changed, 84 insertions(+), 73 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 05f5adb47..feb3b115b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,10 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
-- Icons, logos and thumbnails that fail to load are hidden, cards fall back to the next thumbnail
-
-### Fixed
-
+- Icons, logos and card thumbnails that fail to load are hidden
 - A page that is still loading no longer replaces the page that was navigated to in the meantime
 - Maps showing multiple Items now send the configured authentication (headers and query parameters) and apply the source/layer customizations and `maxDisplayPixels` for each Item
 - The `crossOriginMedia` option now applies to images on maps
diff --git a/docs/options.md b/docs/options.md
index c9b84ba59..20eb30ec7 100644
--- a/docs/options.md
+++ b/docs/options.md
@@ -62,7 +62,7 @@ The override order for the configuration is:
   - [allowExternalAccess](#allowexternalaccess)
   - [allowedDomains](#alloweddomains)
   - [crossOriginMedia](#crossoriginmedia)
-  - [SVG images](#svg-images)
+    - [SVG images](#svg-images)
   - [authConfig](#authconfig)
     - [API Keys](#api-keys)
     - [HTTP Basic](#http-basic)
@@ -250,11 +250,14 @@ Domain and subdomain patterns ignore schema, userinfo, port, path, query and fra
 
 The value for the [`crossorigin` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) that is sent when loading images through the browser. Default to `null`. If you encounter issues with loading images, you may want to try setting this to `anonymous`.
 
-### SVG images
+#### SVG images
 
 STAC Browser shows SVG images (`image/svg+xml`), e.g. icons and thumbnails.
 SVG files can contain scripts, which don't run when the image is shown in STAC Browser, but may run when a user opens the file directly.
-We recommend to serve SVG data from a different origin (domain) than STAC Browser and to set a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) without `unsafe-inline` for STAC Browser.
+We recommend serving SVG data from a different origin (domain) than STAC Browser.
+Otherwise, serve the SVG files with a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) that blocks scripts, e.g. `script-src 'none'`.
+
+If STAC Browser is served with a Content Security Policy, `img-src` must allow `blob:` and `data:`, as images that require authentication headers are shown from such URLs.
 
 ### authConfig
 
diff --git a/package-lock.json b/package-lock.json
index 38d65c30d..2d1052ce5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,7 +34,7 @@
         "proj4": "^2.16.1",
         "remove-markdown": "^0.6.2",
         "shiki": "^3.22.0",
-        "stac-js": "^0.5.6",
+        "stac-js": "^0.5.8",
         "stac-node-validator": "2.0.0-rc.3",
         "streamsaver-js": "^2.0.7",
         "urijs": "^1.19.11",
@@ -10257,9 +10257,9 @@
       "license": "BDS-3-Clause"
     },
     "node_modules/stac-js": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/stac-js/-/stac-js-0.5.7.tgz",
-      "integrity": "sha512-CvVpm0aAST0EgrPmXocnIoaQ84Nw/KcDGei4y7VbDzyQy1JuOp8LYOCLwPGPr5CxbuOK7nJX5Zmwp6S3R/0gJg==",
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/stac-js/-/stac-js-0.5.8.tgz",
+      "integrity": "sha512-LFcBEn+PnlV3ilu/C10O/5a/RBOy0eu+8JFteGEuiE4JfnDq2Nc2+r9MLfjj07wGqVMZ3JHUaIVLmBI5fj2e7Q==",
       "license": "Apache-2.0",
       "dependencies": {
         "@radiantearth/stac-migrate": "^2.1.0",
diff --git a/package.json b/package.json
index 417a8909a..b281b5f67 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
     "proj4": "^2.16.1",
     "remove-markdown": "^0.6.2",
     "shiki": "^3.22.0",
-    "stac-js": "^0.5.6",
+    "stac-js": "^0.5.8",
     "stac-node-validator": "2.0.0-rc.3",
     "streamsaver-js": "^2.0.7",
     "urijs": "^1.19.11",
diff --git a/src/components/AuthImage.vue b/src/components/AuthImage.vue
index dd5c95e67..60944b41e 100644
--- a/src/components/AuthImage.vue
+++ b/src/components/AuthImage.vue
@@ -1,6 +1,6 @@
 <template>
   <img
-    v-if="displaySrc && !broken" :src="displaySrc" :alt="alt" :title="title"
+    v-if="showImage" :src="displaySrc" :alt="alt" :title="title"
     :crossorigin="crossorigin" :class="placement ? `card-img-${placement}` : null"
     :loading="lazy ? 'lazy' : null" :width="width" :height="height"
     @load="$emit('load', $event)" @error="onError"
@@ -23,8 +23,9 @@ import { acquire, needsAuthenticatedFetch, release } from '../models/authMedia';
  *
  * Failed authenticated requests fall back to loading the image directly
  * (without the headers) and never open the login dialog. Images that fail
- * to load are hidden and reported through the `error` event, e.g. so that
- * parents can fall back to another image.
+ * to load are reported through the `error` event and hidden, unless
+ * `showBroken` is set. They are shown again once their URL changes, e.g.
+ * after login.
  */
 export default {
   name: 'AuthImage',
@@ -62,6 +63,11 @@ export default {
     height: {
       type: [Number, String],
       default: null
+    },
+    // Keeps images that fail to load visible
+    showBroken: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['load', 'error', 'resolved'],
@@ -71,8 +77,9 @@ export default {
       // The URL currently held in the authMedia cache
       acquiredUrl: null,
       failed: false,
-      // Whether the image element failed to load the image
-      broken: false,
+      // The URL that the image element failed to load. Also covers header
+      // credentials: new ones lead to a new object URL (or data URL for new content).
+      brokenSrc: null,
       disposed: false,
       // Whether a lazy image is close enough to the viewport to be loaded
       nearViewport: false,
@@ -94,6 +101,9 @@ export default {
         return this.blobUrl; // null (= not rendered) while loading
       }
       return this.requestUrl;
+    },
+    showImage() {
+      return Boolean(this.displaySrc) && (this.showBroken || this.displaySrc !== this.brokenSrc);
     }
   },
   watch: {
@@ -106,7 +116,7 @@ export default {
     },
     src() {
       this.failed = false;
-      this.broken = false;
+      this.brokenSrc = null;
       this.resolve();
     },
     requestHeaders: {
@@ -114,7 +124,6 @@ export default {
       handler() {
         // Re-resolve after login/logout
         this.failed = false;
-        this.broken = false;
         this.resolve();
       }
     }
@@ -155,7 +164,7 @@ export default {
   },
   methods: {
     onError(event) {
-      this.broken = true;
+      this.brokenSrc = this.displaySrc;
       this.$emit('error', event);
     },
     disconnectObserver() {
diff --git a/src/components/CardMixin.js b/src/components/CardMixin.js
index 27ce2a97a..1c9343e02 100644
--- a/src/components/CardMixin.js
+++ b/src/components/CardMixin.js
@@ -17,12 +17,6 @@ export default {
       validator: value => value === null || ['list', 'cards'].includes(value)
     }
   },
-  data() {
-    return {
-      // The index of the thumbnail to show, increased if a thumbnail fails to load
-      thumbnailIndex: 0
-    };
-  },
   computed: {
     ...mapState(['cardViewMode', 'crossOriginMedia', 'defaultThumbnailSize']),
     isList() {
@@ -34,8 +28,8 @@ export default {
     thumbnail() {
       if (this.data) {
         let thumbnails = this.data.getThumbnails(true, 'thumbnail', true);
-        if (thumbnails.length > this.thumbnailIndex) {
-          let t = thumbnails[this.thumbnailIndex];
+        if (thumbnails.length > 0) {
+          let t = thumbnails[0];
           let width, height;
           const shape = t.getMetadata('proj:shape');
           if (Array.isArray(shape) && shape.length === 2) {
@@ -71,16 +65,5 @@ export default {
     summarizeDescription() {
       return this.hasDescription ? Utils.summarizeMd(this.data.getMetadata('description'), 300) : '';
     }
-  },
-  watch: {
-    data() {
-      this.thumbnailIndex = 0;
-    }
-  },
-  methods: {
-    // Falls back to the next thumbnail, hides the image if there's none
-    nextThumbnail() {
-      this.thumbnailIndex++;
-    }
   }
 };
diff --git a/src/components/Catalog.vue b/src/components/Catalog.vue
index e2796c42e..310613b15 100644
--- a/src/components/Catalog.vue
+++ b/src/components/Catalog.vue
@@ -1,7 +1,7 @@
 <template>
   <b-card no-body :class="classes" v-visible.400="load" :img-placement="isList ? 'end' : undefined">
     <div class="card-img-wrapper">
-      <AuthImage v-if="hasImage" class="thumbnail" v-bind="thumbnail" lazy @error="nextThumbnail" />
+      <AuthImage v-if="hasImage" class="thumbnail" v-bind="thumbnail" lazy />
     </div>
     <b-card-body>
       <b-card-title>
diff --git a/src/components/HrefActions.vue b/src/components/HrefActions.vue
index 0381214ed..fa6d6cedd 100644
--- a/src/components/HrefActions.vue
+++ b/src/components/HrefActions.vue
@@ -48,7 +48,7 @@ import AssetActions from '../../assetActions.config';
 import LinkActions from '../../linkActions.config';
 import AuthUtils from './auth/utils';
 import { browserProtocols } from 'stac-js/src/http';
-import { imageMediaTypes, geojsonMediaType, wozMediaTypes, zarrMediaTypes } from 'stac-js/src/mediatypes';
+import { imageMediaTypes, geojsonMediaType, svgMediaType, wozMediaTypes, zarrMediaTypes } from 'stac-js/src/mediatypes';
 import { getGeoZarrSourceOptionsFromAsset } from 'ol-stac/util.js';
 
 const disableDownloadTypes = [...zarrMediaTypes];
@@ -239,7 +239,7 @@ export default {
         return false;
       }
       // SVG files opened in the browser can run scripts, so they are downloaded instead
-      if (typeof this.data?.type === 'string' && this.data.type.toLowerCase().startsWith('image/svg+xml')) {
+      if (this.data.isType(svgMediaType)) {
         return false;
       }
       if (this.data.canBrowserDisplayImage()) {
diff --git a/src/components/Item.vue b/src/components/Item.vue
index 6ffdbc9ba..5a34b256a 100644
--- a/src/components/Item.vue
+++ b/src/components/Item.vue
@@ -1,7 +1,7 @@
 <template>
   <b-card no-body class="item-card" :class="classes" v-visible.400="load" :img-placement="isList ? 'end' : undefined">
     <div class="card-img-wrapper">
-      <AuthImage v-if="hasImage" class="thumbnail" v-bind="thumbnail" lazy @error="nextThumbnail" />
+      <AuthImage v-if="hasImage" class="thumbnail" v-bind="thumbnail" lazy />
     </div>
     <b-card-body>
       <b-card-title>
diff --git a/src/components/Thumbnails.vue b/src/components/Thumbnails.vue
index 161abe611..69570f21d 100644
--- a/src/components/Thumbnails.vue
+++ b/src/components/Thumbnails.vue
@@ -5,12 +5,12 @@
     </div>
     <div class="content">
       <a
-        v-for="thumbnail in shownThumbnails" :key="thumbnail.href" :href="hrefs[thumbnail.href] || thumbnail.getAbsoluteUrl()"
+        v-for="thumbnail in thumbnails" :key="thumbnail.href" :href="hrefs[thumbnail.href] || thumbnail.getAbsoluteUrl()"
         target="_blank" rel="noopener noreferrer" download
       >
         <AuthImage
-          class="thumbnail" :src="thumbnail.getAbsoluteUrl()" :crossorigin="crossOriginMedia"
-          @resolved="url => hrefs[thumbnail.href] = url" @error="broken[thumbnail.href] = true"
+          class="thumbnail" :src="thumbnail.getAbsoluteUrl()" :crossorigin="crossOriginMedia" show-broken
+          @resolved="url => hrefs[thumbnail.href] = url"
         />
       </a>
     </div>
@@ -37,16 +37,11 @@ export default {
     return {
       // The URLs the thumbnails are shown from (incl. credentials / object URLs),
       // so that the download links download what is shown
-      hrefs: {},
-      // The thumbnails that failed to load, they are hidden
-      broken: {}
+      hrefs: {}
     };
   },
   computed: {
-    ...mapState(['crossOriginMedia']),
-    shownThumbnails() {
-      return this.thumbnails.filter(thumbnail => !this.broken[thumbnail.href]);
-    }
+    ...mapState(['crossOriginMedia'])
   }
 };
 </script>
diff --git a/src/models/authMedia.js b/src/models/authMedia.js
index e2ac31ae7..4b9c92d7d 100644
--- a/src/models/authMedia.js
+++ b/src/models/authMedia.js
@@ -1,4 +1,5 @@
 import { size } from 'stac-js/src/utils.js';
+import { svgMediaType } from 'stac-js/src/mediatypes.js';
 
 /**
  * Loads media (e.g. images) through an authenticated request when needed.
@@ -25,16 +26,6 @@ import { size } from 'stac-js/src/utils.js';
 
 const cache = new Map();
 
-/**
- * Whether the given blob is an SVG image.
- *
- * @param {Blob} blob The blob.
- * @returns {boolean} `true` if the blob is an SVG image.
- */
-function isSvg(blob) {
-  return typeof blob.type === 'string' && blob.type.toLowerCase().startsWith('image/svg+xml');
-}
-
 /**
  * Reads the given blob as a `data:` URL.
  *
@@ -112,7 +103,8 @@ export async function acquire(store, url) {
           noRetry: true
         })
         .then(async response => {
-          if (isSvg(response.data)) {
+          // Prefix match as the content type may have parameters (e.g. charset)
+          if (response.data.type.toLowerCase().startsWith(svgMediaType)) {
             entry.objectUrl = await toDataUrl(response.data);
           }
           else {
diff --git a/tests/e2e/authentication.spec.js b/tests/e2e/authentication.spec.js
index 00119da19..ca68646ad 100644
--- a/tests/e2e/authentication.spec.js
+++ b/tests/e2e/authentication.spec.js
@@ -301,21 +301,21 @@ test.describe('Authenticated media', () => {
     await expect(img).toHaveAttribute('src', THUMB_URL);
   });
 
-  test('card thumbnails fall back to the next thumbnail if one fails', async ({ page, worker }) => {
+  test('failed thumbnails are hidden on cards, but kept in the thumbnails tab', async ({ page, worker }) => {
     const { catalog, item } = createCatalogWithItem();
-    const fallbackUrl = 'https://stac.example/fallback.png';
-    item.data.assets.fallback = { href: fallbackUrl, type: 'image/png', roles: ['thumbnail'] };
     await catalog.createServer(worker);
-    await mockImage(worker, THUMB_URL, () => false);
-    await mockImage(worker, fallbackUrl);
+    const requests = await mockImage(worker, THUMB_URL, () => false);
 
     await page.goto(catalog.root.getBrowserPath());
     await waitForBrowserReady(page);
+    await expect.poll(() => requests.length).toBeGreaterThan(0);
+    await expect(page.locator('.card img.thumbnail')).toHaveCount(0);
 
-    const img = page.locator('.card img.thumbnail').first();
-    await img.scrollIntoViewIfNeeded();
-    await expect(img).toHaveAttribute('src', fallbackUrl);
-    await expect.poll(() => img.evaluate(el => el.naturalWidth)).toBeGreaterThan(0);
+    await page.goto(item.getBrowserPath());
+    await waitForBrowserReady(page);
+    const img = await openThumbnailsTab(page);
+    // Keeps the link to open or download the file
+    await expect(img).toHaveAttribute('src', THUMB_URL);
   });
 
   test('card thumbnails on the catalog page load with the auth header', async ({ page, worker }) => {
diff --git a/tests/e2e/item.spec.js b/tests/e2e/item.spec.js
index f79c1f529..4cc29638c 100644
--- a/tests/e2e/item.spec.js
+++ b/tests/e2e/item.spec.js
@@ -282,6 +282,38 @@ test.describe('Item view - Alternate thumbnails', () => {
   });
 });
 
+test.describe('Item view - Asset actions', () => {
+  test('SVG assets are offered for download instead of being opened', async ({ page, worker }) => {
+    const catalog = new StaticCatalog({ url: 'https://stac.example/catalog.json' });
+    const item = catalog.addItem({ url: 'https://stac.example/item.json' });
+    item.data.assets = {
+      legend: { href: 'https://stac.example/legend.svg', type: 'image/svg+xml', roles: ['metadata'], title: 'Legend' },
+      chart: { href: 'https://stac.example/chart.png', type: 'image/png', roles: ['metadata'], title: 'Chart' }
+    };
+    await catalog.createServer(worker);
+
+    await page.goto(item.getBrowserPath());
+    await waitForBrowserReady(page);
+
+    const expandAsset = async (title) => {
+      const asset = page.locator('.asset', { hasText: title });
+      await asset.getByRole('button', { name: title }).click();
+      return asset;
+    };
+
+    // SVG files opened in the browser can run scripts
+    const legend = await expandAsset('Legend');
+    const download = legend.getByRole('button', { name: /download/i });
+    await expect(download).toBeVisible();
+    await expect(download).toHaveAttribute('download');
+    await expect(legend.getByRole('button', { name: /^open$/i })).toHaveCount(0);
+
+    // Other images that browsers can show are still opened
+    const chart = await expandAsset('Chart');
+    await expect(chart.getByRole('button', { name: /^open$/i })).toBeVisible();
+  });
+});
+
 test.describe('Item view - Geometry', () => {
   function createCatalog() {
     const catalog = new StaticCatalog({url: 'https://stac.example/catalog.json'});