跨域知識梳理

SwordFly 發(fā)布于2019-08-22 10:54 / 2942人閱讀

摘要：摘自阮一峰博客延伸閱讀不涉及跨域跨源資源分享為標準兼容性參考優(yōu)點提供安全的跨域數(shù)據(jù)傳輸，且不限于請求。跨域資源共享阿里云技術(shù)文檔跨域資源共享詳解阮一峰

參考：
維基百科 - Root domain
https://en.wikipedia.org/wiki...
瀏覽器同源政策及其規(guī)避方法 - 阮一峰
http://www.ruanyifeng.com/blo...
window.name 跨域?qū)崿F(xiàn)原理及實例
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） - 阿里云技術(shù)文檔
https://www.alibabacloud.com/...

1 基本概念 1.1 域&域名

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

1.2 同源策略&跨域

同源條件：協(xié)議相同、域名相同、端口相同，不滿足即為跨域
同源目的：瀏覽器同源策略，保證用戶信息的安全，防止惡意的網(wǎng)站竊取數(shù)據(jù)

1.3 限制范圍

很多文章中介紹，跨域會對以下3種行為進行限制：

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

cookie 身份授權(quán)多帶帶一類

localStorage、indexedDB、dom 跨域受限，一般發(fā)生在 iframe 或 window.open 的跨域需求時，無法獲取新頁面的 window 對象，自然無法訪問 window.localStorage、window.indexedDB、document.getElementById

ajax 請求多帶帶一類。

2 實現(xiàn)跨域 2.1 document.domain

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

2.2 URL #hash + hashChange事件監(jiān)聽

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

2.3 window.name

可解決 iframe 的跨域問題
window.name 的變化如何監(jiān)聽是一個問題，大約可以存儲2M的內(nèi)容

2.4 html5 postMessage + message事件監(jiān)聽

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

2.5 ajax - JSONP

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

實現(xiàn)原理：web頁面上調(diào)用js文件時不受同源策略影響，擁有src屬性的標簽都擁有跨域的能力，比如
服務(wù)端實現(xiàn)

客戶端將 http 跨域查詢參數(shù) flightNumber 與回調(diào)函數(shù) flightHandler 傳遞給服務(wù)器，服務(wù)器處理完后動態(tài)生成 test.js 返回，瀏覽器加載 test.js 完成后執(zhí)行 flightHandler，完成跨域請求。
在實際編碼時，客戶端可使用如 jQuery 封裝好的 JSONP API。
2.6 ajax - websocket
WebSocket是一種通信協(xié)議，使用ws://（非加密）和wss://（加密）作為協(xié)議前綴。該協(xié)議不實行同源政策，只要服務(wù)器支持，就可以通過它進行跨源通信。摘自阮一峰博客
WebSocket 延伸閱讀（不涉及跨域）

2.7 ajax - CORS
CORS 跨源資源分享（Cross-Origin Resource Sharing）為 W3C 標準（兼容性參考）
優(yōu)點：提供安全的跨域數(shù)據(jù)傳輸，且不限于 GET 請求。整個CORS通信過程，都是瀏覽器自動完成，不需要用戶參與。對于開發(fā)者來說，CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。瀏覽器一旦發(fā)現(xiàn)AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求。因此，實現(xiàn)CORS通信的關(guān)鍵是服務(wù)器。只要服務(wù)器實現(xiàn)了CORS接口，就可以跨源通信。
跨域資源共享（CORS） - 阿里云技術(shù)文檔
跨域資源共享CORS詳解 - 阮一峰