What
Configure different Content Security Policy headers for development and production environments to accommodate development tools while maintaining security in production.
Why
Development requires relaxed CSP (hot module replacement, dev tools, localhost connections) while production needs strict CSP. Using the same CSP in both environments either breaks dev or weakens prod security.
Scope
In scope:
- Development CSP: allow localhost, eval (for HMR), inline scripts
- Production CSP: strict source restrictions, no eval, no inline
- Configuration through Next.js middleware or config
- CSP report-only mode for initial deployment
Out of scope:
- CSP violation reporting endpoint
- Modifying application code for CSP
- Subresource integrity (SRI) setup
Acceptance Criteria
Technical Context
- Next.js config at
app/next.config.js
- Middleware at
app/src/middleware.ts
What
Configure different Content Security Policy headers for development and production environments to accommodate development tools while maintaining security in production.
Why
Development requires relaxed CSP (hot module replacement, dev tools, localhost connections) while production needs strict CSP. Using the same CSP in both environments either breaks dev or weakens prod security.
Scope
In scope:
Out of scope:
Acceptance Criteria
Technical Context
app/next.config.jsapp/src/middleware.ts