The connect-src Directive

Web Browsers have several mechanisms to invoke HTTP requests from script, and CSP has the sovereignty to control the endpoints that can be requested. The connect-src csp directive can restrict which URLs are allowed to be passed to fetch(), XMLHttpRequest, WebSocket, anchor ping's or EventSources.

What about CORS and the Same Origin Policy?

The connect-src CSP directive does not interfere Cross-Origin Resource Sharing (CORS) headers, so the same origin policy still applies. This means that you cannot use the connect-src CSP directive to bypass CORS, the Cross-Origin resource still needs to supply the correct CORS headers. The CSP connect-src directive can however restrict the URLs which could potentially make a cross origin request via one of the covered methods.

XMLHttpRequests (XHR) 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 suppose 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.

You might see something like this in your browser's console when a connect-src policy is violated:

because it violates the following content security policy directive: "connect-src 'self'

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

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.

CSP Developer Field Guide

Want to learn the ins and outs CSP? Grab a copy of the CSP Developer Field Guide. It's a short and sweet guide to help developers get up to speed quickly.

Grab a Copy