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

<p>同一オリジンポリシーとは、あるオリジンから読み込まれた文書やスクリプトについて、そのリソースから他のオリジンのリソースにアクセスできないように制限するものです。同一オリジンポリシーは Web セキュリティにおける重要な仕組みであり、悪意ある行動を起こしかねないリソースの分離を目的としています。</p>

<h2 id="Definition_of_an_origin" name="Definition_of_an_origin">オリジンの定義</h2>

<p>2 つのページにおいてスキームと（与えられていれば）ポート、及びホストがそれぞれ等しい場合、両者のページは同一のオリジンを有していると見なします。以下の表は、各行の 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_の例外事項" 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>が自身の</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 つのドキュメントが同一のオリジンではない場合、<a href="/ja/docs/Web/API/Window"><code>Window</code></a> オブジェクトや <a href="/ja/docs/Web/API/Location"><code>Location</code></a> オブジェクトなど、限られたオブジェクトにのみアクセスすることができます。詳しくは次の 2 つのセクションで説明します。</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 を設定できます。 ドメインが public suffix であるかを判断する際、Firefox と Chrome は <a href="https://publicsuffix.org/">Public Suffix List</a> を使用します。Internet Explorer は独自の方法で public suffix であるかを判断します。使用しているスキーム (http/https) やポートに関係なく、ブラウザはサブドメインも含めて Cookie を使用可能にします。Cookie の設定時に Domain、Path、Secure、Http-Only フラグを用いることで、その Cookie の利用範囲を制限できます。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>