Content Security Policy: A Simple Guide

TL;DR

Content Security Policy (CSP) helps protect your website from attacks like cross-site scripting (XSS). It tells the browser which sources of content are allowed to load, blocking anything else. This guide shows you how to set it up and improve your cyber security.

1. What is Content Security Policy?

Imagine a bouncer for your website. CSP acts like that bouncer, only allowing trusted sources (like your own server or specific CDNs) to deliver content – scripts, images, styles, fonts etc. Anything not on the list gets blocked.

2. Why Use Content Security Policy?

• XSS Protection: The primary benefit is preventing XSS attacks where attackers inject malicious code into your site.
• Reduced Attack Surface: By limiting content sources, you reduce the potential ways an attacker can compromise your website.
• Reporting: CSP can report policy violations to a specified endpoint, helping you identify and fix issues.

3. Setting Up Content Security Policy

You implement CSP using an HTTP response header. There are two main ways:

3.1 Using the Content-Security-Policy Header

This is the preferred method. Add this header to your web server configuration (e.g., Apache, Nginx) or through your application code.

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

This example allows content only from your own domain (‘self’).

3.2 Using the Content-Security-Policy-Report-Only Header

Use this header to test CSP without blocking anything. It reports violations but doesn’t enforce the policy.

Content-Security-Policy-Report-Only: default-src 'self'

4. Common Directives

These directives control what types of content are allowed:

• default-src: Sets the default policy for all content types.
• script-src: Specifies valid sources for JavaScript files. Example: script-src 'self' https://trustedcdn.com
• style-src: Specifies valid sources for CSS stylesheets. Example: style-src 'self' https://fonts.googleapis.com
• img-src: Specifies valid sources for images. Example: img-src 'self' data: (allows images from your domain and base64 encoded images)
• font-src: Specifies valid sources for fonts. Example: font-src 'self' https://fonts.gstatic.com

5. Step-by-Step Implementation

1. Start with Report-Only Mode: Add the Content-Security-Policy-Report-Only header to your server configuration.
2. Monitor Reports: Configure a reporting endpoint (a URL on your server) to receive CSP violation reports. The browser will send JSON data about blocked resources to this endpoint.
3. Analyze Reports: Review the reports to identify legitimate content sources that are being blocked.
4. Refine Your Policy: Add these valid sources to your Content-Security-Policy header, gradually tightening the policy.
5. Switch to Enforcement Mode: Once you’re confident in your policy, remove the Content-Security-Policy-Report-Only header and use only the Content-Security-Policy header.

6. Example Policy

Content-Security-Policy: default-src 'self'; script-src 'self' https://trustedcdn.com; style-src 'self' https://fonts.googleapis.com; img-src 'self' data:; font-src 'self' https://fonts.gstatic.com

7. Tools and Resources

• CSP Evaluator: https://csp-evaluator.withgoogle.com/ – Helps you test your CSP configuration.
• Mozilla Developer Network (MDN): https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy – Comprehensive documentation on CSP directives.