---
title: 同源政策 (Same-origin policy)
slug: Web/Security/Same-origin_policy
translation_of: Web/Security/Same-origin_policy
---
<p>同源政策限制了程式碼和不同網域資源間的互動。</p>

<h2 id="同源定義">同源定義</h2>

<p>所謂同源是指兩份網頁具備相同協定、埠號 (如果有指定) 以及主機位置，下表提供了一些例子展示那些來源和http://store.company.com/dir/page.html屬於同源:</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th>URL</th>
   <th>Outcome</th>
   <th>Reason</th>
  </tr>
  <tr>
   <td><code>http://store.company.com/dir2/other.html</code></td>
   <td>同源</td>
   <td></td>
  </tr>
  <tr>
   <td><code>http://store.company.com/dir/inner/another.html</code></td>
   <td>同源</td>
   <td></td>
  </tr>
  <tr>
   <td><code>https://store.company.com/secure.html</code></td>
   <td>不同源</td>
   <td>協定不同</td>
  </tr>
  <tr>
   <td><code>http://store.company.com:81/dir/etc.html</code></td>
   <td>不同源</td>
   <td>埠號不同</td>
  </tr>
  <tr>
   <td><code>http://news.company.com/dir/other.html</code></td>
   <td>不同源</td>
   <td>主機位置不同</td>
  </tr>
 </tbody>
</table>

<p>另外請參考 <a href="/en-US/docs/Same-origin_policy_for_file:_URIs">file來源定義: URL</a>。</p>

<p>Cookie 的來源定義和上述不一樣。</p>

<h2 id="變更來源">變更來源</h2>

<p>網頁能夠有限地變更來源，我們可以將 {{domxref("document.domain")}} 存為目前網域後半部，然後較短的網域就會作為之後來源檢查，譬如我們在 http://store.company.com/dir/other.html 的文件裡執行以下程式碼:</p>

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

<p>執行完後，網頁能以 http://company.com/dir/page.html 通過同源檢查。然而基於同源檢查，company.com 無法將 document.domain 存為 othercompany.com。</p>

<p>任何變更 document.domain 行為，包括 document.domain = document.domain 都會導致埠號重置為 null，因此無法只藉由執行 document.domain = "company.com" 讓company.com:8080 和 company.com 互動，必須兩邊都重新設定好讓埠號都一致重置為 null。</p>

<div class="note">
<p><strong>Note:</strong> 為了讓子網域可以安全的存取其母網域，我們需要一起改變子、母網域的document.domain 為相同值，即使只是將母網域設回原始值也是必要，否則將會導致許可權錯誤 (Permission Error)。</p>
</div>

<h2 id="跨來源網路存取">跨來源網路存取</h2>

<p>同源政策控制了兩個不同網域來源互動，例如當使用{{domxref("XMLHttpRequest")}}。這些互動可分為以下三類:</p>

<ul>
 <li>跨來源寫(Cross-origin writes)通常被允許，例如有連結、重新導向以及表單送出。少數某些HTTP請求需要<a href="https://developer.mozilla.org/zh-TW/docs/HTTP/Access_control_CORS#.E5.85.88.E5.B0.8E.E8.AB.8B.E6.B1.82">先導請求</a>。</li>
 <li>跨來源嵌入(Cross-origin embedding)通常被允許，例子請參照下方。</li>
 <li>跨來源讀取(Cross-origin read) 通常不被允許，不過通常可以藉由嵌入來繞道讀取，例如嵌入影像寬高讀取、嵌入程式碼或<a href="https://grepular.com/Abusing_HTTP_Status_Codes_to_Expose_Private_Information">嵌入資源</a>。</li>
</ul>

<p>下面是一些能跨來源嵌入的資源:</p>

