Skip to content
Header Hawk

connect-src

connect-src governs script-initiated network requests rather than resource loads. It is the directive that decides which APIs your front end may call and which analytics endpoints it may report to.

It is also where a report-only rollout is most likely to surprise you, because third-party SDKs open connections you never wrote.

Syntax

Section titled “Syntax”
Content-Security-Policy: connect-src 'none';
Content-Security-Policy: connect-src <source-expression-list>;

What it controls

Section titled “What it controls”
  • fetch() and fetchLater().
  • XMLHttpRequest.
  • WebSocket.
  • EventSource.
  • navigator.sendBeacon().
  • The ping attribute on <a>.

Fallback

Section titled “Fallback”

If connect-src is absent, the browser consults default-src. The full chain is connect-src → default-src.

Section titled “Recommended value”
Content-Security-Policy: connect-src 'self' https://api.example.com
  • List every API origin explicitly. This is the directive where an allowlist genuinely works, because the set of hosts a front end calls is small and known.
  • WebSocket origins need their own entry: connect-src 'self' does not reliably cover wss:// in every browser, so write wss://api.example.com alongside the HTTPS origin.

Examples

Section titled “Examples”

Allowed

Section titled “Allowed”

Under connect-src 'self' https://api.example.com:

await fetch("https://api.example.com/v1/orders");

Blocked

Section titled “Blocked”

Under connect-src 'self', an SDK’s telemetry beacon:

navigator.sendBeacon("https://telemetry.vendor.example/ingest", payload);

Browser support

Section titled “Browser support”
  • Widely available across browsers since November 2016.
  • 'self' does not resolve to WebSocket schemes in all browsers. List wss://your-origin explicitly rather than relying on it.

In a HeaderHawk report

Section titled “In a HeaderHawk report”
Field Value
violatedDirective connect-src
effectiveDirective connect-src
blockedUri https://telemetry.vendor.example/ingest, wss://socket.vendor.example/
Issue title connect-src blocking telemetry.vendor.example
  • Browsers report the request’s origin rather than its full path for cross-origin connections in some cases, so the blockedUri you see may be shorter than the URL the code used. HeaderHawk groups on the host either way.
  • A connect-src issue whose document URLs are spread evenly across the whole site is almost always a globally loaded SDK; one confined to a handful of pages is a feature.
Section titled “Related directives”

Getting reports for this directive

Section titled “Getting reports for this directive”

Point your policy’s report-uri at your site’s HeaderHawk endpoint and the violations above arrive in the dashboard, grouped as described. The Quick Start sets that up in five minutes, and the integration guides cover the header syntax for each platform.