Add service worker for authenticated image loading

packages/experiments-realm/AuthenticatedImageTester/1.json

@@ -0,0 +1,27 @@
+{
+  "data": {
+    "meta": {
+      "adoptsFrom": {
+        "name": "default",
+        "module": "../authenticated-image-tester"
+      }
+    },
+    "type": "card",
+    "attributes": {
+      "cardInfo": {
+        "name": null,
+        "notes": null,
+        "summary": null,
+        "cardThumbnailURL": null
+      },
+      "imageUrl": "http://localhost:4201/experiments/logo.png"
+    },
+    "relationships": {
+      "cardInfo.theme": {
+        "links": {
+          "self": null
+        }
+      }
+    }
+  }
+}

packages/experiments-realm/authenticated-image-tester.gts

@@ -0,0 +1,236 @@
+import {
+  CardDef,
+  Component,
+  contains,
+  field,
+} from 'https://cardstack.com/base/card-api';
+import StringField from 'https://cardstack.com/base/string';
+import { htmlSafe } from '@ember/template';
+
+class AuthenticatedImageTesterIsolated extends Component<
+  typeof AuthenticatedImageTester
+> {
+  get sanitizedImageUrl(): string | undefined {
+    let url = this.args.model.imageUrl;
+    if (!url) {
+      return undefined;
+    }
+    // Only allow http(s) and relative URLs; reject anything that could
+    // break out of a CSS url("...") context (quotes, parens, semicolons).
+    let disallowed = new RegExp('["\u0027();]');
+    if (disallowed.test(url)) {
+      return undefined;
+    }
+    if (
+      url.startsWith('http://') ||
+      url.startsWith('https://') ||
+      url.startsWith('./') ||
+      url.startsWith('/')
+    ) {
+      return url;
+    }
+    return undefined;
+  }
+
+  get backgroundStyle() {
+    let url = this.sanitizedImageUrl;
+    if (!url) {
+      return undefined;
+    }
+    return htmlSafe(
+      `background-image: url("${url}"); background-size: contain; background-repeat: no-repeat; background-position: center;`,
+    );
+  }
+
+  <template>
+    <div class='tester'>
+      <h2>Authenticated Image Loading Tester</h2>
+      <p class='description'>
+        This card tests that the auth service worker injects Authorization
+        headers for realm-hosted images. Enter a URL to an image stored in an
+        authenticated realm below.
+      </p>
+
+      <div class='field-group'>
+        <label class='label'>Image URL</label>
+        <@fields.imageUrl @format='edit' />
+      </div>
+
+      {{#if @model.imageUrl}}
+        <div class='tests'>
+          <div class='test-section'>
+            <h3>&lt;img&gt; tag</h3>
+            <p class='hint'>
+              Uses a plain &lt;img src&gt; &#8212; the service worker should
+              intercept this and add the Authorization header.
+            </p>
+            <div class='image-container'>
+              <img
+                class='test-image'
+                src={{this.sanitizedImageUrl}}
+                alt='Example loaded via img tag'
+                loading='lazy'
+              />
+            </div>
+          </div>
+
+          <div class='test-section'>
+            <h3>CSS background-image</h3>
+            <p class='hint'>
+              Uses background-image: url(...) &#8212; the service worker should
+              also intercept this.
+            </p>
+            <div class='image-container'>
+              <div
+                class='background-image-test'
+                role='img'
+                aria-label='Test image loaded via CSS background-image'
+                style={{this.backgroundStyle}}
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class='instructions'>
+          <h3>How to verify</h3>
+          <ol>
+            <li>Open DevTools &rarr; Application &rarr; Service Workers</li>
+            <li>Confirm <code>auth-service-worker.js</code> is active</li>
+            <li>Open DevTools &rarr; Network tab</li>
+            <li>Look for the image request to the realm URL</li>
+            <li>Check that the request has an
+              <code>Authorization: Bearer ...</code>
+              header</li>
+            <li>If both images above render correctly, the service worker is
+              working</li>
+          </ol>
+        </div>
+      {{else}}
+        <div class='empty-state'>
+          Enter a realm image URL above to test. Try a relative path like
+          <code>./logo.png</code>
+          or an absolute realm URL.
+        </div>
+      {{/if}}
+    </div>
+
+    <style scoped>
+      .tester {
+        display: grid;
+        gap: var(--boxel-sp-lg);
+        padding: var(--boxel-sp-xl);
+        max-width: 720px;
+      }
+
+      h2 {
+        margin: 0;
+        font: 700 var(--boxel-font-lg);
+      }
+
+      h3 {
+        margin: 0 0 var(--boxel-sp-xs);
+        font: 600 var(--boxel-font);
+      }
+
+      .description {
+        margin: 0;
+        color: var(--boxel-500);
+        font: var(--boxel-font-sm);
+      }
+
+      .field-group {
+        display: grid;
+        gap: var(--boxel-sp-xxs);
+      }
+
+      .label {
+        font: 600 var(--boxel-font-sm);
+        color: var(--boxel-700);
+      }
+
+      .tests {
+        display: grid;
+        gap: var(--boxel-sp-lg);
+      }
+
+      .test-section {
+        border: 1px solid var(--boxel-200);
+        border-radius: var(--boxel-border-radius);
+        padding: var(--boxel-sp);
+      }
+
+      .hint {
+        margin: 0 0 var(--boxel-sp-sm);
+        font: var(--boxel-font-xs);
+        color: var(--boxel-400);
+      }
+
+      .image-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 200px;
+        background: var(--boxel-50);
+        border-radius: var(--boxel-border-radius);
+        overflow: hidden;
+      }
+
+      .test-image {
+        max-width: 100%;
+        max-height: 400px;
+        object-fit: contain;
+      }
+
+      .background-image-test {
+        width: 100%;
+        height: 300px;
+      }
+
+      .instructions {
+        background: var(--boxel-50);
+        border-radius: var(--boxel-border-radius);
+        padding: var(--boxel-sp);
+      }
+
+      .instructions ol {
+        margin: var(--boxel-sp-xs) 0 0;
+        padding-left: var(--boxel-sp-lg);
+      }
+
+      .instructions li {
+        font: var(--boxel-font-sm);
+        margin-bottom: var(--boxel-sp-xxs);
+      }
+
+      .instructions code {
+        background: var(--boxel-200);
+        padding: 1px 4px;
+        border-radius: 3px;
+        font-size: 0.9em;
+      }
+
+      .empty-state {
+        padding: var(--boxel-sp-lg);
+        text-align: center;
+        color: var(--boxel-400);
+        background: var(--boxel-50);
+        border-radius: var(--boxel-border-radius);
+        font: var(--boxel-font-sm);
+      }
+
+      .empty-state code {
+        background: var(--boxel-200);
+        padding: 1px 4px;
+        border-radius: 3px;
+      }
+    </style>
+  </template>
+}
+
+export default class AuthenticatedImageTester extends CardDef {
+  static displayName = 'Authenticated Image Tester';
+
+  @field imageUrl = contains(StringField);
+
+  static isolated = AuthenticatedImageTesterIsolated;
+}

packages/host/app/instance-initializers/register-auth-service-worker.ts

@@ -0,0 +1,14 @@
+import type ApplicationInstance from '@ember/application/instance';
+
+import { registerAuthServiceWorker } from '../utils/auth-service-worker-registration';
+
+// Register the auth service worker eagerly at app boot, before any lazy
+// services are instantiated. This ensures realm tokens are synced to the
+// SW before card rendering triggers image requests to authenticated realms.
+export function initialize(_appInstance: ApplicationInstance): void {
+  registerAuthServiceWorker();
+}
+
+export default {
+  initialize,
+};

packages/host/app/services/realm.ts

@@ -39,6 +39,11 @@ import type {
   RealmEventContent,
 } from 'https://cardstack.com/base/matrix-event';
 
+import {
+  syncTokenToServiceWorker,
+  syncAllTokensToServiceWorker,
+  clearServiceWorkerTokens,
+} from '../utils/auth-service-worker-registration';
 import { SessionLocalStorageKey } from '../utils/local-storage-keys';
 
 import type MatrixService from './matrix-service';
@@ -268,6 +273,7 @@ class RealmResource {
     this.fetchingInfo = undefined;
     this.fetchRealmPermissionsTask.cancelAll();
     window.localStorage.removeItem(SessionLocalStorageKey);
+    syncTokenToServiceWorker(this.realmURL, undefined);
   }
 
   private fetchingInfo: Promise<void> | undefined;
@@ -949,6 +955,7 @@ export default class RealmService extends Service {
       realm.logout();
     }
     this.bulkInfoPromise = undefined;
+    clearServiceWorkerTokens();
   }
 
   async publish(realmURL: string, publishedRealmURLs: string[]) {
@@ -1090,6 +1097,7 @@ export default class RealmService extends Service {
     let sessions: Map<string, RealmResource> = new Map();
     let tokens = SessionStorage.getAll();
     if (tokens) {
+      syncAllTokensToServiceWorker(tokens);
       for (let [realmURL, token] of Object.entries(tokens)) {
         let resource = this.createRealmResource(realmURL, token);
         sessions.set(realmURL, resource);
@@ -1125,6 +1133,7 @@ let SessionStorage = {
         JSON.stringify(session),
       );
     }
+    syncTokenToServiceWorker(realmURL, token);
   },
 };