files/ja/web/http/headers/content-security-policy/connect-src/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

---
title: 'CSP: connect-src'
slug: Web/HTTP/Headers/Content-Security-Policy/connect-src
tags:
  - CSP
  - Content-Security-Policy
  - Directive
  - HTTP
  - Reference
  - Security
  - connect-src
  - source
  - セキュリティ
  - ディレクティブ
translation_of: Web/HTTP/Headers/Content-Security-Policy/connect-src
---
<div>{{HTTPSidebar}}</div>

<p>HTTP の {{HTTPHeader("Content-Security-Policy")}} (CSP) の <code><strong>connect-src</strong></code> ディレクティブは、スクリプトインターフェイスを使用して読み込むことができる URL を制限します。以下の API が制限の対象となります。</p>

<ul>
 <li>{{HTMLElement("a")}} の {{htmlattrxref("ping", "a")}} 属性</li>
 <li>{{domxref("Fetch")}}</li>
 <li>{{domxref("XMLHttpRequest")}}</li>
 <li>{{domxref("WebSocket")}}</li>
 <li>{{domxref("EventSource")}}</li>
 <li>{{domxref("Navigator.sendBeacon()")}}</li>
</ul>

<div class="note">
<p><strong>注:</strong> <code>connect-src 'self'</code> はすべてのブラウザーで websocket スキーマを解決するわけではありません、詳細はこちら: <a href="https://github.com/w3c/webappsec-csp/issues/7">https://github.com/w3c/webappsec-csp/issues/7</a></p>
</div>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">CSP バージョン</th>
   <td>1</td>
  </tr>
  <tr>
   <th scope="row">ディレクティブ種別</th>
   <td>{{Glossary("Fetch directive", "フェッチディレクティブ")}}</td>
  </tr>
  <tr>
   <th scope="row">{{CSP("default-src")}} による代替</th>
   <td>あり。このディレクティブがない場合、ユーザーエージェントは <code>default-src</code> ディレクティブを探します。</td>
  </tr>
 </tbody>
</table>

<h2 id="Syntax" name="Syntax">構文</h2>

<p>connect-src ポリシーには、1 つ以上のソースが許可されています。</p>

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

<h3 id="Sources" name="Sources">ソース</h3>

<p>{{page("/ja/docs/Web/HTTP/Headers/Content-Security-Policy/default-src", "common_sources")}}</p>

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

<h3 id="Violation_cases" name="Violation_cases">違反の場合</h3>

<p>以下の CSP ヘッダーを指定した場合、</p>

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

<p>以下のコネクションはブロックされ、読み込まれません。</p>

<pre class="brush: html notranslate">&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" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{specName("CSP 3.0", "#directive-connect-src", "connect-src")}}</td>
   <td>{{Spec2('CSP 3.0')}}</td>
   <td>変更なし</td>
  </tr>
  <tr>
   <td>{{specName("CSP 1.1", "#directive-connect-src", "connect-src")}}</td>
   <td>{{Spec2('CSP 1.1')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("http.headers.csp.Content-Security-Policy.connect-src")}}</p>

<h2 id="Compatibility_notes" name="Compatibility_notes">互換性のメモ</h2>

<ul>
 <li>Firefox 23 以前では、<code>xhr-src</code> が <code>connect-src</code> ディレクティブの代わりに、{{domxref("XMLHttpRequest")}} を制限するだけのために使用されていました。</li>
</ul>

<h2 id="See_also" name="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>