JSONP & CORS

這次剛好要使用到cross-domain request,在這邊記錄一下不同的方法。 大家都知道,因為same origin policy的關係,不能跨網域送request

jsonp

jsonp就是解決這個問題的一個方法,雖然request不能跨網域,不過img,script這些倒是可以,所以jsonp就是透過新增script到head裡,src指向送出的url,借此達成cross domain request

使用方法

  • http method只能用GET
  • 在變數裡加上callback變數
http://example.com/users/123?callback=exec  

這行GET可以解釋為 取得id為123的user資料,並用exec把資料包起來。 所以回傳就像是這樣

exec({  
    "id": 123,
    "name": "wwwy3y3"
})

而這段就會在 新增的script中執行

cors

Cross-Origin Resource Sharing(CORS) 跨網域資源分享,就是另一種方法了,這個方法被稱為是modern jsonp,是新的規範。

跟jsonp比較之下

  • HTTP Method: jsonp只能用GET一種方法,cors 支援其他的http method
  • 瀏覽器支援: jsonp可以在老舊的瀏覽器運作,但CORS在比較舊版的瀏覽器就不行,所以使用cors可能要以jsonp當fallback
  • 後端支援: jsonp比起cors需要寫header,來的單純

cors support 瀏覽器支援程度 (from whencaiuse#cors)

使用方法

透過header之間的傳遞,判斷此網域是否為許可的網域

送出的request header中會有origin

Origin: http://foo.example  

表示送出request的網域

而回傳的respond header會包含Access-Control-Allow-Origin

Access-Control-Allow-Origin: http://foo.example  

如果Access-Control-Allow-Origin不包含foo.example則此request就不會被允許。

preflight

如果request不是GET或POST,preflight request就會先以OPTION method送出,確認request是否可以送出。

risk

特別需要注意的是這兩種方法都要注意csrf攻擊

http://erlend.oftedal.no/blog/?blogid=130

nodejs & express

express中有支援jsonp的api,使用上十分簡單

if(req.query.callback)  
    res.jsonp(datas);
else  
    res.json(datas);

只需要簡單判斷是否有callback變數即可。

而cors的部份npm也有module支援。

reference