fix: hide backend URL from logo by fetching as blob

Logo images were exposing the backend API URL in the DOM via <img src>.
Now preloadLogo() fetches the image as a blob and serves it through
URL.createObjectURL(), so only blob: URLs appear in the page source.
Blob is invalidated on logo upload/delete.
This commit is contained in:
Fringg
2026-02-08 17:40:24 +03:00
parent a449dd6981
commit de09ea039b
5 changed files with 53 additions and 33 deletions

View File

@@ -28,16 +28,19 @@ export interface AnalyticsCounters {
const BRANDING_CACHE_KEY = 'cabinet_branding'; const BRANDING_CACHE_KEY = 'cabinet_branding';
const LOGO_PRELOADED_KEY = 'cabinet_logo_preloaded'; const LOGO_PRELOADED_KEY = 'cabinet_logo_preloaded';
// In-memory blob URL cache to avoid exposing backend URL
let _logoBlobUrl: string | null = null;
// Check if logo was already preloaded in this session // Check if logo was already preloaded in this session
export const isLogoPreloaded = (): boolean => { export const isLogoPreloaded = (): boolean => {
try { try {
if (_logoBlobUrl) return true;
const cached = getCachedBranding(); const cached = getCachedBranding();
if (!cached?.has_custom_logo || !cached?.logo_url) { if (!cached?.has_custom_logo || !cached?.logo_url) {
return false; return false;
} }
const logoUrl = `${import.meta.env.VITE_API_URL || ''}${cached.logo_url}`;
const preloaded = sessionStorage.getItem(LOGO_PRELOADED_KEY); const preloaded = sessionStorage.getItem(LOGO_PRELOADED_KEY);
return preloaded === logoUrl; return preloaded === cached.logo_url;
} catch { } catch {
return false; return false;
} }
@@ -65,33 +68,42 @@ export const setCachedBranding = (branding: BrandingInfo) => {
} }
}; };
// Preload logo image for instant display // Preload logo image as blob to hide backend URL
export const preloadLogo = (branding: BrandingInfo): Promise<void> => { export const preloadLogo = async (branding: BrandingInfo): Promise<void> => {
return new Promise((resolve) => {
if (!branding.has_custom_logo || !branding.logo_url) { if (!branding.has_custom_logo || !branding.logo_url) {
resolve();
return; return;
} }
const logoUrl = `${import.meta.env.VITE_API_URL || ''}${branding.logo_url}`;
// Check if already preloaded in this session // Check if already preloaded in this session
const preloaded = sessionStorage.getItem(LOGO_PRELOADED_KEY); if (_logoBlobUrl) {
if (preloaded === logoUrl) {
resolve();
return; return;
} }
const img = new Image(); const preloaded = sessionStorage.getItem(LOGO_PRELOADED_KEY);
img.onload = () => { if (preloaded === branding.logo_url && _logoBlobUrl) {
sessionStorage.setItem(LOGO_PRELOADED_KEY, logoUrl); return;
resolve(); }
};
img.onerror = () => resolve(); try {
img.src = logoUrl; const logoUrl = `${import.meta.env.VITE_API_URL || ''}${branding.logo_url}`;
}); const response = await fetch(logoUrl);
if (!response.ok) return;
const blob = await response.blob();
// Revoke previous blob URL if exists
if (_logoBlobUrl) {
URL.revokeObjectURL(_logoBlobUrl);
}
_logoBlobUrl = URL.createObjectURL(blob);
sessionStorage.setItem(LOGO_PRELOADED_KEY, branding.logo_url);
} catch {
// Fetch failed, logo will use letter fallback
}
}; };
// Get the blob URL for the logo (safe, doesn't expose backend)
export const getLogoBlobUrl = (): string | null => _logoBlobUrl;
// Initialize logo preload from cache on page load // Initialize logo preload from cache on page load
export const initLogoPreload = () => { export const initLogoPreload = () => {
const cached = getCachedBranding(); const cached = getCachedBranding();
@@ -122,21 +134,29 @@ export const brandingApi = {
'Content-Type': 'multipart/form-data', 'Content-Type': 'multipart/form-data',
}, },
}); });
// Invalidate cached blob so it gets re-fetched
if (_logoBlobUrl) {
URL.revokeObjectURL(_logoBlobUrl);
_logoBlobUrl = null;
}
sessionStorage.removeItem(LOGO_PRELOADED_KEY);
return response.data; return response.data;
}, },
// Delete custom logo (admin only) // Delete custom logo (admin only)
deleteLogo: async (): Promise<BrandingInfo> => { deleteLogo: async (): Promise<BrandingInfo> => {
const response = await apiClient.delete<BrandingInfo>('/cabinet/branding/logo'); const response = await apiClient.delete<BrandingInfo>('/cabinet/branding/logo');
if (_logoBlobUrl) {
URL.revokeObjectURL(_logoBlobUrl);
_logoBlobUrl = null;
}
sessionStorage.removeItem(LOGO_PRELOADED_KEY);
return response.data; return response.data;
}, },
// Get logo URL (without cache busting - server handles caching via Cache-Control headers) // Get logo URL as blob (hides backend URL from DOM)
getLogoUrl: (branding: BrandingInfo): string | null => { getLogoUrl: (_branding: BrandingInfo): string | null => {
if (!branding.has_custom_logo || !branding.logo_url) { return _logoBlobUrl;
return null;
}
return `${import.meta.env.VITE_API_URL || ''}${branding.logo_url}`;
}, },
// Get animation enabled (public, no auth required) // Get animation enabled (public, no auth required)

View File

@@ -89,7 +89,7 @@ export function AppHeader({
queryFn: async () => { queryFn: async () => {
const data = await brandingApi.getBranding(); const data = await brandingApi.getBranding();
setCachedBranding(data); setCachedBranding(data);
preloadLogo(data); await preloadLogo(data);
return data; return data;
}, },
initialData: getCachedBranding() ?? undefined, initialData: getCachedBranding() ?? undefined,

View File

@@ -58,7 +58,7 @@ export function DesktopSidebar({
queryFn: async () => { queryFn: async () => {
const data = await brandingApi.getBranding(); const data = await brandingApi.getBranding();
setCachedBranding(data); setCachedBranding(data);
preloadLogo(data); await preloadLogo(data);
return data; return data;
}, },
initialData: getCachedBranding() ?? undefined, initialData: getCachedBranding() ?? undefined,

View File

@@ -23,7 +23,7 @@ export function useBranding() {
queryFn: async () => { queryFn: async () => {
const data = await brandingApi.getBranding(); const data = await brandingApi.getBranding();
setCachedBranding(data); setCachedBranding(data);
preloadLogo(data); await preloadLogo(data);
return data; return data;
}, },
initialData: getCachedBranding() ?? undefined, initialData: getCachedBranding() ?? undefined,

View File

@@ -79,7 +79,7 @@ export default function Login() {
queryFn: async () => { queryFn: async () => {
const data = await brandingApi.getBranding(); const data = await brandingApi.getBranding();
setCachedBranding(data); setCachedBranding(data);
preloadLogo(data); await preloadLogo(data);
return data; return data;
}, },
staleTime: 60000, staleTime: 60000,