跨域知識梳理

參考：
維基百科 - Root domain
https://en.wikipedia.org/wiki...
瀏覽器同源政策及其規避方法 - 阮一峯
http://www.ruanyifeng.com/blo...
window.name 跨域實現原理及實例
http://blog.csdn.net/qq_34099...
html5 postMessage 官方API
https://developer.mozilla.org...
JSONP（直接跳到JSONP那段）
http://kb.cnblogs.com/page/13...
跨域資源共享 CORS 詳解 - 阮一峯
http://www.ruanyifeng.com/blo...
跨域資源共享（CORS） - 阿里雲技術文檔
https://www.alibabacloud.com/...

1 基本概念

1.1 域&域名

域 domian : . 根域、 .org 頂級域(一級域)、 .baidu.com 二級域
域名 domain name : baidu .com 頂級域名(一級域名)、www .baidu .com 二級域名

1.2 同源策略&跨域

同源條件：協議相同、域名相同、端口相同，不知足即爲 跨域
同源目的：瀏覽器 同源策略，保證用戶信息的安全，防止惡意的網站竊取數據

1.3 限制範圍

不少文章中介紹，跨域會對如下3種行爲進行限制：

1）cookie、localStorage、indexedDB
2）dom
3）ajax 請求
我理解按以下分類更爲合理：
1）cookie
2）iframe/window.open ( localStorage、indexedDB、dom )
3）ajax 請求

• cookie 身份受權單獨一類
• localStorage、indexedDB、dom 跨域受限，通常發生在 iframe 或 window.open 的跨域需求時，沒法獲取新頁面的 window 對象，天然沒法訪問 window.localStorage、window.indexedDB、document.getElementById
• ajax 請求單獨一類。

2 實現跨域

2.1 document.domain

瀏覽器容許經過設置 document.domain 來實現跨子域
若有 a.example.com 和 b.example.com 2個二級域名，設置 document.domain=example.com 或 Set-Cookie:key=value;domain=example.com;path=/ 可實現2個二級域之間的跨域
可解決 cookie、iframe、window.open、ajax 的跨域問題

2.2 URL #hash + hashChange事件監聽

可解決 iframe 的跨域問題
不推薦，如 angular.ui.router 前端路由組件會使用到 URL #hash 字段。

2.3 window.name

可解決 iframe 的跨域問題
window.name 的變化如何監聽是一個問題，大約能夠存儲2M的內容

2.4 html5 postMessage + message事件監聽

可解決 iframe & window.open 的跨域問題
語法：otherWindow.postMessage(message, targetOrigin, [transfer]);
官方API參考

2.5 ajax - JSONP

參考：http://kb.cnblogs.com/page/13...

實現原理：web頁面上調用js文件時不受同源策略影響，擁有src屬性的標籤都擁有跨域的能力，好比<script>、<img>、<iframe>。基於此特性，開發人員總結出JSONP方法。

優勢：瀏覽器兼容性好，服務器改造工做量小。
缺點：僅適用 GET 請求；請求出錯時，沒法得到http錯誤狀態碼

客戶端實現

服務端實現

客戶端將 http 跨域查詢參數 flightNumber 與回調函數 flightHandler 傳遞給服務器，服務器處理完後動態生成 test.js 返回，瀏覽器加載 test.js 完成後執行 flightHandler，完成跨域請求。
在實際編碼時，客戶端可以使用如 jQuery 封裝好的 JSONP API。

2.6 ajax - websocket

WebSocket是一種通訊協議，使用ws://（非加密）和wss://（加密）做爲協議前綴。該協議不實行同源政策，只要服務器支持，就能夠經過它進行跨源通訊。 摘自阮一峯博客
WebSocket 延伸閱讀（不涉及跨域）

2.7 ajax - CORS

CORS 跨源資源分享（Cross-Origin Resource Sharing）爲 W3C 標準（ 兼容性參考）
優勢：提供安全的跨域數據傳輸，且不限於 GET 請求。

整個CORS通訊過程，都是瀏覽器自動完成，不須要用戶參與。對於開發者來講，CORS通訊與同源的AJAX通訊沒有差異，代碼徹底同樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求。所以，實現CORS通訊的關鍵是服務器。只要服務器實現了CORS接口，就能夠跨源通訊。
跨域資源共享（CORS） - 阿里雲技術文檔
跨域資源共享CORS詳解 - 阮一峯