Content-Security-Policy

The Content-Security-Policy (CSP) HTTP header is a powerful security feature that helps prevent cross-site scripting (XSS) and other code injection attacks. By specifying a set of rules, you can control the resources that a user agent is allowed to load for a given page. This article will cover the basics of CSP, its directives, and provide examples of request and response headers.

Understanding Content-Security-Policy

CSP is designed to prevent content injection vulnerabilities by allowing you to define a whitelist of sources for various content types. This is achieved by setting a policy that restricts the sources of content such as scripts, styles, images, and more. When a user agent receives a page with a CSP header, it will only load resources from the allowed sources.

Directives in Content-Security-Policy

CSP consists of a series of directives that define the policy. Each directive is followed by a list of allowed sources. Some common directives include:

• default-src: Sets the default policy for fetching resources.
• script-src: Defines the allowed sources for loading scripts.
• style-src: Specifies the allowed sources for loading styles.
• img-src: Indicates the allowed sources for loading images.
• font-src: Lists the allowed sources for loading fonts.
• connect-src: Determines the allowed sources for connections made through XMLHttpRequest, WebSocket, or EventSource.
• frame-src: Specifies the allowed sources for loading iframes.

Example: Request and Response Headers

Consider the following example where a server sets a CSP header that only allows scripts, styles, and images to be loaded from the same origin:

Response Header:

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Security-Policy: default-src 'self'

In this example, the server sets the Content-Security-Policy header with a default-src directive that only allows resources to be loaded from the same origin ('self'). This means that scripts, styles, images, and other content types can only be loaded from the same domain as the page.

Now, let’s take a look at a more complex example that specifies different sources for various content types:

Response Header:

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Security-Policy: default-src 'self'; script-src 'self' ajax.googleapis.com; style-src 'self' fonts.googleapis.com; img-src 'self' data:; font-src 'self' fonts.gstatic.com

In this example, the server sets a CSP header with multiple directives:

• default-src 'self': By default, resources can only be loaded from the same origin.
• script-src 'self' ajax.googleapis.com: Scripts can be loaded from the same origin and ajax.googleapis.com.
• style-src 'self' fonts.googleapis.com: Styles can be loaded from the same origin and fonts.googleapis.com.
• img-src 'self' data:: Images can be loaded from the same origin and data URIs.
• font-src 'self' fonts.gstatic.com: Fonts can be loaded from the same origin and fonts.gstatic.com.

Summary

The Content-Security-Policy header is a powerful security feature that helps mitigate content injection vulnerabilities by allowing you to define a whitelist of sources for various content types. By understanding the various directives and how to set them, you can create a more secure environment for your web applications. Remember, it’s essential to test your CSP policies thoroughly to ensure that they don’t break the functionality of your site while providing the desired level of security.