跨域的根本原因：JavaScript 的同源策略

標籤：multi   決定   tab   provided   cors   log   expec   element   corporate   

摘自：43148705

同源策略限制了一個源（origin）中載入文本或指令碼與來自其它源（origin）中資源的互動方式。

同源定義

如果兩個頁面擁有相同的協議（protocol），連接埠（如果指定），和主機，那麼這兩個頁面就屬於同一個源（origin）。

下表給出了相對http://store.company.com/dir/page.html同源檢測的樣本:

URL	結果	原因
http://store.company.com/dir2/other.html	成功
http://store.company.com/dir/inner/another.html	成功
https://store.company.com/secure.html	失敗	協議不同
http://store.company.com:81/dir/etc.html	失敗	連接埠不同
http://news.company.com/dir/other.html	失敗	主機名稱不同

參見origin definition for file: URLs.

源繼承

來自about:blank，javascript:和data:URLs中的內容，繼承了將其載入的文檔所指定的源，因為它們的URL本身未指定任何關於自身源的資訊。

IE特例

在處理同源策略的問題上，IE存在兩個主要的不同之處。

• 授信範圍（Trust Zones）：兩個相互之間高度互信的網域名稱，如公司網域名稱（corporate domains），不遵守同源策略的限制。
• 連接埠：IE未將連接埠號碼加入到同源策略的組成部分之中，因此 http://company.com:81/index.html 和http://company.com/index.html  屬於同源並且不受任何限制。

這些例外是非標準的，其它瀏覽器也未做出支援，但會助於開發基於window RT IE的應用程式。

變更源

頁面可以改變本身的源，但會受到一些限制。指令碼可以設定document.domain 的值為當前域的一個尾碼

在同源策略中有一個例外，指令碼可以設定 document.domain 的值為當前域的一個尾碼，如果這樣做的話，短的域將作為後續同源檢測的依據。例如，假設在http://store.company.com/dir/other.html 中的一個指令碼執行了下列語句：

document.domain = "company.com";

 

這條語句執行之後，頁面將會成功地通過對 http://company.com/dir/page.html 的同源檢測。而同理，company.com 不能設定 document.domain 為othercompany.com.

瀏覽器單獨儲存連接埠號碼。任何的賦值操作，包括document.domain = documen.domain都會以null值覆蓋掉原來的連接埠號碼。因此company.com:8080頁面的指令碼不能僅通過設定document.domain = "company.com"就能與company.com通訊。賦值時必須帶上連接埠號碼，以確保連接埠號碼不會為null。

附註：使用document.domain來安全是讓子域訪問其父域，需要同時將子域和父域的document.domain設定為相同的值。必須要這麼做，即使是簡單的將父網域設定為其原來的值。沒有這麼做的話可能導致授權錯誤。

跨網域網路訪問

同源策略控制了不同源之間的互動，例如在使用XMLHttpRequest 或 <img> 標籤時則會受到同源策略的約束。互動通常分為三類：

• 通常允許進行跨域寫操作（Cross-origin writes）。例如連結（links），重新導向以及表單提交。特定少數的HTTP請求需要添加 preflight。
• 通常允許跨域資源嵌入（Cross-origin embedding）。之後下面會舉例說明。
• 通常不允許跨域讀操作（Cross-origin reads）。但常可以通過內嵌資源來巧妙的進行讀取存取。例如可以讀取內嵌圖片的高度和寬度，調用內嵌指令碼的方法，或availability of an embedded resource.

以下是一些可以跨域內嵌的資源樣本：

• <script src="..."></script>標籤嵌入跨域指令碼。語法錯誤資訊只能在同源指令碼中捕捉到。
•  <link rel="stylesheet" href="...">標籤嵌入CSS。由於CSS的鬆散的文法規則，CSS的跨域需要一個設定正確的Content-Type訊息頭。不同瀏覽器有不同的限制： IE, Firefox, Chrome, Safari (跳至CVE-2010-0051)部分 和 Opera。
•  <img>內嵌圖片。支援的圖片格式包括PNG,JPEG,GIF,BMP,SVG,...
•  <video> 和 <audio>嵌入多媒體資源。
•  <object>, <embed> 和 <applet>的外掛程式。
• @font-face引入的字型。一些瀏覽器允許跨域字型（ cross-origin fonts），一些需要同源字型（same-origin fonts）。
•  <frame> 和 <iframe>載入的任何資源。網站可以使用X-Frame-Options訊息頭來阻止這種形式的跨域互動。

實現跨域訪問

使用CORS 來實現跨域訪問。

阻止跨域訪問

• 阻止跨域寫操作，只要檢測請求中的一個不可測的標記(CSRF token)即可，這個標記被稱為Cross-Site Request Forgery (CSRF) 標記。必須使用這個標記來阻止頁面的跨站讀操作。
• 阻止資源的跨站讀取，需要保證該資源是不可嵌入的。阻止嵌入行為是必須的，因為嵌入資源通常向其暴露資訊。
• 阻止跨站嵌入，確保你得資源不能是以上列出的可嵌入資源格式。多數情況下瀏覽器都不會遵守Conten-Type訊息頭。例如，如果你在<script>標籤中嵌入HTML文檔，瀏覽器仍將HTML解析為Javascript。When your resource is not an entry point to your site, you can also use a CSRF token to prevent embedding.

跨域指令碼API訪問

Javascript的APIs中，如 iframe.contentWindow, window.parent, window.open 和 window.opener 允許文檔間直接相互引用。當兩個文檔的源不同時，這些引用方式將對 Window 和 Location對象的訪問添加限制。可以使用window.postMessage 作為替代方案，提供跨域文檔間的通訊。

跨域資料存放區訪問

 

儲存在瀏覽器中的資料，如localStorage和IndexedDB，以源進行分割。每個源都擁有自己單獨的儲存空間，一個源中的Javascript指令碼不能對屬於其它源的資料進行讀寫操作。

window.name屬性可以用來臨時儲存資料，可以跨域訪問。

Cookies使用不同的源定義方式。一個頁面可以為本域和任何父網域設定cookie，只要是父域不是公用尾碼（public suffix）即可。Firefox和Chrome使用Public Suffix List決定一個域是否是一個公用尾碼（public suffix）。不管使用哪個協議（HTTP/HTTPS）或連接埠號碼，瀏覽器都允許給定的域以及其任何子網域名稱(sub-domains)來訪問cookie。設定cookie時，你可以使用Domain，Path，Secure，和Http-Only標記來限定其訪問性。讀取cookie時，不會知曉它的出處。儘管使用安全的https串連，任何可見的cookie都是使用不安全的串連設定的。

參見

 

• Same-origin policy for file: URIs

 

• Same-Origin Policy at W3C

跨域的根本原因：JavaScript 的同源策略