Content Security Policy (CSP)
Quick Reference Guide


The connect-src Directive

The connect-src Content Security Policy (CSP) directive guards the several browsers mechanisms that can fetch HTTP Requests. This includes XMLHttpRequest (AJAX), WebSocket, fetch(), <a ping> or EventSource.

Web Browsers have several mechanisms to invoke HTTP requests from script, and CSP has the sovereignty to control the endpoints that can be requested.

What about CORS and the Same Origin Policy?

The connect-src CSP directive does not interfeer Cross-Origin Resource Sharing (CORS) headers, so the same origin policy still applies.

XMLHttpRequests or AJAX and CSP

In most cases you will be making XMLHttpRequests to the same origin (the same domain and scheme), for example:

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api.json');
xhr.send();

In that case you will only need to set the connect-src directive to 'self':

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

What about requesting another domain?

If you are attempting to request a domain using XMLHttpRequest that is not the same origin, then you will need to specify that domain in the connect-src directive. Due to the browsers Same Origin policy, you will also need to ensure that the proper CORS headers have been set to allow your domain to connect to the third party domain.

For example supplse we are making an XMLHttpRequest to api.example.com from app.example.com:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/api.json');
xhr.send();

First you will need to have api.example.com in your connect-src directive.

Content-Security-Policy: connect-src 'self' https://api.example.com;

If we forgot to do this our request would fail with something like this in the developer tools console:

Refused to connect to 'https://api.example.com' because it violates the following content security policy directive: "connect-src 'self'"

Next the api.example.com server needs to permit app.example.com via a CORS Access-Control-Allow-Origin header. For example:

Access-Control-Allow-Origin: https://app.example.com

What happens when a request violates the connect-src directive?

When a resources is blocked due to connect-src the browser emulates a 400 HTTP status code.

What else does connect-src apply to?

Besides XMLHttpRequest or ajax calls, the connect-src directive also applies to the following browser mechanisms:

Fetch API

The connect-src CSP directive applies to the fetch() api.

var promise = fetch('https://api.example.com/api.json');

Beacon API

When using the Beacon API, the CSP connect-src directive applies.

navigator.sendBeacon('https://example.com/endpoint', data);

EventSource API

The EventSource API will also fall under the control of the connect-src CSP directive.

var es = new EventSource('https://example.com/');

WebSockets

The use of WebSockets is controlled by the connect-src directive.

var ws = new WebSocket('wss://ws.example.com/');

Anchor Tag ping Attribute

When using the ping attribute of the a tag, you must specify the endpoint in the connect-src CSP directive.

<a href="https://example.com/" ping="https://log.example.com/ping">Go</a>

Does connect-src inherit from default-src?

If you do not specify a connect-src directive, but do specify a default-src directive then the value of the default-src directive is used.

Browser Support for connect-src

CSP Level 1


Supported On:


Chrome 25+ (2013)
Firefox 23+ (2013)
Safari 7+ (2013)
Edge 12+ (2015)


Not Supported On:


Internet Explorer

The CSP connect-src directive has been part of the Content Security Policy Specification since the first version of it (CSP Level 1).

Internet Explorer 11 and below do not support the CSP connect-src directive. This means that IE11 will simply ignore the policy and allow AJAX requests as long as allowed by CORS.