Working with Content Security Policy

Introduction

This tutorial aims to provide a comprehensive understanding of Content Security Policy (CSP), a critical security feature used to mitigate Cross-Site Scripting (XSS) attacks. By the end of this guide, you will have a practical understanding of implementing CSP in your HTML headers to specify trusted sources of content.

What Will You Learn

• The basics of Content Security Policy (CSP)
• How to implement CSP using HTML headers
• Best practices for using CSP

Prerequisites

• Basic understanding of HTML
• Familiarity with HTTP headers

Step-by-Step Guide

CSP is an added layer of security that helps to detect and mitigate certain types of attacks, including XSS and data injection attacks. It is primarily implemented through a set of HTTP headers that allow you to specify which domains are considered safe sources of scripts, styles, images, or other resources.

Set Up CSP

To set up CSP on your website, you need to send the Content-Security-Policy HTTP header from your server. For example, to allow content from the same origin and allow scripts from trusted APIs, your HTTP header would look like this:

Content-Security-Policy: default-src 'self'; script-src 'self' api.example.com;

In this example, 'self' refers to the current domain.

CSP Directives

CSP provides a wide range of directives, like script-src, style-src, img-src, etc., that control various resource types. For instance, script-src is used to restrict where scripts can be loaded from.

Code Examples

Example 1: Basic Content Security Policy

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

This policy only allows resources from the site's own origin. This is a good default policy to prevent content loading from outside sources.

Example 2: Allowing Specific Domains

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

This policy allows images to be loaded from the site's origin and the specified domain.

Example 3: Allowing Inline Scripts

Content-Security-Policy: script-src 'self' 'unsafe-inline';

This policy allows scripts from the same origin and inline scripts. However, allowing 'unsafe-inline' can increase the risk of XSS attacks.

Summary

In this tutorial, we covered the basics of CSP, how to implement it using HTML headers, and best practices. The next step is to explore more complex CSP directives and how they can further enhance your website's security.

Practice Exercises

1. Implement a CSP that only allows scripts and styles from the same origin.
2. Extend the above policy to allow images from https://images.example.com.
3. Modify the policy to allow inline scripts.

Solutions

1. Content-Security-Policy: script-src 'self'; style-src 'self';
2. Content-Security-Policy: script-src 'self'; style-src 'self'; img-src 'self' https://images.example.com;
3. Content-Security-Policy: script-src 'self' 'unsafe-inline'; style-src 'self'; img-src 'self' https://images.example.com;

Remember, unsafe-inline can expose your site to XSS attacks. Always review your CSP policies to ensure they provide the right balance between functionality and security.

Additional Resources

• Content Security Policy (CSP) Quick Reference Guide
• Google Developers - Content Security Policy
• Mozilla - Implementing CSP