운영 보안을 보존하여 빌드 개선 배포본 통합

app/game-frontend/src/stores/mainDashboard.ts

@@ -1,3 +1,4 @@
+import { createAuthenticatedEventSource, type AuthenticatedEventSource } from '../utils/authenticatedEventSource';
 import { receiveClockEngineState } from '../composables/useClockDisplay';
 import { computed, ref, toRaw, watch } from 'vue';
 import { defineStore } from 'pinia';
@@ -1139,16 +1140,15 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
         }
     };
 
-    let realtimeSource: EventSource | null = null;
+    let realtimeSource: AuthenticatedEventSource | null = null;
     let realtimeToken: string | null = null;
     let visibilityListenerInstalled = false;
 
     const isAccessToken = (token: string | null): boolean => Boolean(token?.startsWith('ga_'));
 
-    const buildRealtimeUrl = (token: string): string => {
+    const buildRealtimeUrl = (): string => {
         const base = gameFrontendRuntimeConfig.gameSseUrl;
         const url = new URL(base, window.location.origin);
-        url.searchParams.set('token', token);
         return url.toString();
     };
 
@@ -1284,15 +1284,22 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
         realtimeToken = token;
         realtimeStatus.value = 'idle';
 
-        const source = new EventSource(buildRealtimeUrl(token));
+        let needsRecovery = false;
+        const source = createAuthenticatedEventSource(buildRealtimeUrl(), token);
         realtimeSource = source;
 
         source.addEventListener('open', () => {
             markGameServerContact();
             realtimeStatus.value = 'connected';
             realtimeCoordinator?.postFromLeader({ kind: 'status', status: 'connected' });
+            if (needsRecovery) {
+                needsRecovery = false;
+                realtimeRefreshQueue.request();
+            }
         });
-        source.addEventListener('error', () => {
+        source.addEventListener('error', (event) => {
+            if (event.code === 401) void session.refreshGeneralStatus();
+            needsRecovery = true;
             realtimeStatus.value = realtimeEnabled.value ? 'idle' : 'paused';
             realtimeCoordinator?.postFromLeader({ kind: 'status', status: 'idle' });
         });

app/game-frontend/src/stores/tournamentPages.ts

@@ -1,3 +1,4 @@
+import { createAuthenticatedEventSource, type AuthenticatedEventSource } from '../utils/authenticatedEventSource';
 import { defineStore } from 'pinia';
 import { ref, watch } from 'vue';
 import type { PublicRealtimeEvent, TournamentViewInvalidation } from '@sammo-ts/common';
@@ -49,7 +50,7 @@ export const useTournamentPagesStore = defineStore('tournamentPages', () => {
     const realtimeStatus = ref<'idle' | 'connected'>('idle');
 
     let activeConsumers = 0;
-    let realtimeSource: EventSource | null = null;
+    let realtimeSource: AuthenticatedEventSource | null = null;
     let realtimeToken: string | null = null;
     let realtimeCoordinator: BroadcastTabCoordinator<TournamentTabMessage> | null = null;
     let realtimeCoordinatorScope: string | null = null;
@@ -136,10 +137,9 @@ export const useTournamentPagesStore = defineStore('tournamentPages', () => {
         if (!(await session.exchangeGatewayToken())) return null;
         return session.gameToken && isAccessToken(session.gameToken) ? session.gameToken : null;
     };
-    const buildRealtimeUrl = (token: string): string => {
+    const buildRealtimeUrl = (): string => {
         const base = gameFrontendRuntimeConfig.gameSseUrl;
         const url = new URL(base, window.location.origin);
-        url.searchParams.set('token', token);
         url.searchParams.set('scope', 'tournament');
         return url.toString();
     };
@@ -181,7 +181,7 @@ export const useTournamentPagesStore = defineStore('tournamentPages', () => {
         if (realtimeSource && realtimeToken === token) return;
         closeRealtimeSource();
         realtimeToken = token;
-        const source = new EventSource(buildRealtimeUrl(token));
+        const source = createAuthenticatedEventSource(buildRealtimeUrl(), token);
         realtimeSource = source;
         source.addEventListener('open', () => {
             realtimeStatus.value = 'connected';
@@ -196,7 +196,8 @@ export const useTournamentPagesStore = defineStore('tournamentPages', () => {
                 });
             }
         });
-        source.addEventListener('error', () => {
+        source.addEventListener('error', (event) => {
+            if (event.code === 401) void session.refreshGeneralStatus();
             needsRecovery = true;
             realtimeStatus.value = 'idle';
             realtimeCoordinator?.postFromLeader({ kind: 'status', status: 'idle' });

app/game-frontend/src/utils/authenticatedEventSource.ts

@@ -0,0 +1,26 @@
+import { EventSource } from 'eventsource';
+
+export type AuthenticatedEventSource = EventSource;
+
+/** Keep the access token out of browser/proxy URLs and ambient cookies. */
+export const createAuthenticatedEventSource = (url: string, accessToken: string): EventSource => {
+    const destination = new URL(url);
+    if (destination.searchParams.has('token') || destination.username || destination.password) {
+        throw new Error('Realtime credentials must use the authorization header.');
+    }
+    return new EventSource(destination, {
+        maxBufferSize: 64 * 1024,
+        fetch: (input, init) => {
+            const headers = new Headers(init?.headers);
+            headers.set('Authorization', `Bearer ${accessToken}`);
+            return fetch(input, {
+                ...init,
+                headers,
+                credentials: 'omit',
+                redirect: 'error',
+                cache: 'no-store',
+                referrerPolicy: 'no-referrer',
+            });
+        },
+    });
+};