參考
1.MDN window.postMessage
2.瀏覽器同源政策及其規(guī)避方法
3.跨域資源共享 CORS 詳解

1. 什么是同源策略

瀏覽器出于安全方面的考慮，只允許與本域下的接口交互。不同源的客戶端腳本在沒(méi)有明確授權(quán)的情況下，不能讀寫(xiě)對(duì)方的資源。

同源指域名、協(xié)議、端口都相同

以http://www.example.com/a.html為例http://為協(xié)議、www.example.com為域名，80為默認(rèn)端口號(hào)；所以像https://www.example.com/b.html、http://a.example.com/b.html、 http://www.example.com:90/b.html與http://www.example.com/a.html均不同源。

對(duì)于當(dāng)前頁(yè)面來(lái)說(shuō)頁(yè)面存放的 JS 文件的域不重要，重要的是加載該 JS 頁(yè)面所在什么域

2. 什么是跨域？跨域有幾種實(shí)現(xiàn)形式

3. JSONP 的原理是什么

4. CORS是什么

5. 幾種跨域?qū)崿F(xiàn)方式

• JSONP
  • JSONP 是JSON with padding（填充式JSON 或參數(shù)式JSON）的簡(jiǎn)寫(xiě)
  • 原理：利用<script>標(biāo)簽可以引入不同域下資源的特性；向服務(wù)器請(qǐng)求JSON數(shù)據(jù)，服務(wù)器接收請(qǐng)求，將數(shù)據(jù)放在一個(gè)指定名字的回調(diào)函數(shù)里傳回來(lái)。如callback({ "name": "Nicholas" });
  • JSONP只支持get請(qǐng)求，對(duì)于老的瀏覽器兼容性好

JSONP具體實(shí)現(xiàn)

• CORS
  • CORS 全稱是跨域資源共享（Cross-origin resource sharing），是一種利用 Ajax 跨域請(qǐng)求資源的方式，支持現(xiàn)代瀏覽器，IE支持10以上。實(shí)現(xiàn)方式很簡(jiǎn)單，IE8中引入的XDR(XDomainRequest)部分實(shí)現(xiàn)了CORS規(guī)范
  • CORS分為簡(jiǎn)單請(qǐng)求和復(fù)雜請(qǐng)求
    • 簡(jiǎn)單請(qǐng)求
      需同時(shí)滿足請(qǐng)求的方法是post,get,head之一，頭信息為以下字段的一個(gè)或多個(gè)：Accept,Accept-language,Content-language,Last-Event-ID,Content-Type為application/x-www-form-urlencoded、multipart/form-data、text/plain之一。
      當(dāng)你使用 XMLHttpRequest 發(fā)送跨域請(qǐng)求時(shí)，瀏覽器會(huì)給該請(qǐng)求加一個(gè)請(qǐng)求頭：Origin，其中包含請(qǐng)求頁(yè)面的源信息（協(xié)議、域名和端口），服務(wù)器如果認(rèn)可這個(gè)請(qǐng)求則在返回結(jié)果中加入一個(gè)響應(yīng)頭：Access-Control-Allow-Origin返回相同的源信息; 瀏覽器判斷該相應(yīng)頭中是否包含 Origin 的值，如果有則瀏覽器會(huì)處理響應(yīng)，我們就可以拿到響應(yīng)數(shù)據(jù)，如果不包含瀏覽器直接駁回，這時(shí)我們無(wú)法拿到響應(yīng)數(shù)據(jù)。
    • 復(fù)雜請(qǐng)求
      支持開(kāi)發(fā)者使用自定義頭部，除了簡(jiǎn)單請(qǐng)求之外的請(qǐng)求方式、如put,delete，以及不同類型的主體內(nèi)容；瀏覽器通過(guò)以上字段發(fā)現(xiàn)這是一個(gè)復(fù)雜請(qǐng)求后，會(huì)先發(fā)送一個(gè)‘預(yù)檢’請(qǐng)求，確認(rèn)服務(wù)器可以接收這樣的請(qǐng)求，再正式發(fā)送請(qǐng)求，預(yù)檢請(qǐng)求簡(jiǎn)單示例如下：

OPTIONS /cors HTTP/1.1  //‘預(yù)檢’請(qǐng)求使用OPTIONS方法
Origin: http://api.bob.com   //請(qǐng)求源
Access-Control-Request-Method: PUT  //請(qǐng)求方法
Access-Control-Request-Headers: X-Custom-Header  //自定義頭信息

服務(wù)器會(huì)將自己支持的所有請(qǐng)求信息在響應(yīng)中返回給服務(wù)器，之后瀏覽器會(huì)向簡(jiǎn)單請(qǐng)求一樣發(fā)送正式請(qǐng)求。

CORS具體實(shí)現(xiàn)

• 降域
  • 對(duì)于來(lái)自同一主域名下的不同子域，通過(guò)將每個(gè)頁(yè)面的document.domain設(shè)置為相同的值，這些頁(yè)面就可以互相訪問(wèn)對(duì)方包含的JavaScript 對(duì)象
  • 不能設(shè)為URL中不包含的域
  • 如http://a.example.com/a.html和http://b.example.com/b.html的同時(shí)設(shè)置document.domain='example.com'就可以互相訪問(wèn)了。

降域具體實(shí)現(xiàn)

• postMessage
  • window.postMessage()是h5規(guī)范中XDM（跨文檔消息傳送cross-document messaging）的核心
  • otherWindow.postMessage(message, targetOrigin, [transfer])
    • otherwindow為一個(gè)窗口的引用，指向接收信息的窗口，如window.frame[i]或通過(guò)window.open返回的窗口對(duì)象
    • message為發(fā)送的消息
    • targetOrigin為接收消息的域
  • 接收到XDM消息時(shí)，會(huì)觸發(fā)window的message事件，傳遞給onmessage處理程序的事件對(duì)象包含：
    • data:作為postMessage()第一個(gè)參數(shù)傳入的字符串?dāng)?shù)據(jù)
    • origin:發(fā)送消息文檔所在域
    • ……

postMessage具體實(shí)現(xiàn)