Content Security Policy: Your Website's Unsung Hero

Content Security Policy (CSP) is an HTTP header that protects against attacks like XSS. It's a firewall for your browser, controlling allowed resources.

Why Use CSP?

CSP reduces the attack surface by whitelisting trusted sources for scripts, styles, images, etc. This prevents the browser from loading unauthorized content, stopping many XSS attempts.

Key CSP Directives

Here's a simplified overview:

1. default-src: The fallback source.
   

   Content-Security-Policy: default-src 'self';
   

*   `'self'`: Same origin (scheme + host + port). **Always define this.**

1. script-src: JavaScript sources.
   

   Content-Security-Policy: script-src 'self' https://cdn.example.com;
   

*   `'self'`: Your domain.
*   `https://cdn.example.com`: A trusted CDN (use HTTPS).
*   **Avoid**: `'unsafe-inline'`, `'unsafe-eval'`. Use nonces instead.

1. style-src: CSS sources.
   

   Content-Security-Policy: style-src 'self' https://fonts.googleapis.com;
   

*   `'self'`: Your domain.
*   `https://fonts.googleapis.com`: Google Fonts.
*   **Avoid**: `'unsafe-inline'`.

1. img-src: Image sources.
   

   Content-Security-Policy: img-src 'self' data: https://images.example.com;
   

*   `'self'`: Your domain.
*   `data:`: Data URIs (use sparingly).

1. font-src: Font sources.
   

   Content-Security-Policy: font-src 'self' https://fonts.gstatic.com;
   

*   `'self'`: Your domain.
*   `https://fonts.gstatic.com`: Google Fonts.

1. connect-src: AJAX/WebSocket sources.
   

   Content-Security-Policy: connect-src 'self' https://api.example.com wss://ws.example.com;
   

*   `'self'`: Your domain.
*   `https://api.example.com`: Your API.
*   `wss://ws.example.com`: Secure WebSockets (use `wss://`).

1. frame-src: Iframe sources.
   

   Content-Security-Policy: frame-src 'self' https://youtube.com;
   

2. worker-src: Web worker sources.
   

   Content-Security-Policy: worker-src 'self' blob:;
   

3. object-src: Plugin sources (deprecated).
   

   Content-Security-Policy: object-src 'none';
   

*   `'none'`: Disable plugins.

1. upgrade-insecure-requests: Enforce HTTPS.
   

   Content-Security-Policy: upgrade-insecure-requests;
   

2. report-to: Reporting violations.
   

   Report-To: {
     "group": "csp-endpoint",
     "max_age": 31536000,
     "endpoints": [{"url": "https://example.com/csp-report-endpoint"}]
   }
   Content-Security-Policy: report-to csp-endpoint;
   

Report-Only Mode

Use Content-Security-Policy-Report-Only to test without blocking.

Best Practices

• Start with default-src 'self'.
• Test in report-only mode.
• Monitor reports.
• Avoid 'unsafe-inline' and 'unsafe-eval'.
• Use HTTPS.

Example CSP

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.jsdelivr.net 'nonce-{random-nonce}' 'strict-dynamic';
  style-src 'self' https://fonts.googleapis.com 'unsafe-inline';
  img-src 'self' data: https://images.example.com;
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self' https://api.example.com wss://ws.example.com;
  frame-src 'self' https://youtube.com;
  object-src 'none';
  upgrade-insecure-requests;
  report-to csp-endpoint;

Conclusion

CSP is vital for web security. Understand the directives and protect your users.