connect-src
Theconnect-src directive controls which network requests can be made using script interfaces like Fetch, XMLHttpRequest (XHR), WebSocket, and EventSource. This directive is crucial for securing your application's network communications.
Recommended Values
'self' Allows the resource to be loaded and executed
https://api.domain.com Allow specific API domains
Recommended connect-src configuration
Content-Security-Policy: connect-src 'self' https://api.example.com;Tips & Tricks
If connect-src is not defined, the default-src directive will be used.
Do not use unsafe-* values or broad keywords like 'data:' 'blob:' 'http:' 'https:' as it may introduce security vulnerabilities.
Possible Values
'none': Blocks all network requests'self': Allows requests to the same origin- URLs: Specific domains (e.g.,
https://api.example.com) - Schemes: Protocol schemes (e.g.,
https:,wss:) - Wildcards: Limited wildcard usage (e.g.,
https://*.example.com)
Example Configurations
Basic policy example
CSP Header with connect-src
Content-Security-Policy: connect-src 'self' https://api.example.com wss://websocket.example.com;Allowed
<!-- allowed by 'self' -->
<a href="/page.html">Page</a>
<!-- allowed by https://example.com -->
<a href="https://example.com/page.html">Page</a>Blocked
<!-- blocked as https://malicious.website.com is not in the allowed sources -->
<a ping="https://malicious.website.com">Page</a>
<!-- blocked -->
<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://malicious.website.com/');
xhr.send();
<!-- blocked -->
var ws = new WebSocket('https://malicious.website.com/');
<!-- blocked -->
var es = new EventSource('https://malicious.website.com/');
<!-- blocked -->
navigator.sendBeacon('https://malicious.website.com/', {...});
</script>Additional Information
- The
connect-srcdirective controls various networking APIs:- Fetch API
- XMLHttpRequest (XHR)
- WebSocket connections
- EventSource connections
- Beacon API
- It's essential for protecting against unauthorized data exfiltration
- When not specified, falls back to
default-srcdirective - Helps prevent Cross-Site Request Forgery (CSRF) attacks