Understanding Content Security Policy (CSP)

Introduction

Content Security Policy (CSP) is a powerful security mechanism that allows web developers to specify which sources are allowed to load resources on their website. By restricting the origin of resources, CSP helps protect against various attacks, such as Cross-Site Scripting (XSS) and data exfiltration.

How CSP Works

CSP is implemented through a meta-tag in the HTML header of a web page. The content of this meta-tag contains directives that define the allowed sources for loading resources. These directives typically specify the following:

• Source origin: The domain or host from which resources can be loaded.
• Protocol: The network protocol allowed for loading resources (e.g., HTTP or HTTPS).
• Port: The port number allowed for resource loading.
• Resource type: The specific resource type, such as scripts, stylesheets, images, or AJAX requests.

Using the Content-Security-Policy Header

The basic syntax of the Content-Security-Policy HTTP header is as follows:

Answering Specific Questions

1. Allowing Multiple Sources:

To allow multiple sources, simply separate them with a space in the content property:

content="default-src 'self' https://example.com/js/"

2. Using Different Directives:

Each directive specifies a specific resource type. Common directives include:

• default-src: Default policy for all resources
• script-src: Valid sources for JavaScript files
• style-src: Valid sources for CSS files
• img-src: Valid sources for images

3. Using Multiple Directives:

Multiple directives can be used by separating them with a semicolon (;):

content="default-src 'self'; style-src 'self'"

4. Handling Ports:

Ports must be explicitly allowed:

content="default-src 'self' https://example.com:123/"

5. Handling Different Protocols:

Protocols other than HTTP/HTTPS must be allowed explicitly:

content="connect-src ws:;"

6. Allowing File Protocol:

Allowing the file:// protocol requires using the filesystem parameter:

content="default-src filesystem"

7. Allowing Inline Styles and Scripts:

To allow inline content, use unsafe-inline:

content="script-src 'unsafe-inline'; style-src 'unsafe-inline'"

8. Allowing eval():

To allow eval(), use unsafe-eval:

content="script-src 'unsafe-eval'"

9. Meaning of 'self':

'self' refers to resources originating from the same scheme, host, and port as the page where the CSP policy is defined.

Conclusion

CSP is a powerful security measure that can protect websites from vulnerabilities by restricting the sources of loaded resources. Carefully understanding and implementing CSP policies is essential for ensuring the integrity and security of web applications.