<ul>
 <li>&lt;script src=”…”&gt;&lt;/script&gt;內的Javascript，但語法錯誤訊息只限於同源程式碼腳本。</li>
 <li>CSS的&lt;link rel="stylesheet" href="..."&gt;，由於CSS寬鬆語法規則，跨來源CSS要求正確的Content-Type標頭。限制在瀏覽器間各有差異: <a href="http://msdn.microsoft.com/en-us/library/ie/gg622939%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ie/gg622939%28v=vs.85%29.aspx">IE</a>, <a href="http://www.mozilla.org/security/announce/2010/mfsa2010-46.html" title="http://www.mozilla.org/security/announce/2010/mfsa2010-46.html">Firefox</a>, <a href="http://code.google.com/p/chromium/issues/detail?id=9877" title="http://code.google.com/p/chromium/issues/detail?id=9877">Chrome</a>, <a href="http://support.apple.com/kb/HT4070" title="http://support.apple.com/kb/HT4070">Safari</a> (請至CVE-2010-0051)以及<a href="http://www.opera.com/support/kb/view/943/" title="http://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="/en-US/docs/HTML/Element/object" title="HTML/Element/object"><code>&lt;object&gt;</code></a>, <a href="/en-US/docs/HTML/Element/embed" title="HTML/Element/embed"><code>&lt;embed&gt;</code></a>和<a href="/en-US/docs/HTML/Element/applet" title="HTML/Element/applet"><code>&lt;applet&gt;</code></a>的外掛</li>
 <li><a href="/en-US/docs/CSS/@font-face" title="CSS/@font-face"><code>@font-face</code></a> 的字型；有些瀏覽器允許跨來源字型，有些則不。</li>
 <li> <a href="/en-US/docs/HTML/Element/frame" title="HTML/Element/frame"><code>&lt;frame&gt;</code></a>以及<a href="/en-US/docs/HTML/Element/iframe" title="HTML/Element/iframe"><code>&lt;iframe&gt;</code></a>中的內容；如果一個網站想要避免跨來源載入互動，可以藉由<code><a href="/en-US/docs/HTTP/X-Frame-Options" title="HTTP/X-Frame-Options">X-Frame-Options</a></code>標頭避免。</li>
</ul>

<h3 id="如何允許跨來源存取">如何允許跨來源存取</h3>

<p>使用<a href="https://developer.mozilla.org/zh-TW/docs/HTTP/Access_control_CORS">CORS</a>允許跨來源存取</p>

<h3 id="如何阻擋跨來源存取">如何阻擋跨來源存取</h3>

<ul>
 <li>藉由檢查請求中包含的無法猜測的特殊記號(token)可以避免跨來源寫入，還有跨來源讀取知道此記號的網頁，這個記號即為<a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_%28CSRF%29">跨站偽造(Cross-Site Request Forgery, CSRF)</a>記號。</li>
 <li>確保資源無法被嵌入來防止跨來源讀取。</li>
 <li>為了防止跨來源嵌入，請確保資源不被解讀為上述可嵌入格式之一；瀏覽器通常不會理會Content-Type，比如說有一個指向HTML文件的&lt;script&gt;標籤，瀏覽器還是會嘗試解析該HTML文件為Javascript；當你的資源不是網站進入點，可以使用CSRF記號。</li>
</ul>

<h2 id="跨來源程式腳本存取">跨來源程式腳本存取</h2>

<p>Javascript API例如<a href="/en-US/docs/DOM/HTMLIFrameElement" title="DOM/HTMLIFrameElement"><code>iframe.contentWindow</code></a>, {{domxref("window.parent")}}, {{domxref("window.open")}}以及{{domxref("window.opener")}}，允許文件之間直接互相參照，當兩份文件的來源不同，參照存取<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#security-window" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#security-window">Window</a>和<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#security-location" title="http://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">准許存取更多屬性</a>。文件間的溝通也可以改用{{domxref("window.postMessage")}}來進行。</p>

<h2 id="延伸閱讀">延伸閱讀</h2>

<ul>
 <li><a href="/en-US/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="http://www.w3.org/Security/wiki/Same_Origin_Policy" title="http://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>