跨域的根本原因：JavaScript 的同源策略
摘自：https://blog.csdn.net/liubo2012/article/details/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 的同源策略