# Content Security Policy for Production

During development, CSP is disabled in `index.html` to avoid conflicts with browser extensions.

For production, configure CSP via server headers (nginx/CloudFlare):

```nginx
# nginx configuration
add_header Content-Security-Policy "
  default-src 'self';
  script-src 'self' 'unsafe-inline' 'unsafe-eval' https://js.stripe.com https://connect-js.stripe.com blob:;
  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
  font-src 'self' https://fonts.gstatic.com;
  img-src 'self' data: https:;
  connect-src 'self' https://api.stripe.com https://connect-js.stripe.com https://yourdomain.com;
  frame-src 'self' https://js.stripe.com https://connect-js.stripe.com;
" always;
```

## Why not in HTML meta tag?

1. **Browser extensions interfere**: Extensions inject their own CSP rules causing false errors
2. **Dynamic configuration**: Production domains differ from development (lvh.me vs yourdomain.com)
3. **Better control**: Server headers can vary by environment without changing source code
4. **Standard practice**: Industry best practice is CSP via headers, not meta tags

## Testing CSP

Test your production CSP at: https://csp-evaluator.withgoogle.com/