1. 程式人生 > >JS跨域方案JSONP與CORS的各自優缺點以及應用場景

JS跨域方案JSONP與CORS的各自優缺點以及應用場景

從問題來看,相信題主已經瞭解JSONP與CORS的基本知識,回答也是建立在此基礎上。

首先明確:JSONP與CORS的使用目的相同,並且都需要服務端和客戶端同時支援,雖然功能上講CORS更為強大,但是需要根據應用場景選擇使用哪一個。

JSONP(json with padding 填充式json),利用了使用src引用靜態資源時不受跨域限制的機制。主要在客戶端搞一個回撥做一些資料接收與操作的處理,並把這個回撥函式名告知服務端,而服務端需要做的是按照javascript的語法把資料放到約定好的回撥函式之中即可。jQuery很早之前就已經吧JSONP語法糖化了,使用起來會更加方便。

CORS(Cross-origin resource sharing 跨域資源共享),依附於AJAX,通過新增HTTP Hearder部分欄位請求與獲取有許可權訪問的資源。CORS對開發者是透明的,因為瀏覽器會自動根據請求的情況(簡單和複雜)做出不同的處理。CORS的關鍵是服務端的配置支援。由於CORS是W3C中一項較“新”的方案,以至於各大網頁解析引擎還沒有對其進行嚴格規格的實現,所以不同引擎下可能會有一些不一致。

兩者優點與缺點大致互補,放在一塊介紹:

  1. JSONP的主要優勢在於對瀏覽器的支援較好;雖然目前主流瀏覽器支援CORS,但IE10以下不支援CORS。
  2. JSONP只能用於獲取資源(即只讀,類似於GET請求);CORS支援所有型別的HTTP請求,功能完善。(這點JSONP被玩虐,但大部分情況下GET已經能滿足需求了)
  3. JSONP的錯誤處理機制並不完善,我們沒辦法進行錯誤處理;而CORS可以通過onerror事件監聽錯誤,並且瀏覽器控制檯會看到報錯資訊,利於排查。
  4. JSONP只會發一次請求;而對於複雜請求,CORS會發兩次請求。
  5. 始終覺得安全性這個東西是相對的,沒有絕對的安全,也做不到絕對的安全。畢竟JSONP並不是跨域規範,它存在很明顯的安全問題:callback引數注入和資源訪問授權設定。CORS好歹也算是個跨域規範,在資源訪問授權方面進行了限制(Access-Control-Allow-Origin),而且標準瀏覽器都做了安全限制,比如拒絕手動設定origin欄位,相對來說是安全了一點。
    但是回過頭來看一下,就算是不安全的JSONP,我們依然可以在服務端端進行一些許可權的限制,服務端和客戶端也都依然可以做一些注入的安全處理,哪怕被攻克,它也只能讀一些東西。就算是比較安全的CORS,同樣可以在服務端設定出現漏洞或者不在瀏覽器的跨域限制環境下進行攻擊,而且它不僅可以讀,還可以寫。

應用場景:

如果你需要相容IE低版本瀏覽器,無疑,JSONP。

如果你需要對服務端資源進行謝操作,無疑,CORS。

其他情況的話,根據自己的對需求的分析和對兩者的理解來吧。