Content Security Policy (CSP) is an essential security feature that helps protect web applications from various attacks such as Cross-Site Scripting (XSS) and data injection attacks. One of the directives provided by CSP is connect-src, which controls the sources from which a web application can initiate connections. This article focuses on the connect-src directive, explaining its purpose, usage, and best practices for implementation.
What is connect-src?
The connect-src directive in CSP restricts the URLs which can be loaded using mechanisms like XMLHttpRequest (XHR), Fetch API, WebSockets, and EventSource. By specifying the allowed sources for these connections, connect-src helps prevent data exfiltration and other attacks that rely on making unauthorized requests from the browser.
Why is connect-src Important?
- Preventing Data Exfiltration: By controlling which URLs your application can connect to,
connect-srchelps ensure that sensitive data is not sent to malicious servers. - Mitigating Attacks: It reduces the risk of attacks that rely on making unauthorized requests, such as Cross-Site Scripting (XSS) and Cross-Site Request Forgery (CSRF).
- Enhancing Security Posture: Implementing a strict
connect-srcpolicy can significantly improve the overall security posture of a web application.
How Does connect-src Work?
When a browser encounters a connect-src directive in a CSP header, it checks whether the URLs used in connection mechanisms (like XHR, Fetch, WebSockets, and EventSource) match the sources specified. If a connection is attempted to a source not listed in the connect-src directive, the browser blocks the request and, if configured, logs the violation.
Example Usage of connect-src
Below are some examples demonstrating how to use the connect-src directive in different scenarios.
Example 1: Allowing Connections to Same Origin
This policy allows connections only to the same origin as the web application:
Content-Security-Policy: connect-src 'self';Example 2: Allowing Connections to Specific Domains
This policy allows connections to specific trusted domains:
Content-Security-Policy: connect-src 'self' https://api.example.com https://cdn.example.com;Example 3: Allowing WebSocket Connections
This policy allows WebSocket connections to a specific domain:
Content-Security-Policy: connect-src 'self' wss://ws.example.com;Example 4: Allowing Connections to Any HTTPS URL
This policy allows connections to any URL that uses HTTPS:
Content-Security-Policy: connect-src 'self' https:;Example 5: Using Wildcards
This policy allows connections to any subdomain of example.com:
Content-Security-Policy: connect-src 'self' https://*.example.com;Implementing connect-src in HTML
CSP can be implemented in HTML using the <meta> tag. This approach is useful for static websites or when you need to specify CSP directly in the HTML file.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example CSP</title>
<meta http-equiv="Content-Security-Policy" content="connect-src 'self' https://api.example.com https://cdn.example.com;">
</head>
<body>
<h1>Content Security Policy Example</h1>
<script>
// Example fetch request to allowed source
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));
</script>
</body>
</html>Configuring connect-src on the Server Side
For dynamic websites or when managing many pages, configuring CSP on the server side is more practical. Below is an example for configuring connect-src in Nginx.
Nginx Configuration:
To configure connect-src in Nginx, add the CSP header in your Nginx configuration file.
Example:
server {
listen 80;
server_name example.com;
location / {
add_header Content-Security-Policy "connect-src 'self' https://api.example.com https://cdn.example.com;";
# Other configurations...
}
}Handling Restrictions and Errors
When a connection attempt is blocked due to CSP restrictions, the browser will not execute the request and will log an error in the console. The exact error message can vary between browsers, but it typically indicates that the request has been blocked due to CSP.
Example of a CSP Violation Error:
Refused to connect to 'https://malicious.example.com' because it violates the following Content Security Policy directive: "connect-src 'self' https://api.example.com https://cdn.example.com".Monitoring and Reporting CSP Violations
To monitor CSP violations and understand where potential issues might be occurring, you can use the report-uri or report-to directive. This allows the browser to send reports of CSP violations to a specified endpoint.
Example:
Content-Security-Policy: connect-src 'self' https://api.example.com; report-uri /csp-violation-report-endpoint;On the server side, you would need to create an endpoint (/csp-violation-report-endpoint) to handle these reports. These reports can help you identify and address CSP violations.
Best Practices for Using connect-src
- Define Strict Policies: Start with a strict policy that only allows connections to trusted sources. Gradually relax the policy as necessary.
- Regularly Review Policies: Regularly review and update your
connect-srcpolicies to reflect changes in your web application and the external services it connects to. - Monitor Violations: Use the
report-uridirective to log CSP violations and monitor attempts to connect to unauthorized sources.
Example:
Content-Security-Policy: connect-src 'self' https://api.example.com; report-uri /csp-violation-report-endpoint;Conclusion
The connect-src directive in Content Security Policy (CSP) is a powerful tool for enhancing the security of web applications by controlling which sources can be used for connections. By specifying trusted sources and following best practices, you can prevent data exfiltration and reduce the risk of various attacks. Whether implemented in HTML meta tags or configured on the server side, connect-src helps define and enforce a secure policy for web applications.