Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

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

  • リビジョンの URL スラグ: Web/JavaScript/Same_origin_policy_for_JavaScript
  • リビジョンのタイトル: 同一生成元ポリシー
  • リビジョンの ID: 730705
  • 作成日:
  • 作成者: geckotang+gh
  • 現行リビジョン? いいえ
  • コメント

このリビジョンの内容

同一生成元ポリシーによって、ある生成元から読み込まれた文書やスクリプトが、異なる生成元からの文書のプロパティを取得したり設定したりするのを防ぎます。

生成元の定義

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

URL 結果 理由
https://store.company.com/dir2/other.html 成功  
https://store.company.com/dir/inner/another.html 成功  
https://store.company.com/secure.html 失敗 異なるプロトコル
https://store.company.com:81/dir/etc.html 失敗 異なるポート
https://news.company.com/dir/other.html 失敗 異なるホスト

file: URL の生成元の定義もご覧ください。

Cookie は生成元の定義に使用しますが、上記とは異なります。

生成元の変更

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

document.domain = "company.com";

この命令文の実行後、ページは https://company.com/dir/page.html で生成元のチェックを通るでしょう。しかし、同じ理由で、company.comdocument.domainothercompany.com に設定することはできません

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

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

異なる生成元へのネットワークアクセス

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

  • 異なる生成元への書き込みは、概して許可されます。例えばリンク、リダイレクトやフォームの送信です。まれに使用される HTTP リクエストでは、プリフライトが必要です。
  • 異なる生成元の埋め込みは、概して許可されます。例は後述します。
  • 異なる生成元からの読み込みは概して許可されませんが、埋め込みによって読み込みアクセスはしばしば漏れ出します。例えば埋め込み画像の幅や高さ、埋め込みスクリプトのアクション、あるいは埋め込みリソースで可能なものを読み取ることが可能です。

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

  • <script src="..."></script> による JavaScript。構文エラーのエラーメッセージは、同一生成元のスクリプトについてのみ利用可能です。
  • <link rel="stylesheet" href="..."> による CSS。CSS の寛大な構文規則のため、生成元を越える CSS は適切な Content-Type ヘッダが必要です。制約はブラウザにより異なります: IE (日本語訳)、Firefox (日本語訳)、ChromeSafari (日本語訳) (CVE-2010-0051 までスクロールしてください)、Opera
  • {{htmlelement("img")}} による画像。サポートされる画像形式は PNG、JPEG、GIF、BMP、SVG などです。
  • {{htmlelement("video")}} および {{htmlelement("audio")}} によるメディアファイル。
  • <object><embed> および <applet> によるプラグイン。
  • @font-face によるフォント。異なる生成元のフォントを許可するブラウザもありますが、同一生成元のフォントを要求するブラウザもあります。
  • <frame> および <iframe> によるものは何でも。このような方式による異なる生成元との対話を防ぐために、サイトで X-Frame-Options ヘッダを使用できます。

異なる生成元とのアクセスを許可する方法

異なる生成元とのアクセスを許可するには、CORS を使用します。

異なる生成元とのアクセスをブロックする方法

  • 異なる生成元への書き込みを防ぐには、リクエスト内の推測できないトークン (Cross-Site Request Forgery (CSRF) トークンとして知られる) をチェックして、このトークンを知っているページの、異なる生成元からの読み込みを止めます。
  • 異なる生成元のリソースの読み込みを防ぐには、そのリソースを埋め込みできないようにします。
  • 異なる生成元からの埋め込みを防ぐには、リソースが前出の埋め込み可能な形式であると判断されないようにしてください。ほとんどの場合、ブラウザは Content-Type を尊重しません。例えば <script> タグで HTML ドキュメントを指した場合、ブラウザは HTML を JavaScript としてパースしようとします。リソースがサイトの入り口ではない場合は、CSRF トークンも使用するとよいでしょう。

異なる生成元へのスクリプトアクセス

iframe.contentWindow、{{domxref("window.parent")}}、{{domxref("window.open")}}、{{domxref("window.opener")}} といった JavaScript API は、ドキュメントが互いに直接参照することを可能にします。2 つのドキュメントが同一の生成元ではないとき、これらの参照は Window オブジェクトや Location オブジェクトへの限られたアクセスを提供します。一部のブラウザは、仕様が許可するものより多くのプロパティへのアクセスを許可します。ドキュメント間で通信する代わりに、{{domxref("window.postMessage")}} を使用することができます。

関連情報

Original Document Information

  • Author(s): Jesse Ruderman

 

このリビジョンのソースコード

<p>同一生成元ポリシーによって、ある生成元から読み込まれた文書やスクリプトが、異なる生成元からの文書のプロパティを取得したり設定したりするのを防ぎます。</p>

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

<p>もしプロトコル、(与えられていれば) ポート、及びホストが両方のページで同じならば、Mozilla は二つのページが同一生成元を持っていると見なします。説明するために、以下の表では 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>

<p>Cookie は生成元の定義に使用しますが、上記とは異なります。</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>company.com</code> は <code>document.domain</code> を <code>othercompany.com</code> に設定することは<strong>できません</strong>。</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")}} を使用する場合など、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://grepular.com/Abusing_HTTP_Status_Codes_to_Expose_Private_Information" title="https://grepular.com/Abusing_HTTP_Status_Codes_to_Expose_Private_Information">埋め込みリソースで可能なもの</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_access" name="Cross-origin_script_access">異なる生成元へのスクリプトアクセス</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="https://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#security-window" title="https://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#security-window">Window</a> オブジェクトや <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#security-location" title="https://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#security-location">Location</a> オブジェクトへの限られたアクセスを提供します。一部のブラウザは、仕様が許可するものより<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=839867" title="https://bugzilla.mozilla.org/show_bug.cgi?id=839867">多くのプロパティへのアクセスを許可します</a>。ドキュメント間で通信する代わりに、{{domxref("window.postMessage")}} を使用することができます。</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>

<p>&nbsp;</p>
このリビジョンへ戻す