Dev: Helmet CSP blocks Vite HMR WebSocket in development #131

New Issue

Closed

opened 2026-05-17 21:28:14 -05:00 by null · 0 comments

null commented

2026-05-17 21:28:14 -05:00

Owner

Problem

Helmet CSP is always enabled, including in development. The CSP connect-src is set to 'self' only.

Vite HMR uses a WebSocket connection to localhost (usually ws://localhost:5173 or a random port), which would be blocked by connect-src: 'self' when the Express server is serving the page on port 3001.

In practice, Vite's proxy config in vite.config.js proxies /api to localhost:3001, so the dev server handles HMR on port 5173. This means CSP from the Express server is not applied during development (the Vite dev server doesn't use Helmet).

So this is NOT currently a bug in dev, but if someone tries to run the built version with HMR or hot reloading, it would fail.

Fix

Either:

A) Disable Helmet in development (recommended): add if (process.env.NODE_ENV !== 'production') app.disable('content-security-policy')
B) Add ws://localhost:* and http://localhost:* to connect-src in development

Files

server/index.js — Helmet middleware

Severity

Low — not currently affecting development, but CSP should be dev-adjustable

## Problem Helmet CSP is always enabled, including in development. The CSP connect-src is set to 'self' only. Vite HMR uses a WebSocket connection to localhost (usually ws://localhost:5173 or a random port), which would be blocked by connect-src: 'self' when the Express server is serving the page on port 3001. In practice, Vite's proxy config in vite.config.js proxies /api to localhost:3001, so the dev server handles HMR on port 5173. This means CSP from the Express server is not applied during development (the Vite dev server doesn't use Helmet). So this is NOT currently a bug in dev, but if someone tries to run the built version with HMR or hot reloading, it would fail. ## Fix Either: - A) Disable Helmet in development (recommended): add `if (process.env.NODE_ENV !== 'production') app.disable('content-security-policy')` - B) Add ws://localhost:* and http://localhost:* to connect-src in development ## Files - server/index.js — Helmet middleware ## Severity Low — not currently affecting development, but CSP should be dev-adjustable