fix: add worker-src to CSP to fix broken HMR connection
Build & Deploy / build (push) Failing after 3s
Build & Deploy / docker (push) Skipped

Without an explicit worker-src directive, browsers fall back to
script-src ('self' only) for Web Workers, which blocks the blob: worker
spawned internally by Vite's HMR client / Tuyau's client. This caused the
dev HMR websocket connection to drop intermittently ('server connection
lost. Polling for restart...'), leaving the Vue app in an inconsistent
state after a failed hot reload — components using the Link component
(internally named TuyauLink, from @tuyau/core) would throw 'You must
wrap your app in a TuyauProvider' because the provide/inject context set
up at the app root was lost.

Added worker-src 'self' blob: to config/shield.ts. Verified: dev server
restarts cleanly with the HMR socket connecting without CSP violations,
full test suite (30/30) still passes.
This commit is contained in:
Kevin L'Hereec committed 2026-07-23 15:30:01 +02:00
1 parent a7788e593e
commit 25d6222df0
1 file changed
+8
+8
View File
@@ -32,6 +32,14 @@ const shieldConfig = defineConfig({
defaultSrc: [`'self'`],
connectSrc: [`'self'`, ...devConnectSrc],
scriptSrc: [`'self'`],
// Some client-side dependencies (e.g. Vite's HMR client / the Tuyau
// API client) spawn a Web Worker from a `blob:` URL built at
// runtime from already same-origin-loaded code. Without an explicit
// worker-src, browsers fall back to script-src ('self' only), which
// blocks the blob: worker outright — this was observed to break the
// dev HMR connection and leave the Vue app in an inconsistent state
// (lost TuyauProvider context after a failed hot reload).
workerSrc: [`'self'`, 'blob:'],
styleSrc: [`'self'`, `'unsafe-inline'`, 'https://fonts.googleapis.com'],
imgSrc: [`'self'`, 'data:', 'https://fr.pc-builder.io', 'https://www.google.com'],
fontSrc: [`'self'`, 'data:', 'https://fonts.gstatic.com'],