Add service worker for authenticated image loading by lukemelia · Pull Request #3966 · cardstack/boxel

lukemelia · 2026-02-09T22:47:23Z

Summary

Adds a service worker that intercepts cross-origin <img> and CSS background-image requests to realm servers and injects Authorization: Bearer <jwt> headers
No server-side changes needed — the existing CORS config (origin: * with Authorization in allowed headers) works as-is
No card template changes needed — existing <img src={{@model.url}}> patterns work transparently
Replaces a previous cookie-based approach that was incompatible with wildcard CORS origins

How it works

An instance initializer registers the service worker at app boot
Per-realm JWT tokens are synced to the SW via postMessage whenever they're created, refreshed, or removed
The SW intercepts GET/HEAD requests matching known realm URL prefixes and adds the Authorization header
The SW upgrades no-cors requests (used by <img> elements) to cors mode so the header isn't silently stripped

Key files

File	Purpose
`packages/host/public/auth-service-worker.js`	The service worker — token storage, fetch interception, auth injection
`packages/host/app/utils/auth-service-worker-registration.ts`	Registration, token sync via postMessage, lifecycle management
`packages/host/app/instance-initializers/register-auth-service-worker.ts`	Eager boot at app startup
`packages/host/app/services/realm.ts`	Integration: sync on persist/restore, clear on logout
`packages/host/tests/unit/auth-service-worker-test.ts`	Unit tests for token management and fetch interception logic
`packages/experiments-realm/authenticated-image-tester.gts`	Test card for manual verification

Closes CS-10159

Test plan

Verified locally: authenticated realm images load via both <img> tag and CSS background-image
Verify service worker registers and activates on fresh browser (no prior SW)
Verify images load after page refresh (tokens synced from localStorage)
Verify logout clears SW tokens (images stop loading)
Verify non-realm URLs (external CDNs, etc.) are not affected
Run existing test suite to confirm no regressions

🤖 Generated with Claude Code

<img> elements and CSS background-image cannot send Authorization headers, so images hosted in authenticated realms fail to load. Instead of using cookies (which are incompatible with wildcard CORS origins), this adds a service worker that intercepts resource requests to realm servers and injects the JWT Authorization header transparently. - auth-service-worker.js: intercepts GET/HEAD requests matching known realm URL prefixes and adds Bearer token headers - auth-service-worker-registration.ts: manages SW lifecycle and syncs realm tokens from the main thread via postMessage - realm.ts: registers the SW on startup, syncs tokens on persist/restore, and clears tokens on logout Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Example card for testing that the auth service worker correctly injects Authorization headers for realm-hosted images. Renders the same image URL via both <img> tag and CSS background-image, with instructions for verifying in DevTools. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

The controllerchange listener was added after await register(), which could miss the event if the SW activated quickly. Now the listener is added before registration starts, and tokens are also synced immediately after registration if a controller already exists (returning visitors). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

The RealmService is lazily instantiated by Ember, so its constructor ran after cards already rendered and fired image requests. Moving the SW registration and token sync to an instance initializer ensures it happens at app boot, before any card rendering triggers authenticated image loads. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

github-actions · 2026-02-09T22:55:22Z

Preview deployments

Cross-origin <img> and CSS background-image requests use mode: 'no-cors' by default, which causes the browser to silently strip non-safelisted headers like Authorization. The SW now creates a new cors-mode request instead of cloning the original, so the Authorization header is actually sent to the realm server. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Copilot

Pull request overview

This PR introduces an auth-aware service worker to enable authenticated loading of realm-hosted images (and CSS background images) by injecting Authorization: Bearer <jwt> headers into matching cross-origin resource requests, without requiring template or server-side changes.

Changes:

