Csp

Generate Content Security Policy headers for a web application.

## Steps

1. Scan the project for frontend assets and their sources:
   - JavaScript files: inline scripts, external CDN scripts, dynamic imports.
   - CSS files: inline styles, external stylesheets, CSS-in-JS libraries.
   - Images: local assets, external image CDNs, data URIs.
   - Fonts: Google Fonts, self-hosted, CDN-hosted.
   - API calls: `fetch`, `XMLHttpRequest`, WebSocket connections.
   - Frames: iframes, embedded content.
2. Identify all external domains referenced in the codebase.
3. Build CSP directives:
   - `default-src`: Fallback policy.
   - `script-src`: JavaScript sources with nonce or hash strategy.
   - `style-src`: CSS sources.
   - `img-src`: Image sources.
   - `connect-src`: API endpoints, WebSocket URLs.
   - `font-src`: Font sources.
   - `frame-src`: Iframe sources.
   - `object-src`: Plugin sources (should be `'none'`).
4. Add reporting configuration: `report-uri` or `report-to`.
5. Generate both enforcing and report-only headers.
6. Output as HTTP header format and as meta tag format.

## Format

```
Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'nonce-{random}' https://cdn.example.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https://images.example.com;
  connect-src 'self' https://api.example.com;
  font-src 'self' https://fonts.gstatic.com;
  object-src 'none';
  frame-ancestors 'none';
  report-uri /csp-report;
```

## Rules

- Never use `unsafe-inline` for scripts; prefer nonces or hashes.
- Always include `object-src 'none'` and `frame-ancestors 'self'`.
- Start with a strict policy and relax only as needed.
- Provide a `Content-Security-Policy-Report-Only` header for testing.
- Document each allowed domain with a comment explaining why it is needed.