mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-26 17:30:07 +00:00
[auth] add service worker on cloud distribution to attach auth header to browser native /view requests (#6139)
## Summary Added Service Worker to inject Firebase auth headers into browser-native `/api/view` requests (img, video, audio tags) for cloud distribution. ## Changes - **What**: Implemented [Service Worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) to intercept and authenticate media requests that cannot natively send custom headers - **Dependencies**: None (uses native Service Worker API) ## Implementation Details **Tree-shaking**: Uses compile-time `isCloud` constant - completely removed from localhost/desktop builds (verified via bundle analysis). Verify yourself by building the app and `grep -r "registerAuthServiceWorker\|setupAuth" dist/` **Caching**: 50-minute auth header cache with automatic invalidation on login/logout to prevent redundant token fetches. **Message Flow**: ```mermaid sequenceDiagram participant IMG as Browser participant SW as Service Worker participant MT as Main Thread participant FB as Firebase Auth IMG->>SW: GET /api/view/image.png SW->>SW: Check cache (50min TTL) alt Cache miss SW->>MT: REQUEST_AUTH_HEADER MT->>FB: getAuthHeader() FB-->>MT: Bearer token MT-->>SW: AUTH_HEADER_RESPONSE SW->>SW: Cache token end SW->>IMG: Fetch with Authorization header Note over SW,MT: On login/logout: INVALIDATE_AUTH_HEADER ``` ## Review Focus - **Same-origin mode**: Service Worker uses `mode: 'same-origin'` to allow custom headers (browser-native requests default to `no-cors` which strips headers) - **Request deduplication**: Prevents concurrent auth header requests from timing out - **Build verification**: Confirm `register-*.js` absent in localhost builds, present (~3.2KB) in cloud builds ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6139-auth-add-service-worker-on-cloud-distribution-to-attach-auth-header-to-browser-native--2916d73d3650812698dccd07d943ab3c) by [Unito](https://www.unito.io)
This commit is contained in:
9
src/platform/auth/serviceWorker/index.ts
Normal file
9
src/platform/auth/serviceWorker/index.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import { isCloud } from '@/platform/distribution/types'
|
||||
|
||||
/**
|
||||
* Auth service worker registration (cloud-only).
|
||||
* Tree-shaken for desktop/localhost builds via compile-time constant.
|
||||
*/
|
||||
if (isCloud) {
|
||||
void import('./register')
|
||||
}
|
||||
57
src/platform/auth/serviceWorker/register.ts
Normal file
57
src/platform/auth/serviceWorker/register.ts
Normal file
@@ -0,0 +1,57 @@
|
||||
import { watch } from 'vue'
|
||||
|
||||
import { useCurrentUser } from '@/composables/auth/useCurrentUser'
|
||||
import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
|
||||
|
||||
/**
|
||||
* Registers the authentication service worker for cloud distribution.
|
||||
* Intercepts /api/view requests to add auth headers for browser-native requests.
|
||||
*/
|
||||
async function registerAuthServiceWorker(): Promise<void> {
|
||||
if (!('serviceWorker' in navigator)) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await navigator.serviceWorker.register('/auth-sw.js')
|
||||
|
||||
setupAuthHeaderProvider()
|
||||
setupCacheInvalidation()
|
||||
} catch (error) {
|
||||
console.error('[Auth SW] Registration failed:', error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Listens for auth header requests from the service worker
|
||||
*/
|
||||
function setupAuthHeaderProvider(): void {
|
||||
navigator.serviceWorker.addEventListener('message', async (event) => {
|
||||
if (event.data.type === 'REQUEST_AUTH_HEADER') {
|
||||
const firebaseAuthStore = useFirebaseAuthStore()
|
||||
const authHeader = await firebaseAuthStore.getAuthHeader()
|
||||
|
||||
event.ports[0].postMessage({
|
||||
type: 'AUTH_HEADER_RESPONSE',
|
||||
authHeader
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Invalidates cached auth header when user logs in/out
|
||||
*/
|
||||
function setupCacheInvalidation(): void {
|
||||
const { isLoggedIn } = useCurrentUser()
|
||||
|
||||
watch(isLoggedIn, (newValue, oldValue) => {
|
||||
if (newValue !== oldValue) {
|
||||
navigator.serviceWorker.controller?.postMessage({
|
||||
type: 'INVALIDATE_AUTH_HEADER'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
void registerAuthServiceWorker()
|
||||
Reference in New Issue
Block a user