JavaScriptのクロスドメイン制約とはを現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのクロスドメイン制約について解説しています。クロスドメイン制約を簡単に説明すると、違う名前のサーバーに対して通信できないという制約になります。ただし不便な場合もあるので、今回は制約を回避して通信する方法について解説します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのクロスドメイン制約について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptのクロスドメイン制約について詳しく説明していくね!

大石ゆかり

お願いします!

 

クロスドメイン制約とは

クロスドメイン制約の説明の前に、「オリジン」という言葉について説明しましょう。Webサイトにアクセスするには、以下のような「URL」という文字列を使います。このURLが指し示すWebサイトの場所や通信手段のことを「オリジン」といいます。

  • https://www.google.com
  • http://www.test.co.jp:8080

クロスドメイン制約とは、セキュリティを保つためのブラウザの仕組みで異なるオリジンのデータにアクセスできないように制限するものです。

例えばJavaScriptのプログラムから、他のサイトのデータを取得しようとした際、クロスドメイン制約に該当してしまうと、以下のようなエラーが発生します。

クロスドメイン制約の前提となる「同一オリジンポリシー」については、以下のサイトが参考になるでしょう。

mozilla.org-origin_policy

 

クロスドメイン制約を回避する方法

従来は、ブラウザのクロスドメイン制約が厳しかったため、JavaScriptのプログラムから他のサイトのデータを取得する際、クロスドメイン制約に該当しないよう、以下のような工夫を行う必要がありました。

  • JavaScriptからではなく、自オリジンのサーバサイドのプログラムを経由してデータを取得する
  • jsonpという取得方法を使う
  • Flashを使う

しかし現在では、データを取得されるサーバー側で適切なアクセス制御情報「Access-Control-Allow-Origin」を設定しておくことで、クロスドメイン制約に該当することなく、他のサイトのデータを取得できるようになっています。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

今回のサンプルプログラムでは、XMLHttpRequestを使い、他のサイトのデータを取得しています。データの取得先は httpbin を使いました。

httpbinは様々なレスポンスを返してくれるサイトで、プログラミングのテストの際に良く用いられます。例えば「 https://httpbin.org/ip 」と指定すると、自分のIPアドレスが返ります。

 

<!DOCTYPE html>
<html>
 <head>
 <script>
  var request = new XMLHttpRequest();
  // リクエスト先の指定
  request.open('GET', 'https://httpbin.org/ip', true);
  request.responseType = 'json';
 
  request.onload = function () {
    // JSONデータを取得できた場合
    var data = this.response;
    console.log(data["origin"]);
  };
 
 // リクエストの送信
 request.send();
 </script>
 </head>
 <body></body>
</html>

実行結果は以下のようになります。数値(IPアドレス)は環境によって異なります。Chromeの場合、デベロッパーツールのコンソールで確認することができます。

筆者プロフィール

この記事を監修してくれた方

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握(実証実験)、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。