CSP

Content Security Policy (CSP) is a security feature implemented by web browsers to prevent certain types of attacks, such as Cross-Site Scripting (XSS) and data injection attacks. It allows website administrators to control which resources (e.g., scripts, styles, images) can be loaded and executed on a web page.

---

How CSP Works

CSP is implemented by sending an HTTP header (Content-Security-Policy) from the server to the browser. This header defines a whitelist of trusted sources for different types of content. If a resource is not from a trusted source, the browser blocks it.

---

Key Directives in CSP

CSP directives specify the allowed sources for different types of content. Some common directives include:

Directive	Description
default-src	Fallback for other directives if not explicitly specified.
script-src	Specifies allowed sources for JavaScript.
style-src	Specifies allowed sources for CSS.
img-src	Specifies allowed sources for images.
font-src	Specifies allowed sources for fonts.
connect-src	Specifies allowed sources for network requests (e.g., fetch, XMLHttpRequest).
frame-src	Specifies allowed sources for embedded frames (e.g., <iframe>).
base-uri	Restricts the URLs that can be used in a <base> tag.
form-action	Restricts the URLs that can be used as form actions.
report-uri	Specifies a URL to send violation reports (used for debugging).

---

Examples of CSP

Example 1: Basic CSP

Allow resources only from the same origin:

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

• 'self' means the same origin as the website.

• Blocks all external scripts, styles, images, etc.

Example 2: Allow Specific External Sources

Allow scripts from the same origin and https://trusted.cdn.com:

Content-Security-Policy: script-src 'self' https://trusted.cdn.com;

• Allows scripts from the website itself and https://trusted.cdn.com.

• Blocks scripts from all other sources.

Example 3: Allow Inline Scripts and Styles

Allow inline scripts and styles (not recommended for security reasons):

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

• 'unsafe-inline' allows inline scripts and styles.

• This can make the site vulnerable to XSS attacks.

Example 4: Block All Resources

Block all resources (useful for testing or strict policies):

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

• Blocks everything (scripts, styles, images, etc.).

Example 5: Report-Only Mode

Monitor violations without enforcing the policy:

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-violation-report-endpoint;

• Violations are reported to /csp-violation-report-endpoint but not blocked.

---

Benefits of CSP

1. Prevents XSS Attacks:

   • Blocks unauthorized scripts from executing on the page.

2. Controls Resource Loading:

   • Ensures only trusted sources can load resources.

3. Reduces Data Injection Risks:

   • Prevents malicious content from being injected into the page.

4. Improves Security:

   • Adds an additional layer of protection against common web vulnerabilities.

---

Example of CSP in Action

Scenario:

A website wants to allow:

• Scripts from its own domain and https://trusted.cdn.com.

• Styles from its own domain.

• Images from any source.

• Block everything else.

CSP Header:

Content-Security-Policy: 
  default-src 'none'; 
  script-src 'self' https://trusted.cdn.com; 
  style-src 'self'; 
  img-src *;

Result:

• Scripts from https://trusted.cdn.com are allowed.

• Inline scripts and styles are blocked.

• Images from any source are allowed.

• All other resources are blocked.

---

Common CSP Keywords

Keyword	Description
'self'	Allows resources from the same origin.
'none'	Blocks all resources.
'unsafe-inline'	Allows inline scripts and styles (not recommended).
'unsafe-eval'	Allows dynamic code evaluation (e.g., eval(), not recommended).
*	Allows resources from any source.
https:	Allows resources only from HTTPS sources.

---

Debugging CSP

Use the report-uri or report-to directive to log CSP violations:

Content-Security-Policy: default-src 'self'; report-uri /csp-violation-report-endpoint;

• Violations are sent as JSON to the specified endpoint for analysis.

---

Summary

• CSP is a security feature that controls which resources can be loaded and executed on a web page.

• It is implemented via the Content-Security-Policy HTTP header.

• CSP helps prevent XSS, data injection, and other attacks by restricting resource loading.

• Use directives like script-src, style-src, and img-src to define allowed sources.

• Always test CSP policies in report-only mode before enforcing them.