1. 程式人生 > >jsonp跨域的原理以及優缺點

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.防止跨域請求濫用,阻止非法站點惡意呼叫