Implementing a Basic Content Security Policy (CSP)

Introduction

Content Security Policy (CSP) is a security feature that helps prevent a variety of attacks such as Cross-Site Scripting (XSS) and data injection attacks. This lesson covers how to implement a basic CSP in your web applications to enhance security.

What is CSP?

CSP is a HTTP header that allows web developers to control resources the user agent is allowed to load for a given page. It is a critical part of the web security model.

How to Implement CSP

To implement CSP, you need to add the appropriate HTTP headers to your web application. Below is a step-by-step guide:

1. Determine the resources your application needs to load.
2. Define a CSP policy that includes allowed sources for scripts, styles, images, etc.
3. Add the CSP policy to your server configuration or as a meta tag in your HTML.

Step 1: Define Your CSP Policy

An example of a basic CSP policy is:

Content-Security-Policy: default-src 'self'; img-src https://example.com; script-src 'self' https://apis.example.com;
            

This policy allows content to be loaded only from the same origin (self), images from https://example.com, and scripts from the same origin and https://apis.example.com.

Step 2: Add CSP to Your Server

Depending on your server, add the CSP header as follows:

• For Apache:

  
  Header set Content-Security-Policy "default-src 'self';"
                  

• For Nginx:

  
  add_header Content-Security-Policy "default-src 'self';";
                  

• For HTML Meta Tag:

  
  <meta http-equiv="Content-Security-Policy" content="default-src 'self';">
                  

Best Practices

When implementing CSP, consider the following best practices:

• Start with a report-only policy to identify issues without blocking content.
• Gradually tighten your policy based on observed behaviors.
• Regularly review and update your CSP as your application evolves.

FAQ