XMLHttpRequest とは何か？

XMLHttpRequest とは

　そもそも XMLHttpRequest とはなんでしょう。

　だらだらと書くと、XMLHttpRequest とは、javascript から HTTP アクセスを行う際に使用される API です。ブラウザから直接 HTTP アクセスする方式に比べ、Ajax 等の技術を使用すれば、Google Map のように画面遷移を行わなくとも情報を更新したりすることができます。但し、基本的にクロスドメイン(プロトコルやアドレスやポートが異なる)環境では情報の取得を行うことはできません。

　XMLHttpRequest と難解な名称がついていますが、基本は HTTP です。また XML 以外のデータ(JSONなど)を扱うことも可能です。

実際のデータのやりとり

　それでは実際に、サーバデータ(今回は JSON)にアクセスした場合、直接ブラウザでアクセスした場合と、XMLHttpRequest からアクセスした場合の HTTP ヘッダの違いを表示します。まずクロスドメインの場合です。

　直接アクセスした場合

1. Request URL:
   http://weather.livedoor.com/forecast/webservice/json/v1?city=170010
2. Request Method:
   GET
3. Status Code:
    
   200 OK

2. Request: Headers
3. Accept:
   text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
4. Accept-Encoding:
   gzip,deflate,sdch
5. Accept-Language:
   ja,en-US;q=0.8,en;q=0.6
6. Cache-Control:
   max-age=0
7. Connection:
   keep-alive
8. Cookie: ...
    
9. Host:
   weather.livedoor.com
10. User-Agent:
    Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Safari/537.36

1. Response: Headers
2. Content-Type:
   application/json; charset=utf-8
3. Transfer-Encoding:
   chunked
4. X-Content-Type-Options:
   nosniff
5. X-Frame-Options:
   DENY

　取得した JSON データは下記のようになります。

{

• pinpointLocations: 

   

  [

  •  

    {

    • link: "http://weather.livedoor.com/area/forecast/1720100",
    • name: "金沢市"

    },
  •  

    {

    • link: "http://weather.livedoor.com/area/forecast/1720300",
    • name: "小松市"

    },

  ...

  •  
• title: "石川県 金沢 の天気",
• description: 

   

  {

  • text: "(気圧配置など) 本州付近は高気圧に覆われています。 (天気分布など) 石川県は、晴れとなっています。 (今日の天気 24日) 高気圧に覆われますが、気圧の谷の影響を受けるでしょう。 このため、 石川県では、晴れで夜は曇りとなるでしょう。 (明日の天気 25日) 気圧の谷が通過する見込みです。 このため、 石川県では、曇りで朝から昼前にかけて雨となるでしょう。",
  • publicTime: "2014-02-24T10:41:00+0900"

  }

}

　次に、XMLHttpRequest からアクセスします

1. Request: Headers: Provisional headers are shown
2. Accept:
   application/json, text/javascript, */*; q=0.01
3. Origin:
   http://localhost/...
4. Referer:
   http://localhost/...
5. User-Agent:
   Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Safari/537.36

 　エラーとなります。エラー内容は、

XMLHttpRequest cannot load http://weather.livedoor.com/forecast/webservice/json/v1?city=170010. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

　要するに、相手サーバ側が「Access-Control-Allow-Origin」ヘッダを出力していないため、XMLHttpRequest は、送信されてきたデータにアクセスしない。ということです。前にも記載しましたが、この場合でも JSON データは送信されてきています。あくまで  XMLHttpRequest 側で拒否しているということです。

　サーバ側に、「Access-Control-Allow-Origin」ヘッダの付与をお願いするわけにはいきませんし、これで手詰まりです。これを回避するには、javascript 以外の言語を使用するのみです。

　では、同一ドメインではどのような情報がやりとりされているのでしょうか。

　ブラウザから直接アクセスした場合 

　　こちらは、クロスドメインと同様です。単に、HTTP/GET メソッドでデータを取得するだけですので、そのまま JSON データを受信します。

　XMLHttpRequest からアクセスした場合 

 

1. Request Method: GET
    
2. Status Code:
    
   200 OK
4. Request: Headers
5. Accept:
   application/json, text/javascript, */*; q=0.01
6. Accept-Encoding:
   gzip,deflate,sdch
7. Accept-Language:
   ja,en-US;q=0.8,en;q=0.6
8. Connection:
   keep-alive
9. Host:
   localhost
10. User-Agent:
    Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Safari/537.36
11. X-Requested-With:
    XMLHttpRequest

1. Response: Headers
2. Connection:
   Keep-Alive
3. Content-Length:
   277
4. Content-Type:
   text/javascript; charset=UTF-8
5. Keep-Alive:
   timeout=5, max=100
6. X-Content-Type-Options:
   nosniff
7.  

　こちらも JSON データが正常に取得されます(データは割愛)。 

 「X-Requested-With」ヘッダが付加されています。これは、XMLHttpRequest が、自分が「XMLHTTPRequest」であることを宣言しているわけです。これにより、サーバ側はクライアントが XMLHttpRequest からアクセスされたことを認識できるわけです。ただ、これも繰り返しになりますが、ヘッダ情報はスクリプトなどを使用して疑似ブラウザを作成すれば、いくらでも改編できますので、それを完全に信用するのはセキュリティホールにつながります。

 　また、このヘッダ情報はクロスドメインでは送信されません。おそらく、もともとクロスドメインで XMLHttpRequest アクセスが許可されていないためであると思われます。