Skip to content

csp.md

Latest commit

 

History

History
47 lines (41 loc) · 1.78 KB

csp.md

File metadata and controls

47 lines (41 loc) · 1.78 KB

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.