JavaScriptでスクレイピング

XMLHttpRequestを使う

var xhr = new XMLHttpRequest();
var method = 'GET';
var target = 'http://google.com';
var async = true;

xhr.open(method, target, async);

xhr.responseType = 'document';
xhr.onload = function(e) {
  if (this.status === 200) {
    console.log(this.responseXML);
  }else{
    console.error('unexpected status code: '+this.status);
  };
}
xhr.send();

知っておくべきクロスドメイン問題

こっちが本題。

XMLHttpRequestはSameOriginPolicyによって、同一ドメイン内でなければ通常通信することができない。

この問題は XMLHttpRequest Level 2 で解決法が実装され、アクセス先（上記コードのtarget）のレスポンスヘッダに Access-Control-Allow-Origin: * またはアスタリスクの代わりにアクセス元のドメインを返してあげればアクセスが許可することができる。この Level 2 API は、モダンブラウザではIEを含むほぼすべてのブラウザで利用可能である。

しかしながら、アクセス先のシステムに手を加える必要があるため、この方法では自身の管理外のサーバーに対しては実施することはできない。また、レスポンスヘッダはDeveloper Consoleなどで少し知識があれば容易にのぞき見ることが可能であるため、「このドメインはこのドメインからのアクセスを公式に許可している」と表現していることとなる。これらが公開されているドメイン同士であれば特に問題はないが、アクセス元がプライベートなサービスであるなどの場合は少々問題がある。

上述の理由によって、JavaScriptを用いて他社ドメインのサービスをスクレイピングしてデータを表示するサービスは実現不可能であり、スクレイピング対象は同一ドメイン内に制限される。ただし、Chrome Extension等のブラウザ拡張であれば話は別であり、このクロスドメイン問題に該当せずレスポンスヘッダへの追加なしで任意のドメイン(*1)からデータを取得することが可能であるため、実現したい内容によっては十分検討の余地があるだろう。

*1: Google Chrome Extensionのmanifest.jsonでアクセス許可するドメインを指定する

ハナウタではJavaScriptのスペシャリストを募集しています！