Javascript

javascriptでクロスドメイン対応する場合の覚書

Posted on 2013年3月19日 by me

Ajaxを利用したクロスドメインでのデータ通信をいくつか試したのでそのときのメモ。

そもそも今回やりたかった事は、以下の３点を満たすようなデータ通信なのだけど、

  • クロスドメインでのデータ通信
  • SSLでの通信
  • Basic認証配下のコンテンツにアクセス

Basic認証の部分のみ上手いやり方が思いつかなかった。。
これは引き続き調査しつつ、今回試したクロスドメインでのデータ通信のメモを残してみる。

で、そもそもクロスドメインでのデータ通信なのだが、これを実現するには以下の２つ方法があるらしい。

  1. JSONPを利用した対応
  2. CORS (Cross-Origin Resource Sharing)を利用した対応

JSONPを利用した対応は以前にも利用した事があったのだけど、CORSは知らなかった。
今回は以下の方法を試してみた。

  1. JSONPを利用した対応(<script>タグを利用)
  2. JSONPを利用した対応(jQuery ajaxを利用)
  3. CORS (Cross-Origin Resource Sharing)を利用した対応

1. JSONPを利用した対応(<script>タグを利用)

これが一番簡単な対応かもしれない。以下の例だとjavascriptでscriptタグに後からURLを追加しているけど、はじめからscriptタグに追記しても良いと思う。

var callback = function(data){
  console.log('[Using <script> tag case] '+data);
}
var script = document.createElement('script'); 
script.src = 'http://www.dummy.com/jsonp.php';

2. JSONPを利用した対応(jQuery ajaxを利用)

jQueryでもajax関数を使う事でJSONPを利用する事ができる。その場合はjsonpCallbackオプションに
コールバック関数を指定する。

(function(){
  $.ajax({
  'type':'get',
  'url':'http://www.dummy.com/jsonp.php',
  'jsonpCallback':'callback',
  'timeout':5000,
  'dataType':'jsonp'
})
.done(function(data){
  if(data){
    console.log('[Using jQuery.ajax function case] '+data);
  }
})
.fail(function(jqXHR,textStatus,errorThrown){
  console.log('['+textStatus+'] '+errorThrown);
}); 
}());

3. CORS (Cross-Origin Resource Sharing)を利用した対応

わかりやすい説明は他のブログに任せるとして、とりあえずCORSはHTTPリクエストに付与するOriginリクエストヘッダ(Access-Control-Allow-Originレスポンスヘッダ)を弄る事でクロスドメイン通信に対応する方法らしい。

具体的にはこんな感じ。

<?php
// サーバー側(PHPで実装)
$jsonArray=array(
     array(
          'title'=>'Test title 1',
          'description'=>'Decsciption',
          'url'=>'http://www.google.com'
     ),
     array(
          'title'=>'Test title 2',
          'description'=>'Decsciption',
          'url'=>'http://www.google.com'
     ),
     array(
          'title'=>'Test title 3',
          'description'=>'Decsciption',
          'url'=>'http://www.google.com'
     ),
     array(
          'title'=>'Test title 4',
          'description'=>'Decsciption',
          'url'=>'http://www.google.com'
     ),
     array(
          'title'=>'Test title 5',
          'description'=>'Decsciption',
          'url'=>'http://www.google.com'
     ),
);
header('Access-Control-Allow-Origin: *');
echosprintf("callback(%s)",json_encode($jsonArray));

これだとクライアント側でXMLHttpRequest2による通信が可能になる。

//クライアント側
varxmlhttp=null;
if(typeofXDomainRequest!="undefined"){
// IE8
xmlhttp=newXDomainRequest();
}
elseif(typeofXMLHttpRequest!="undefined"){
  // firefox, safari, chorme and so on..
  xmlhttp=newXMLHttpRequest();
}
elseif(window.ActiveXObject){
  // previous IE7
  xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
else{
  console.log('This blowser disable to crossdomain request. ');
}

xmlhttp.onReadyStateChange=function(){
  console.log(xmlhttp.readyState);
  if(xmlhttp.readyState==2){
    console.log(xmlhttp.responseText);
  }
}
xmlhttp.open(
  "GET",
  "http://www.dummy.com/json.php",
  true
);
xmlhttp.send();

一応ソースはgithubにもアップしておいたので、他の方法とかBasic認証と絡めた対応とかができたらコミットしておこうと思う。

javascript crossDomainPattern js – github