# CSP Header Configuration Checklist

## Learn how to configure Content Security Policy headers to enhance your website's security against threats like XSS attacks.

.avif)

By Midday Staff

CSP headers are your website's security guard, ensuring only trusted resources load. Here's what you need to know:

- **What They Do**: CSP ( [Content Security Policy](https://en.wikipedia.org/wiki/Content_Security_Policy)) headers define rules for browsers, blocking harmful content like unauthorized scripts.
- **Why They Matter**: They prevent XSS attacks, protect sensitive data, and control resource loading.
- **How to Start**:

- List all external and internal resources your site uses.
  - Assess your security needs and risk levels.
  - Choose between HTTP headers (stronger) or meta tags (easier for testing).

**Quick Setup**:

1. Use directives like `default-src 'self'` to allow resources only from your domain.
2. Add specific rules for scripts, styles, images, and more.
3. Enable violation reporting to monitor and refine your policy.

**Pro Tip**: Start with `Report-Only` mode to test without blocking content. Regularly review reports to improve your CSP.

CSP headers are essential for modern web security. Ready to safeguard your site? Let’s dive in.

## Before You Start: CSP Setup Requirements

### Website Resource List

Organize your website's resources to avoid blocking important content.

1. **Document External Resources**

Create a list of all third-party resources your site relies on, such as:

- JavaScript libraries and frameworks
- Analytics tools
- Marketing pixels and tracking scripts
- Font providers
- CDN-hosted assets
- Media hosting services

2. **Map Internal Resources**

Identify and list all resources hosted on your own servers, including:

- Custom JavaScript files
- CSS stylesheets
- Image directories
- Web fonts
- Audio/video content
- Web worker scripts

3. **Review Integration Points**

Catalog all integration points your website uses, such as:

- API endpoints
- CRM connections
- Form submission targets
- Authentication services
- Payment gateways

### Security Goals Assessment

Evaluate your security needs based on the following:

**Risk Level Assessment**

- How your site handles user data
- Payment processing requirements
- Compliance with regulations like [GDPR](https://gdpr.eu/what-is-gdpr/) or [CCPA](https://en.wikipedia.org/wiki/California_Consumer_Privacy_Act)
- Industry-specific rules
- Past security incidents

**Feature Requirements**

- Use of inline scripts
- Dynamic style injections
- Frame embedding
- [WebSocket](https://en.wikipedia.org/wiki/WebSocket) connections
- Worker script usage

### Setup Method Selection

Pick the setup method that matches your deployment needs:

| Feature | HTTP Headers | Meta Tags |
| --- | --- | --- |
| **Browser Support** | Works across all modern browsers | Limited in older browsers |
| **Implementation** | Requires server-side configuration | Client-side, no server changes |
| **Flexibility** | Adjustable without redeploying code | Requires code deployment |
| **Report-URI Support** | Full support for reporting violations | Limited reporting options |
| **Load Time Impact** | Sent before content loads | Processed after HTML parsing |

**Key Points to Consider:**

- HTTP headers offer the strongest protection.
- Meta tags are easier for testing and quick deployment.
- Combining both methods can help with gradual implementation.
- Check if you have server configuration access.
- Factor in any deployment limitations.

Keep these essentials in mind as you set up CSP headers.

## CSP Header Setup Steps

### Basic Directives Setup

Set up the main Content Security Policy (CSP) directives directly in your server configuration or application code:

- **default-src Directive:** Acts as a fallback for all content types:

```http
default-src 'self';
```

- **script-src Directive:** Controls where JavaScript can be loaded from:

```http
script-src 'self' https://trusted-scripts.com;
```

- **style-src Directive:** Specifies allowed CSS sources:

```http
style-src 'self' https://fonts.googleapis.com;
```

- **img-src Directive:** Defines permitted image sources, including inline data URIs:

```http
img-src 'self' https://images.cdn.com data:;
```

- **connect-src Directive:** Limits network connections to trusted endpoints:

```http
connect-src 'self' https://api.example.com;
```

### Extra Directives Setup

Once the basic setup is complete, you can add more specific directives to improve security:

| Directive | Purpose | Example Value |
| --- | --- | --- |
| font-src | Controls font loading | `'self' https://fonts.gstatic.com` |
| frame-src | Manages frame embedding | `'self' https://trusted-frames.com` |
| media-src | Restricts media sources | `'self' https://media-cdn.com` |
| object-src | Blocks plugin content | `'none'` |
| script-src | Prevents inline scripts | `'self' 'nonce-randomString123'` |

### Violation Reporting Setup

To monitor and fine-tune your policy, set up violation reporting:

1. **Define a reporting endpoint:** Use the `report-uri` directive to specify where violation reports should be sent.

```http
report-uri https://your-domain.com/csp-reports;
```

2. **Test with Report-Only mode:** During testing, enable this mode to log violations without enforcing the policy:

```http
Content-Security-Policy-Report-Only: default-src 'self';
```

3. **Log detailed reports:** Configure your violation handler to capture key information such as:
   - Timestamp
   - Blocked resource URL
   - Violated directive
   - User agent
   - Page URL

Analyzing these reports helps you identify legitimate resources to whitelist while ensuring strong security. Regularly reviewing this data will also minimize false positives that could disrupt the user experience.

## CSP Header Verification

### Test Mode Setup

To monitor violations without blocking content, enable the `Content-Security-Policy-Report-Only` mode. This allows you to log issues for analysis:

```http
Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-violations;
```

Here's an example configuration:

```http
Content-Security-Policy-Report-Only:
    default-src 'self';
    report-uri /csp-violations;
    report-to csp-endpoint;
```

Once logging is enabled, use the collected data for further analysis as outlined below.

### Violation Report Analysis

When reviewing CSP violation reports, focus on the following key areas:

| Element | What to Check | Suggested Action |
| --- | --- | --- |
| Blocked URL | Source of the resource | Allow trusted sources in the policy |
| Directive | Specific policy rule | Adjust the scope of the directive |
| Agent | Browser and version info | Verify browser compatibility |
| Time | When the issue occurred | Look for recurring patterns |
| Page | Affected page or section | Pinpoint problematic areas |

### Policy Updates

Use the insights from your analysis to regularly update and fine-tune your CSP policy. Here's how to approach this:

- **Weekly Policy Review**

Examine violation trends and adjust policy directives to address recurring issues.

- **Infrastructure Assessment**

Evaluate the following areas to ensure alignment with your CSP policy:
  - Server settings
  - Cloud security configurations
  - CDN rules
  - Access controls for code repositories
- **Compliance Management**

Keep cookie tools, audit logs, and related policies up to date to address emerging threats.

Always apply changes in `report-only` mode first. This ensures that legitimate functionality remains unaffected while you test and refine your security measures.

## Conclusion

### Key Takeaways

- **CSP headers** play a crucial role in improving your site's security and meeting compliance standards.
- Regularly reviewing and updating policies helps maintain strong protection.

### Next Steps

Put these insights into action by actively managing your Content Security Policy (CSP).

To keep your CSP effective over time, make it a habit to review your server configurations, code, cloud settings, and CDN setups. This will help you address vulnerabilities quickly and keep your site secure.