Added a service worker that intercepts GET/HEAD requests to known realm URL prefixes and injects Authorization headers (including upgrading no-cors image requests to cors).
Added Ember-side registration + token synchronization to the service worker (sync on boot, persist/restore, and clear on logout).
Added unit tests for message-driven token management + request interception logic, plus an experiments card for manual verification.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/host/public/auth-service-worker.js	Implements SW token cache, fetch interception, and Authorization header injection.
packages/host/app/utils/auth-service-worker-registration.ts	Registers SW at boot and syncs/clears tokens via `postMessage`.
packages/host/app/instance-initializers/register-auth-service-worker.ts	Ensures SW registration happens early in app startup.
packages/host/app/services/realm.ts	Hooks token persist/restore/logout into SW synchronization.
packages/host/tests/unit/auth-service-worker-test.ts	Adds unit tests for token message handling and interception behavior.
packages/experiments-realm/authenticated-image-tester.gts	Adds a manual test card for `<img>` and CSS background-image verification.
packages/experiments-realm/AuthenticatedImageTester/1.json	Seed data for the experiments test card.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

github-actions · 2026-02-09T23:20:00Z

Host Test Results

1 files ± 0 1 suites ±0 3h 26m 9s ⏱️ + 1h 37m 19s
1 962 tests + 13 1 945 ✅ + 13 17 💤 ± 0 0 ❌ ±0
3 885 runs +1 921 3 852 ✅ +1 905 33 💤 +16 0 ❌ ±0

Results for commit a9c4d4d. ± Comparison against base commit 8def5b2.

♻️ This comment has been updated with latest results.

backspace

I tried locally with the same test realm I set up for the cookie version, success! Confirmed that the image won’t show anymore after logging out.

- Construct intercepted request from original Request object to preserve cache, referrer, integrity and other properties (was using request.url) - Import shared SessionLocalStorageKey constant instead of hardcoding - Update test processFetch to mirror SW's no-cors→cors mode upgrade and add dedicated test for mode upgrade behavior - Add URL sanitization to experiments image tester card to prevent CSS injection via url() context breakout - Sync SW token removal in RealmResource.logout() so reauthenticate() doesn't leave stale tokens in the service worker Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Cross-origin <img> requests default to credentials: 'include'. When constructing the new Request from the original, this gets inherited. With mode: 'cors' + credentials: 'include', the browser requires Access-Control-Allow-Origin to be a specific origin, but the realm server uses '*'. Explicitly set credentials: 'same-origin' to avoid this incompatibility. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

The regex /["'();]/ confused glint's parser due to quotes inside the regex literal. Use new RegExp() constructor instead. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

lukemelia and others added 4 commits February 9, 2026 17:00

lukemelia requested review from a team, Copilot and jurgenwerk February 9, 2026 22:53

lukemelia mentioned this pull request Feb 9, 2026

Add authenticated image display via read-only auth cookie #3943

Closed

6 tasks

Copilot started reviewing on behalf of lukemelia February 9, 2026 22:55 View session

lukemelia force-pushed the cs-10159-authenticated-image-display-via-service-worker-auth branch from 9c57be5 to 3bddb67 Compare February 9, 2026 22:56

Copilot AI reviewed Feb 9, 2026

View reviewed changes

backspace approved these changes Feb 10, 2026

View reviewed changes

lukemelia and others added 3 commits February 9, 2026 19:53

Fix glint parse error: avoid regex literal in .gts template file

a9c4d4d

The regex /["'();]/ confused glint's parser due to quotes inside the regex literal. Use new RegExp() constructor instead. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

lukemelia merged commit a92e236 into main Feb 10, 2026
117 of 119 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add service worker for authenticated image loading#3966

Add service worker for authenticated image loading#3966
lukemelia merged 8 commits intomainfrom
cs-10159-authenticated-image-display-via-service-worker-auth

lukemelia commented Feb 9, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Feb 9, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Feb 9, 2026 •

edited

Loading

Uh oh!

backspace left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

lukemelia commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

How it works

Key files

Test plan

Uh oh!

github-actions Bot commented Feb 9, 2026

Preview deployments

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Host Test Results

Uh oh!

backspace left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

lukemelia commented Feb 9, 2026 •

edited

Loading

github-actions Bot commented Feb 9, 2026 •

edited

Loading