itochin2の日記(仮)

主に備忘録。Perl、MySQL、Unity、開発管理などについて情報を残していきたい。

クロスドメインで調べた事メモ

ajaxでクロスドメインだと動かない件で、ググったことが多かったのでメモ。

そもそもクロスドメイン制約って?

Ajaxでは同一生成元ポリシーにもとづくセキュリティ上の制約がある。
以下の1つでも違うとアクセスできない。
・ホストが違う
プロトコルが違う
・ポートが違う

じゃあどうすれば?

JSONP

JSONPの仕組み
  1. javasciprtの読み込みは別ドメインからできる。
  2. なのでjavascriptを読み込む体で、HTTPリクエストする。リクエストにはcallbackってパラメータいる
  3. そしたらjavascriptのコードが返ってくる(おや?偶然だけど中身はJSON!)

request例
/api/item/detail?callback=jsonp&id=100

response例
content-Type: text/javascript
content: jsonp({"result":{"item_id":100, "item_name":'アイテム'}})

plackアプリで実装するとき
PLACK::Middleware::JSONPを使う
パラメータに'callback'があれば、自動的にjsonを上記の形にして
sizeとかcontent-Typeを修正してくれる。
JSONJSONPの対応を、モジュールに手を入れずにできる。

JSONPの課題
  • ブラウザ依存ある

XMLHttpRequest Level2に対応したブラウザじゃないとダメ。
IE7とかはさようなら。。

  • コードの精査はできない。

危険なコードも制御できずに実行される。

  • GETはできるけどPOSTできない。

ajaxで商品の参照はできるけど、購入は無理。

Access-Control-Allow-Originヘッダを付ける

レスポンスにヘッダを付けてあげる。
上記ヘッダで指定のオリジン(プロトコル・ホスト・ポート情報)が一致しているところからの
アクセスは受け付けるヘッダ。

まとめ

今回は深遠なる理由からJSONPで対応したが、
基本的にはヘッダを付けて制御するのが王道みたい。
ヘッダの値をアプリケーションで見て、制御がいるのかフレームワークで吸収されているのかを
調べるのがTODO。