jsonp跨域的原理以及優缺點
在開發測試中,難免會在不同域下進行跨域操作,出於安全性考慮,瀏覽器中的同源策略阻止從一個域上載入的指令碼獲取或者操作
另一個域下的文件屬性,這時需要進行跨域的方式進行解決,如:使用jsonp ,iframe等
1.jsonp的原理
jsonp,即json+padding,動態建立script標籤,利用script標籤的src屬性可以獲取任何域下的js指令碼,通過這個特性(也可以說漏洞),服
務器端不在返貨json格式,而是返回一段呼叫
某個函式的js程式碼,在src中進行了呼叫,這樣實現了跨域.
2.應用場景
在網上經常看到別人的blog中在用jsonp模仿360和百度進行跨域拿資料,這兩者就是典型的跨域請求案例.又比如在近期開發中前端部
分用的是vue.js進行開發,所以跟後臺進行交
互的時候就可以通過跨域進行通訊,正好用的jsonp(折騰 一番之後,最終沒有用這種方式,後面會說到),另外,qq空間大部分用的都是
jsonp.
3.優缺點
jsonp優點:
完美解決在測試或者開發中獲取不同域下的資料,使用者傳遞一個callback引數給服務端,然後服務端返回資料時會將這個callback
引數作為函式名來包裹住JSON資料,這樣客戶端就可以隨意定製自己的函式來自動處理返回資料了。簡單來說資料的格式沒有發生
很大變化
jsonp缺點:
這裡主要講jsonp的缺點,也就是我上面說的沒有用這個的原因
1.jsonp只支援get請求而不支援post請求,也即是說如果想傳給後臺一個json格式的資料,此時問題就來了,瀏覽器會報一個http狀態碼
415錯誤,告訴你請求格式不正確,這讓我很蛋
疼(在登入註冊中需要給後臺傳一大串資料),如果都用引數的形式拼接在url後面的話不太現實,後臺取值也會顯得繁瑣,
2.在登入模組中需要用到session來判斷當前使用者的登入狀態,這時候由於是跨域的原因,前後臺的取到的session是不一樣的,那麼就不
能就行session來判斷.
3.由於jsonp存在安全性問題(不知qq空間的跨域是怎麼解決的,還是另有高招?)
後來考慮到上面的一系列問題,採用的是後臺進行設定允許跨域請求(但還是存在缺陷的,實質上還是跨域,如上面說的session問題)
.Header set Access-Control-Allow-Origin *
為了防止XSS攻擊我們的伺服器, 我們可以限制域,比如
安全防範:
1.防止callback引數意外截斷js程式碼,特殊字元單引號雙引號,換行符存在風險.
2.防止callback引數惡意新增script標籤,造成xss漏洞
3.防止跨域請求濫用,阻止非法站點惡意呼叫