跨域post請求實現方案小結--轉

【名詞解釋】

跨域：https://developer.mozilla.org/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript

同源策略（注意Network Access這一節）：http://www.w3.org/Security/wiki/Same_Origin_Policy

 

【問題描述】

瀏覽器出於安全的考量（避免惡意網站輕易讀取其餘網站顯示的內容，由於該內容可能含有敏感信息，想象iframe嵌套銀行網頁） 原則上容許跨域寫而限制了跨域讀。寫是指數據的上行/發送（sending request），讀是指數據的下行/接收（receiving response）。（然而跨域寫也是很不安全的，容易致使CSRF/clickjacking攻擊。瀏覽器已經限制了跨域讀，再限制跨域寫的話，那互聯網的每一個頁面都成了孤島。避免非法跨域寫須要用到token，本文不作討論。）

 

考慮下述狀況：

1. 指向外部域名的link和經過表單的向外部域發起get請求是同樣的，也都是容許的，點擊那一刻起，瀏覽器的當前域名轉向了目標網站，也就徹底是域內寫、讀了。
2. 經過表單向外部域發起post請求也是容許的，理由同上，源網站沒法讀取目標網站的任何內容。
3. AJAX（藉助XMLHttpRequest對象）跨域get/post是禁止的，由於使用AJAX就是爲了讀取響應的內容，這觸碰了跨域讀的限制。
4. JSONP屬於跨域讀，且形式限制爲get請求，由於它利用了script標籤的特性（瀏覽器認爲跨域讀腳本是例外，相似的還有img、iframe等等，注意它們共有的src屬性）。

 

所以對於瀏覽器而言：1和2沒有跨域；3遵循了限制跨域讀的原則；4屬於容許的例外。

 

 

雖然JSONP很好用，但它註定是get請求，get請求有語義要求（冪等）、長度限制（爲了兼容限制255字節）、安全隱患（容易受到csrf攻擊，csrf的解決必須是post請求配合token使用）。

 

 

那麼，如何實現跨域post請求呢？

 

【解決方案】

一、CORS

概述： Cross-Origin Resource Sharing，W3C制定的跨站資源分享標準。post前會產生一次options嗅探（稱之爲preflight，但 簡單請求不會出現）來確認有否跨域請求的權限；客戶端post時會帶上Origin頭指示來源網站，服務端響應時需帶上Access-Control-Allow-Origin頭與Origin頭的值匹配，以示許可。ie8提供了封裝好的XDomainRequest對象，部分實現了該標準；而其它瀏覽器則提供了 XMLHttpRequest（Level 2）對象。

要求：ie8（XDomainRequest）/ie10/safari4/GC/FF3.5

參考： cross-site xmlhttprequest with CORS

參考：https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS 

參考（中文）：http://www.zfkun.com/394.html （simple reuest的定義描述不完整）

優勢：W3C標準方案

缺點：不兼容老瀏覽器， 移動瀏覽器還沒有支持。    桌面和移動瀏覽器兼容性

 

注意：若在多個iframe之間跨域通訊，優先考慮  window.postMessage

 

二、invisible iframe

概述：經過js動態生成不可見表單和iframe，將表單的target設爲iframe的name以此經過iframe作post提交。提交後因爲跨域，沒法直接讀取響應內容。通常的作法是，iframe內經過js改變自身location的fragment，外部則監聽iframe的onload事件，讀取fragment的內容。有現成的跨域iframe通訊類庫，如jQuery PostMessage Plugin。

要求：ie6/safari/GC/FF4

參考： http://stackoverflow.com/questions/298745/how-do-i-send-a-cross-domain-post-request-via-javascript#answer-6169703

參考： http://softwareas.com/cross-domain-communication-with-iframes

參考： http://thomas.bindzus.me/2007/12/24/adding-dynamic-contents-to-iframes/

優勢：兼容性佳，facebook，google，新浪已/曾採用

缺點：依賴hack實現，響應數據量大時須要切片、屢次設置fragment並輪詢，響應頻繁時可能失效。

 

三、server proxy 

概述：當前域實現一個代理，全部向外部域名發送的請求都徑由該代理中轉。

缺點：每一個使用方都須要部署代理，數據中轉低效，對js有侵入。

 

四、flash proxy

概述：利用不可見的swf跨域post提交數據，須要部署crossdomain.xml。例如alirte會自動檢測，若用戶安裝了flash，則以此實現跨域通訊。

要求：flash9

參考： http://flxhr.flensed.com/

優勢：ADOBE標準方案，相對CORS兼容性佳，相對invisible iframe響應數據量較大時優點明顯。

缺點：依賴flash。

 

原文：http://blog.csdn.net/doraeimo/article/details/7329779