什么是同源策略？
同源策略是指，瀏覽器出于安全方面的考慮，只允許與本域下的接口交互。不同源的客戶端腳本在沒(méi)有明確授權(quán)的情況下，不能讀寫對(duì)方的資源。
本域包括：
- 同協(xié)議：如都是http或者h(yuǎn)ttps
- 同域名：如都是http://jirengu.com/a 和http://jirengu.com/b
- 同端口：如都是8080端口
什么是跨域？跨域有幾種實(shí)現(xiàn)形式？
跨域即在不同的域（協(xié)議、域名、端口中有任意一個(gè)不同）之間發(fā)起請(qǐng)求，打破同源策略的限制，訪問(wèn)其他域的數(shù)據(jù)。
跨域的實(shí)現(xiàn)方式有：
- JSONP
- CORS
- 降域
- postMessage
JSONP
JSONP是JSON的一種使用方式，利用script標(biāo)簽可以跨域引用的特點(diǎn)，對(duì)跨域的數(shù)據(jù)進(jìn)行請(qǐng)求，該方法需要后端數(shù)據(jù)配合。
使用JSONP的步驟：
- 本地創(chuàng)建一個(gè)數(shù)據(jù)處理函數(shù)func；
- 利用script標(biāo)簽，設(shè)置src路徑為向服務(wù)器發(fā)送請(qǐng)求的端口，同時(shí)加上參數(shù)callBack = func，用于提供后端反饋數(shù)據(jù)的接口；
- 服務(wù)端在收到請(qǐng)求后，解析參數(shù)，計(jì)算返還數(shù)據(jù)，輸出 fun(data) 字符串。
- fun(data)會(huì)放到script標(biāo)簽做為js執(zhí)行。此時(shí)會(huì)調(diào)用fun函數(shù)，將data做為參數(shù)。
演示舉例：
-
修改hosts文件，模擬跨域請(qǐng)求失敗；
image.png
-
HTML中，通過(guò)查詢城市名字，獲取對(duì)應(yīng)天氣及圖片
image.png -
js中請(qǐng)求為：
image.png -
瀏覽器訪問(wèn)http://a.com:8080
形成跨域，從控制臺(tái)看到，響應(yīng)到了瀏覽器之后不被允許
image.png
2.使用JSONP修改js請(qǐng)求
-
客戶端用script向后端發(fā)送請(qǐng)求
image.png -
服務(wù)端響應(yīng)，提供對(duì)應(yīng)城市的天氣和圖片
image.png
image.png -
效果，訪問(wèn)a.com，請(qǐng)求127.0.0.1
image.png
CORS
CORS 全稱是跨域資源共享（Cross-Origin Resource Sharing），是一種 ajax 跨域請(qǐng)求資源的方式，支持現(xiàn)代瀏覽器，IE支持10以上。
瀏覽器將CORS請(qǐng)求分成兩類：簡(jiǎn)單請(qǐng)求（simple request）和非簡(jiǎn)單請(qǐng)求（not-so-simple request）。
簡(jiǎn)單請(qǐng)求
只要同時(shí)滿足以下兩大條件，就屬于簡(jiǎn)單請(qǐng)求。
（1) 請(qǐng)求方法是以下三種方法之一：
HEAD
GET
POST
（2）HTTP的頭信息不超出以下幾種字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三個(gè)值application/x-www-form-urlencoded、multipart/form-data、text/plain
瀏覽器請(qǐng)求
對(duì)于簡(jiǎn)單請(qǐng)求，瀏覽器直接發(fā)出CORS請(qǐng)求。具體來(lái)說(shuō)，就是在頭信息之中，增加一個(gè)Origin字段。
服務(wù)器回應(yīng)
如果Origin指定的源，不在許可范圍內(nèi)，服務(wù)器會(huì)返回一個(gè)正常的HTTP回應(yīng)。瀏覽器發(fā)現(xiàn)，這個(gè)回應(yīng)的頭信息沒(méi)有包含Access-Control-Allow-Origin字段（詳見下文），就知道出錯(cuò)了，從而拋出一個(gè)錯(cuò)誤，被XMLHttpRequest的onerror回調(diào)函數(shù)捕獲。注意，這種錯(cuò)誤無(wú)法通過(guò)狀態(tài)碼識(shí)別，因?yàn)镠TTP回應(yīng)的狀態(tài)碼有可能是200。
如果Origin指定的域名在許可范圍內(nèi)，服務(wù)器返回的響應(yīng)，會(huì)多出幾個(gè)頭信息字段。
Access-Control-Allow-Origin，該字段是必須的。它的值要么是請(qǐng)求時(shí)Origin字段的值，要么是一個(gè)*，表示接受任意域名的請(qǐng)求。
非簡(jiǎn)單請(qǐng)求
非簡(jiǎn)單請(qǐng)求是那種對(duì)服務(wù)器有特殊要求的請(qǐng)求，比如請(qǐng)求方法是PUT或DELETE，或者Content-Type字段的類型是application/json。
瀏覽器請(qǐng)求
非簡(jiǎn)單請(qǐng)求的CORS請(qǐng)求，會(huì)在正式通信之前，增加一次HTTP查詢請(qǐng)求，稱為"預(yù)檢"請(qǐng)求（preflight）。
瀏覽器先詢問(wèn)服務(wù)器，當(dāng)前網(wǎng)頁(yè)所在的域名是否在服務(wù)器的許可名單之中，以及可以使用哪些HTTP動(dòng)詞和頭信息字段。只有得到肯定答復(fù)，瀏覽器才會(huì)發(fā)出正式的XMLHttpRequest請(qǐng)求，否則就報(bào)錯(cuò)。
上面代碼中，HTTP請(qǐng)求的方法是PUT，并且發(fā)送一個(gè)自定義頭信息X-Custom-Header。
瀏覽器發(fā)現(xiàn)，這是一個(gè)非簡(jiǎn)單請(qǐng)求，就自動(dòng)發(fā)出一個(gè)"預(yù)檢"請(qǐng)求，要求服務(wù)器確認(rèn)可以這樣請(qǐng)求。下面是這個(gè)"預(yù)檢"請(qǐng)求的HTTP頭信息。
服務(wù)器回應(yīng)
服務(wù)器收到"預(yù)檢"請(qǐng)求以后，檢查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，確認(rèn)允許跨源請(qǐng)求，就可以做出回應(yīng)。
上面的HTTP回應(yīng)中，關(guān)鍵的是Access-Control-Allow-Origin字段，表示http://api.bob.com可以請(qǐng)求數(shù)據(jù)。該字段也可以設(shè)為星號(hào)，表示同意任意跨源請(qǐng)求。
Access-Control-Allow-Methods，該字段必需，它的值是逗號(hào)分隔的一個(gè)字符串，表明服務(wù)器支持的所有跨域請(qǐng)求的方法。注意，返回的是所有支持的方法，而不單是瀏覽器請(qǐng)求的那個(gè)方法。這是為了避免多次"預(yù)檢"請(qǐng)求
如果瀏覽器否定了"預(yù)檢"請(qǐng)求，會(huì)返回一個(gè)正常的HTTP回應(yīng)，但是沒(méi)有任何CORS相關(guān)的頭信息字段。這時(shí)，瀏覽器就會(huì)認(rèn)定，服務(wù)器不同意預(yù)檢請(qǐng)求，因此觸發(fā)一個(gè)錯(cuò)誤，被XMLHttpRequest對(duì)象的onerror回調(diào)函數(shù)捕獲?？刂婆_(tái)會(huì)打印出如下的報(bào)錯(cuò)信息。
說(shuō)明：以上參考引用了跨域資源共享 CORS 詳解 ---by 阮一峰
演示舉例
客戶端請(qǐng)求：
服務(wù)器端響應(yīng)：
效果：
訪問(wèn)a.com，請(qǐng)求為127.0.0.1，實(shí)現(xiàn)跨域
降域
瀏覽器內(nèi)部做了限制，只有同域名下的頁(yè)面才能用JS去獲取和操作iframe頁(yè)面，否則只能加載，但不能用外部JS去獲取和操作
通過(guò)設(shè)置document.domain的方式，將兩個(gè)域名的domain設(shè)置為一個(gè)，如對(duì)于a.test.com和b.test.com，可以通過(guò)js設(shè)置document.domain = "test.com"，實(shí)現(xiàn)跨域
演示舉例：
a.test.com:8080下的a.html內(nèi)嵌了一個(gè)iframe，src為http://b.test.com:8080/b.html
正常情況下，因?yàn)閍,b不同源，a不能修改內(nèi)嵌的iframe中輸入框的內(nèi)容；
但通過(guò)降域：document.domain = 'test.com';使得a可以修改內(nèi)嵌的b中的內(nèi)容
postMessage
postMessage是一個(gè)web API，可以實(shí)現(xiàn)跨域通信。window.postMessage()被調(diào)用時(shí)，會(huì)在所有頁(yè)面腳本執(zhí)行完畢后，向目標(biāo)窗口派發(fā)一個(gè)MessageEvent消息。語(yǔ)法如下：
otherWindow.postMessage(message, targetOrigin, [transfer]);
- otherwindow
其他窗口的一個(gè)引用，比如iframe的contentWindow屬性、執(zhí)行window.open返回的窗口對(duì)象、或者是命名過(guò)或數(shù)值索引的window.frames。 - message
將要發(fā)送到其他 window的數(shù)據(jù)。它將會(huì)被結(jié)構(gòu)化克隆算法序列化。這意味著你可以不受什么限制的將數(shù)據(jù)對(duì)象安全的傳送給目標(biāo)窗口而無(wú)需自己序列化。 - targetOrigin
通過(guò)窗口的origin屬性來(lái)指定哪些窗口能接收到消息事件，其值可以是字符串*（表示無(wú)限制）或者一個(gè)URI。在發(fā)送消息的時(shí)候，如果目標(biāo)窗口的協(xié)議、主機(jī)地址或端口這三者的任意一項(xiàng)不匹配targetOrigin提供的值，那么消息就不會(huì)被發(fā)送；只有三者完全匹配，消息才會(huì)被發(fā)送。這個(gè)機(jī)制用來(lái)控制消息可以發(fā)送到哪些窗口；例如，當(dāng)用postMessage傳送密碼時(shí)，這個(gè)參數(shù)就顯得尤為重要，必須保證它的值與這條包含密碼的信息的預(yù)期接受者的orign屬性完全一致，來(lái)防止密碼被惡意的第三方截獲。如果你明確的知道消息應(yīng)該發(fā)送到哪個(gè)窗口，那么請(qǐng)始終提供一個(gè)有確切值的targetOrigin，而不是*。不提供確切的目標(biāo)將導(dǎo)致數(shù)據(jù)泄露到任何對(duì)數(shù)據(jù)感興趣的惡意站點(diǎn)。 - transfer（可選）
是一串和message 同時(shí)傳遞的Transferable對(duì)象. 這些對(duì)象的所有權(quán)將被轉(zhuǎn)移給消息的接收方，而發(fā)送一方將不再保有所有權(quán)
message 的屬性有:
- data
從其他 window 中傳遞過(guò)來(lái)的對(duì)象 - origin
調(diào)用postMessage時(shí)消息發(fā)送方窗口的origin，這個(gè)字符串由 協(xié)議、“://“、域名、“ : 端口號(hào)”拼接而成。請(qǐng)注意，這個(gè)origin不能保證是該窗口的當(dāng)前或未來(lái)origin，因?yàn)閜ostMessage被調(diào)用后可能被導(dǎo)航到不同的位置。 - source
對(duì)發(fā)送消息的窗口對(duì)象的引用; 您可以使用此來(lái)在具有不同origin的兩個(gè)窗口之間建立雙向通信
安全問(wèn)題：
如果不希望從其他網(wǎng)站接收message，請(qǐng)不要為message事件添加任何事件偵聽器。 這是一個(gè)完全萬(wàn)無(wú)一失的方式來(lái)避免安全問(wèn)題。
如果確實(shí)希望從其他網(wǎng)站接收message，請(qǐng)始終使用origin和source屬性驗(yàn)證發(fā)件人的身份。 任何窗口（包括例如http://evil.example.com）都可以向任何其他窗口發(fā)送消息，并且不能保證未知發(fā)件人不會(huì)發(fā)送惡意消息。 但是，驗(yàn)證身份后，仍然應(yīng)該始終驗(yàn)證接收到的消息的語(yǔ)法。 否則，信任只發(fā)送受信任郵件的網(wǎng)站中的安全漏洞可能會(huì)在網(wǎng)站中打開跨網(wǎng)站腳本漏洞。
當(dāng)使用postMessage將數(shù)據(jù)發(fā)送到其他窗口時(shí)，始終指定精確的目標(biāo)origin，而不是*。 惡意網(wǎng)站可以在您不知情的情況下更改窗口的位置，因此它可以攔截使用postMessage發(fā)送的數(shù)據(jù)。
說(shuō)明：以上參考引用了MDN:window.postMessage
演示舉例
a中內(nèi)嵌b的iframe，同時(shí)向http://b.test.com:8080發(fā)送post消息；
并監(jiān)聽post消息，確認(rèn)origin來(lái)自b，才使用消息內(nèi)容；
b中做同樣處理，向a發(fā)送postmessage，同時(shí)監(jiān)聽消息，確認(rèn)來(lái)源為a
效果：
