Revision 1140245 of CSP: connect-src

<div>{{HTTPSidebar}}</div>

<p>The HTTP {{HTTPHeader("Content-Security-Policy")}} <code><strong>connect</strong></code><strong><code>-src</code></strong> directive restricts the&nbsp;URLs which can be loaded using script interfaces. The APIs that are restricted are:</p>

<ul>
 <li>{{HTMLElement("a")}} {{htmlattrxref("ping", "a")}},</li>
 <li>{{domxref("Fetch")}},</li>
 <li>{{domxref(" XMLHttpRequest")}},</li>
 <li>{{domxref(" WebSocket")}}, and</li>
 <li>{{domxref("EventSource")}}.</li>
</ul>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">CSP version</th>
   <td>1</td>
  </tr>
  <tr>
   <th scope="row">Directive type</th>
   <td>{{Glossary("Fetch directive")}}</td>
  </tr>
  <tr>
   <th scope="row">{{CSP("default-src")}} fallback</th>
   <td>Yes. If this directive is absent, the user agent will look for the <code>default-src</code> directive.</td>
  </tr>
 </tbody>
</table>

<h2 id="Syntax">Syntax</h2>

<p>One or more sources can be allowed for the connect-src policy:</p>

<pre class="syntaxbox">
Content-Security-Policy: child-src &lt;source&gt;;
Content-Security-Policy: child-src &lt;source&gt; &lt;source&gt;;
</pre>

<p>&lt;source&gt; can be one of the following:</p>

<dl>
 <dt>&lt;host-source&gt;</dt>
 <dd>Internet hosts by name or IP address, as well as an optional <a href="/en-US/docs/URIs_and_URLs">URL scheme</a> and/or port number. The site's address may include an optional leading wildcard (the asterisk character, <code>'*'</code>), and you may use a wildcard (again, <code>'*'</code>) as the port number, indicating that all legal ports are valid for the source.<br />
 Examples:
 <ul>
  <li><code>http://*.example.com</code>: Matches all attempts to load from any subdomain of example.com using the <code>http:</code> URL scheme.</li>
  <li><code>mail.example.com:443</code>: Matches all attempts to access port 443 on mail.example.com.</li>
  <li><code>https://store.example.com</code>: Matches all attempts to access store.example.com using <code>https:</code>.</li>
 </ul>
 </dd>
 <dt>&lt;scheme-source&gt;</dt>
 <dd>A schema such as 'http:' or 'https:'. The colon is required. You can also specify data schemas (not recommended).
 <ul>
  <li>'<code>data:</code>' Allows <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URIs</a> to be used as a content source.<em> This is insecure; an attacker can also inject arbitrary data: URIs. Use this sparingly and definitely not for scripts.</em></li>
  <li><code>'mediastream:'</code> Allows <a href="/en-US/docs/Web/API/MediaStream_API"><code>mediastream:</code> URIs</a> to be used as a content source.</li>
  <li><code>'blob:'</code> Allows <a href="/en-US/docs/Web/API/Blob"><code>blob:</code> URIs</a> to be used as a content source.</li>
  <li><code>'filesystem:'</code> Allows <a href="/en-US/docs/Web/API/FileSystem"><code>filesystem:</code> URIs</a> to be used as a content source.</li>
 </ul>
 </dd>
 <dt><code>'self'</code></dt>
 <dd>Refers to the origin from which the protected document is being served, including the same URL scheme and port number. You must include the single quotes. Some browsers specifically exclude <code>blob</code> and <code>filesystem</code> from source directives. Sites needing to allow these content types can specify them using the Data attribute.</dd>
 <dt><code>'unsafe-inline'</code></dt>
 <dd>Allows the use of inline resources, such as inline {{HTMLElement("script")}} elements, <code>javascript:</code> URLs, inline event handlers, and inline {{HTMLElement("style")}} elements. You must include the single quotes.</dd>
 <dt><code>'unsafe-eval'</code></dt>
 <dd>Allows the use of <code>eval()</code> and similar methods for creating code from strings. You must include the single quotes.</dd>
 <dt><code>'none'</code></dt>
 <dd>Refers to the empty set; that is, no URLs match. The single quotes are required.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<h3 id="Violation_cases">Violation cases</h3>

<p>Given this CSP header:</p>

<pre class="brush: bash">
Content-Security-Policy: connect-src https://example.com/</pre>

<p>This following connections are blocked and won't load:</p>

<pre class="brush: html">
&lt;a ping="https://not-example.com"&gt;

&lt;script&gt;
  var xhr = new XMLHttpRequest(); 
  xhr.open('GET', 'https://not-example.com/'); 
  xhr.send();

  var ws = new WebSocket("https://not-example.com/");

  var es = new EventSource("https://not-example.com/"); 

  navigator.sendBeacon("https://not-example.com/", { ... });
&lt;/script&gt;</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{specName("CSP 3.0")}}</td>
   <td>{{Spec2('CSP 3.0')}}</td>
   <td>No changes.</td>
  </tr>
  <tr>
   <td>{{specName("CSP 1.0")}}</td>
   <td>{{Spec2('CSP 1.0')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>

<p>{{Compat}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{HTTPHeader("Content-Security-Policy")}}</li>
 <li>{{HTMLElement("a")}} {{htmlattrxref("ping", "a")}}</li>
 <li>{{domxref("Fetch")}}</li>
 <li>{{domxref(" XMLHttpRequest")}}</li>
 <li>{{domxref(" WebSocket")}}</li>
 <li>{{domxref("EventSource")}}</li>
</ul>