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…


This content originally appeared on DEV Community and was authored by Simplr

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.


This content originally appeared on DEV Community and was authored by Simplr


Print Share Comment Cite Upload Translate Updates
APA

Simplr | Sciencx (2025-02-11T16:08:01+00:00) Content Security Policy: Your Website’s Unsung Hero. Retrieved from https://www.scien.cx/2025/02/11/content-security-policy-your-websites-unsung-hero/

MLA
" » Content Security Policy: Your Website’s Unsung Hero." Simplr | Sciencx - Tuesday February 11, 2025, https://www.scien.cx/2025/02/11/content-security-policy-your-websites-unsung-hero/
HARVARD
Simplr | Sciencx Tuesday February 11, 2025 » Content Security Policy: Your Website’s Unsung Hero., viewed ,<https://www.scien.cx/2025/02/11/content-security-policy-your-websites-unsung-hero/>
VANCOUVER
Simplr | Sciencx - » Content Security Policy: Your Website’s Unsung Hero. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/02/11/content-security-policy-your-websites-unsung-hero/
CHICAGO
" » Content Security Policy: Your Website’s Unsung Hero." Simplr | Sciencx - Accessed . https://www.scien.cx/2025/02/11/content-security-policy-your-websites-unsung-hero/
IEEE
" » Content Security Policy: Your Website’s Unsung Hero." Simplr | Sciencx [Online]. Available: https://www.scien.cx/2025/02/11/content-security-policy-your-websites-unsung-hero/. [Accessed: ]
rf:citation
» Content Security Policy: Your Website’s Unsung Hero | Simplr | Sciencx | https://www.scien.cx/2025/02/11/content-security-policy-your-websites-unsung-hero/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts