Revision 973587 of 同一オリジンポリシー

<p>同一生成元ポリシーによって、ある生成元から読み込まれた文書やスクリプトが、異なる生成元からの文書のプロパティを取得したり設定したりするのを防ぎます。これは、潜在的に悪意のある文書を隔離するための重要なセキュリティメカニズムです。</p>

<h2 id="Definition_of_an_origin" name="Definition_of_an_origin">生成元の定義</h2>

<p>もしプロトコル、(与えられていれば) ポート、及びホストが両方のページで同じならば、二つのページが同一生成元を持っていると見なします。説明するために、以下の表では URL <code>https://store.company.com/dir/page.html</code> との生成元の比較の例を挙げています。</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th>URL</th>
   <th>結果</th>
   <th>理由</th>
  </tr>
  <tr>
   <td><code>https://store.company.com/dir2/other.html</code></td>
   <td>成功</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td><code>https://store.company.com/dir/inner/another.html</code></td>
   <td>成功</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td><code>https://store.company.com/secure.html</code></td>
   <td>失敗</td>
   <td>異なるプロトコル</td>
  </tr>
  <tr>
   <td><code>https://store.company.com:81/dir/etc.html</code></td>
   <td>失敗</td>
   <td>異なるポート</td>
  </tr>
  <tr>
   <td><code>https://news.company.com/dir/other.html</code></td>
   <td>失敗</td>
   <td>異なるホスト</td>
  </tr>
 </tbody>
</table>

<p><a href="/ja/docs/Same-origin_policy_for_file:_URIs" title="Same-origin_policy_for_file:_URIs"><code>file:</code> URL の生成元の定義</a>もご覧ください。</p>

<h3 id="Inherited_origins" name="Inherited_origins">生成元の継承</h3>

<p><code>about:blank</code>、<code>javascript:</code>、<code>data:</code> URL のコンテンツは、それらの URL を読み込んだ文書から生成元を継承します。これは、URL 自体には生成元の情報がないためです。</p>

<h3 id="IE_Exceptions" style="line-height: 30px;">IE の例外事項</h3>

<p>Internet Explorer には、同一生成元ポリシーについて 2 つの大きな例外があります。</p>

<ul>
 <li>信頼済みゾーン: 双方のドメインが高く信頼されたゾーン (企業のドメインなど) である場合は、同一生成元の制限を適用しません。</li>
 <li>ポート: IE は同一生成元の要素にポートを含みません。従って、<span style="background-color:rgba(212, 221, 228, 0.14902); font-family:courier new,andale mono,monospace; font-size:12px; line-height:normal">https://company.com:81/index.html</span> と <span style="background-color:rgba(212, 221, 228, 0.14902); font-family:courier new,andale mono,monospace; font-size:12px; line-height:normal">https://company.com/index.html</span> は同一生成元とみなし、制限を適用しません。</li>
</ul>

<p>これらの例外事項は非標準であり他のブラウザではサポートしていませんが、Windows RT や IE ベースの Web アプリケーションを開発する場合は役に立つでしょう。</p>

<h2 id="Changing_origin" name="Changing_origin">生成元の変更</h2>

<p>ページの生成元は、いくつかの制限のもとに変更することができます。スクリプトは {{domxref("document.domain")}} の値を、現在のドメインまたは上位ドメインに設定できます。もしスクリプトによって現在のドメインの上位ドメインに設定されたら、より短いドメインは次の生成元のチェックのために使われます。例えば、<code>https://store.company.com/dir/other.html</code> にある文書内のスクリプトが以下の命令文を実行したと想定します:</p>

<pre>
document.domain = "company.com";
</pre>

<p>この命令文の設定後、ページは <code>https://company.com/dir/page.html</code> で生成元のチェックを通ることができます (許可を望むことを示すために <code>https://company.com/dir/page.html</code> が自身の <code>document.domain</code> を "<code>company.com</code>" に設定すると仮定します。詳しくは {{domxref("document.domain")}} をご覧ください)。しかし、<code>company.com</code> は <code>document.domain</code> を <code>othercompany.com</code> に設定することは<strong>できません</strong>。<code>company.com</code> の上位ドメインではないためです。</p>

<p>ポート番号はブラウザにより、別に保持されます。<code>document.domain = document.domain</code> を含むどのような設定の呼び出しでも、ポート番号は <code>null</code> で上書きされます。従って始めに <code>document.domain = "company.com"</code> を設定しただけでは、<code>company.com:8080</code> と <code>company.com</code> が交流することは<strong>できません</strong>。双方のポート番号が <code>null</code> になるように、双方で設定しなければなりません。</p>

<div class="note">
<p><strong>注記:</strong> サブドメインが親ドメインへ安全にアクセスできるようにするために <code>document.domain</code> を使用するときは、親ドメインとサブドメインの双方で <code>document.domain</code> に同じ値を設定することが必要です。これは、単に親ドメインを元の値に戻す設定を行う場合でも必要です。これを怠るとパーミッションエラーが発生するでしょう。</p>
</div>

<h2 id="Cross-origin_network_access" name="Cross-origin_network_access">異なる生成元へのネットワークアクセス</h2>

<p>同一生成元ポリシーは {{domxref("XMLHttpRequest")}} や {{htmlelement("img")}} 要素を使用する場合など、2 つの生成元間の対話を制御します。これらの対話は一般的に、3 つのカテゴリに分けられます:</p>

<ul>
 <li>異なる生成元への<em>書き込み</em>は、概して許可されます。例えばリンク、リダイレクトやフォームの送信です。まれに使用される HTTP リクエストでは、<a href="/ja/docs/HTTP/Access_control_CORS#Preflighted_requests" title="HTTP/Access_control_CORS#Preflighted_requests">プリフライト</a>が必要です。</li>
 <li>異なる生成元の<em>埋め込み</em>は、概して許可されます。例は後述します。</li>
 <li>異なる生成元からの<em>読み込み</em>は概して許可されませんが、埋め込みによって読み込みアクセスはしばしば漏れ出します。例えば埋め込み画像の幅や高さ、埋め込みスクリプトのアクション、あるいは<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=629094" title="https://bugzilla.mozilla.org/show_bug.cgi?id=629094">埋め込みリソースで可能なもの</a>を読み取ることが可能です。</li>
</ul>

<p>以下に、異なる生成元で埋め込むことが可能なリソースの例を挙げます:</p>

<ul>
 <li><code>&lt;script src="..."&gt;&lt;/script&gt;</code> による JavaScript。構文エラーのエラーメッセージは、同一生成元のスクリプトについてのみ利用可能です。</li>
 <li><code>&lt;link rel="stylesheet" href="..."&gt;</code> による CSS。CSS の<a href="https://scarybeastsecurity.blogspot.dk/2009/12/generic-cross-browser-cross-domain.html" title="https://scarybeastsecurity.blogspot.dk/2009/12/generic-cross-browser-cross-domain.html">寛大な構文規則</a>のため、生成元を越える CSS は適切な <code>Content-Type</code> ヘッダが必要です。制約はブラウザにより異なります: <a href="https://msdn.microsoft.com/en-us/library/ie/gg622939%28v=vs.85%29.aspx" title="https://msdn.microsoft.com/en-us/library/ie/gg622939%28v=vs.85%29.aspx">IE</a> (<a href="https://msdn.microsoft.com/ja-jp/library/ie/gg622939%28v=vs.85%29.aspx" title="https://msdn.microsoft.com/ja-jp/library/ie/gg622939%28v=vs.85%29.aspx">日本語訳</a>)、<a href="https://www.mozilla.org/security/announce/2010/mfsa2010-46.html" title="https://www.mozilla.org/security/announce/2010/mfsa2010-46.html">Firefox</a> (<a href="https://www.mozilla-japan.org/security/announce/2010/mfsa2010-46.html" title="https://www.mozilla-japan.org/security/announce/2010/mfsa2010-46.html">日本語訳</a>)、<a href="https://code.google.com/p/chromium/issues/detail?id=9877" title="https://code.google.com/p/chromium/issues/detail?id=9877">Chrome</a>、<a href="https://support.apple.com/kb/HT4070" title="https://support.apple.com/kb/HT4070">Safari</a> (<a href="https://support.apple.com/kb/HT4070?viewlocale=ja_JP" title="https://support.apple.com/kb/HT4070?viewlocale=ja_JP">日本語訳</a>) (CVE-2010-0051 までスクロールしてください)、<a href="https://www.opera.com/support/kb/view/943/" title="https://www.opera.com/support/kb/view/943/">Opera</a>。</li>
 <li>{{htmlelement("img")}} による画像。サポートされる画像形式は PNG、JPEG、GIF、BMP、SVG などです。</li>
 <li>{{htmlelement("video")}} および {{htmlelement("audio")}} によるメディアファイル。</li>
 <li><a href="/ja/docs/HTML/Element/object" title="HTML/Element/object"><code>&lt;object&gt;</code></a>、<a href="/ja/docs/HTML/Element/embed" title="HTML/Element/embed"><code>&lt;embed&gt;</code></a> および <a href="/ja/docs/HTML/Element/applet" title="HTML/Element/applet"><code>&lt;applet&gt;</code></a> によるプラグイン。</li>
 <li><a href="/ja/docs/CSS/@font-face" title="CSS/@font-face"><code>@font-face</code></a> によるフォント。異なる生成元のフォントを許可するブラウザもありますが、同一生成元のフォントを要求するブラウザもあります。</li>
 <li><a href="/ja/docs/HTML/Element/frame" title="HTML/Element/frame"><code>&lt;frame&gt;</code></a> および <a href="/ja/docs/HTML/Element/iframe" title="HTML/Element/iframe"><code>&lt;iframe&gt;</code></a> によるものは何でも。このような方式による異なる生成元との対話を防ぐために、サイトで <code><a href="/ja/docs/HTTP/X-Frame-Options" title="HTTP/X-Frame-Options">X-Frame-Options</a></code> ヘッダを使用できます。</li>
</ul>

<h3 id="How_to_allow_cross-origin_access" name="How_to_allow_cross-origin_access">異なる生成元とのアクセスを許可する方法</h3>

<p>異なる生成元とのアクセスを許可するには、<a href="/ja/docs/HTTP/Access_control_CORS" title="HTTP/Access_control_CORS">CORS</a> を使用します。</p>

<h3 id="How_to_block_cross-origin_access" name="How_to_block_cross-origin_access">異なる生成元とのアクセスをブロックする方法</h3>

<ul>
 <li>異なる生成元への書き込みを防ぐには、リクエスト内の推測できないトークン (<a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_%28CSRF%29" title="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_%28CSRF%29">Cross-Site Request Forgery (CSRF)</a> トークンとして知られる) をチェックして、このトークンを知っているページの、異なる生成元からの読み込みを止めなければなりません。</li>
 <li>異なる生成元のリソースの読み込みを防ぐには、そのリソースを埋め込みできないようにします。リソースの埋め込みによって漏えいする情報があるため多くの場合、埋め込みの抑止が必要になります。</li>
 <li>異なる生成元からの埋め込みを防ぐには、リソースが前出の埋め込み可能な形式であると判断されないようにしてください。ほとんどの場合、ブラウザは <code>Content-Type</code> を尊重しません。例えば <code>&lt;script&gt;</code> タグで HTML ドキュメントを指した場合、ブラウザは HTML を JavaScript としてパースしようとします。リソースがサイトの入り口ではない場合は、埋め込みを抑止するため CSRF トークンも使用するとよいでしょう。</li>
</ul>

<h2 id="Cross-origin_script_API_access" name="Cross-origin_script_API_access">異なる生成元へのスクリプト API アクセス</h2>

<p><a href="/ja/docs/DOM/HTMLIFrameElement" title="DOM/HTMLIFrameElement"><code>iframe.contentWindow</code></a>、{{domxref("window.parent")}}、{{domxref("window.open")}}、{{domxref("window.opener")}} といった JavaScript API は、ドキュメントが互いに直接参照することを可能にします。2 つのドキュメントが同一の生成元ではないとき、これらの参照は次の 2 つのセクションで示すとおり、<a href="/ja/docs/Web/API/Window"><code>Window</code></a> オブジェクトや <a href="/ja/docs/Web/API/Location"><code>Location</code></a> オブジェクトへの限られたアクセスを提供します。</p>

<p>生成元が異なるドキュメント間でさらに通信するために、{{domxref("window.postMessage")}} を使用することができます。</p>

<h3 id="Window" name="Window">Window</h3>

<p>仕様書: <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#security-window">https://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#security-window</a></p>

<p>以下の <code>Window</code> のプロパティは、異なる生成元のアクセスが許可されています:</p>

<table class="fullwidth-table standard-table">
 <thead>
  <tr>
   <th scope="col">メソッド</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{domxref("window.blur")}}</td>
  </tr>
  <tr>
   <td>{{domxref("window.close")}}</td>
  </tr>
  <tr>
   <td>{{domxref("window.focus")}}</td>
  </tr>
  <tr>
   <td>{{domxref("window.postMessage")}}</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table standard-table">
 <thead>
  <tr>
   <th scope="col">属性</th>
   <th scope="col">&nbsp;</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{domxref("window.closed")}}</td>
   <td>読み取りのみ</td>
  </tr>
  <tr>
   <td>{{domxref("window.frames")}}</td>
   <td>読み取りのみ</td>
  </tr>
  <tr>
   <td>{{domxref("window.length")}}</td>
   <td>読み取りのみ</td>
  </tr>
  <tr>
   <td>{{domxref("window.location")}}</td>
   <td>読み取り/書き込み</td>
  </tr>
  <tr>
   <td>{{domxref("window.opener")}}</td>
   <td>読み取りのみ</td>
  </tr>
  <tr>
   <td>{{domxref("window.parent")}}</td>
   <td>読み取りのみ</td>
  </tr>
  <tr>
   <td>{{domxref("window.self")}}</td>
   <td>読み取りのみ</td>
  </tr>
  <tr>
   <td>{{domxref("window.top")}}</td>
   <td>読み取りのみ</td>
  </tr>
  <tr>
   <td>{{domxref("window.window")}}</td>
   <td>読み取りのみ</td>
  </tr>
 </tbody>
</table>

<p>一部のブラウザは、仕様書が定めるものより多くのプロパティでアクセスを許可しています。</p>

<h3 id="Location" name="Location">Location</h3>

<p>仕様書: <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#security-location">https://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#security-location</a></p>

<p>以下の <code>Location</code> のプロパティは、異なる生成元のアクセスが許可されています:</p>

<table class="fullwidth-table standard-table">
 <thead>
  <tr>
   <th scope="col">メソッド</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{domxref("location.replace")}}</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table standard-table">
 <thead>
  <tr>
   <th scope="col">属性</th>
   <th scope="col">&nbsp;</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{domxref("URLUtils.href")}}</td>
   <td>書き込みのみ</td>
  </tr>
 </tbody>
</table>

<p>一部のブラウザは、仕様書が定めるものより多くのプロパティでアクセスを許可しています。</p>

<h2 id="Cross-origin_data_storage_access" name="Cross-origin_data_storage_access">異なる生成元へのデータストレージアクセス</h2>

<p><a href="/ja/docs/Web/Guide/API/DOM/Storage">localStorage</a> や <a href="/ja/docs/IndexedDB">IndexedDB</a> など、ブラウザ内部に保管されるデータへのアクセスは、生成元によって分けています。それぞれの生成元が個別にストレージを持ち、ある生成元の JavaScript が別の生成元に属するストレージを読み書きすることはできません。</p>

<p>Cookie では、生成元の定義が異なっています。ページは自身のドメインまたは任意の親ドメイン (親ドメインが public suffix ではない場合に限る) 用の Cookie を設定できます。Firefox や Chrome は <a href="https://publicsuffix.org/">Public Suffix List</a> を使用して、ドメインが public suffix であるかを判断します。Internet Explorer は独自の方式により、ドメインが public suffix であるかを判断します。使用しているプロトコル (http/https) やポートが何であっても、ブラウザはサブドメインを含めて Cookie を使用可能にします。Cookie を設定するときに Domain、Path、Secure、Http-Only フラグを使用して、これらを制限できます。Cookie を読み取るとき、Cookie を設定した場所から知ることはできません。セキュアな https 接続のみ使用していたとしても、参照している Cookie がセキュアでない接続を使用して設定された可能性があります。</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Same-origin_policy_for_file:_URIs" title="Same-origin policy for file: URIs">Same-origin policy for file: URIs</a></li>
 <li><a href="https://www.w3.org/Security/wiki/Same_Origin_Policy" title="https://www.w3.org/Security/wiki/Same_Origin_Policy">Same-Origin Policy at W3C</a></li>
</ul>

<div class="originaldocinfo">
<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>

<ul>
 <li>Author(s): Jesse Ruderman</li>
</ul>
</div>