Vue

Single Page Applications have a unique relationship with CSP. The development workflow depends on things CSP doesn’t like — eval for HMR, inline styles for CSS-in-JS, dynamic script loading. But in production, SPAs actually benefit enormously from CSP because they’re JavaScript-heavy. Here are configurations that work for each major framework, based on production deployments. React (Vite) Vite is the recommended build tool for new React projects. Development // vite.config.js export default defineConfig({ plugins: [react()], server: { headers: { 'Content-Security-Policy': "default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https: blob:; font-src 'self'; connect-src 'self' ws:; frame-ancestors 'none'" } } }); ```text You need `unsafe-eval` for Vite's hot module replacement. You need `ws:` in connect-src for the WebSocket connection Vite uses to push HMR updates. You need `blob:` in img-src because some bundlers use blob URLs for certain assets. These are development-only concessions. In production, you can be much stricter. ### Production Deploy via Nginx or your reverse proxy: location / { add_header Content-Security-Policy “default-src ‘self’; script-src ‘self’; style-src ‘self’ ‘unsafe-inline’; img-src ‘self’ data: https: blob:; font-src ‘self’; connect-src ‘self’ https://api.yoursite.com; frame-ancestors ’none’; base-uri ‘self’” always; try_files $uri $uri/ /index.html; } ...