クロスドメイン制約

crossdomain.md

クロスドメイン制約

HTMLでXMLHttpRequestを利用したHTTP通信のクロスドメイン制約の概要についてのまとめです。
Emscripten, Unity(WebGL,WebPlayer),Flashなどで問題の発生が予測されます。

XMLHttpRequest

XMLHttpRequest(以下XHR)はブラウザで既に読み込み済みのページからさらにHTTP通信を行うAPIです。

しかしXHRはセキュリティ上の理由でリクエスト先がHTMLファイルと同じドメインでなければいけないという制約があります。
これを『クロスドメイン制約』と呼ぶことがあります。

OK: ドメインAのHTMLからドメインAにXHR通信を行う
NG: ドメインAのHTMLからドメインBにXHR通信を行う

クロスドメイン制約の回避

制約の回避方法は主に以下の3点が考えられます。

• XHRリクエスト先のサーバー側でクロスドメイン接続を許可する
• HTMLのドメインを経由して異なるドメインに接続する
• JSONPを使用する

XHRリクエスト先のサーバー側でクロスドメイン接続を許可する

Access-Control-Allow-Origin をサーバー側で設定します。
この設定はXHRによる接続先で行う必要があります。

以下の .htaccess ファイルに全てのファイルのアクセスを有効にする設定を追加した場合の設定です。

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin: "*"
</IfModule>

HTMLのドメインを経由して異なるドメインに接続する

クロスドメイン制約はサーバー側には適用されないので、HTMLが置かれたドメインを経由して接続したいサーバーに接続する方法です。
ブラウザは同じドメインにアクセスすることになるで制約を回避できます。

ドメインA : HTML が置かれたドメイン
ドメインB : 実際にリクエストを処理するサーバーがあるドメイン

[ブラウザ] --Request-> [ドメインA] --Request-> [ドメインB]

JSONPを使用する

HTMLの script 要素は異なるドメインを参照できる仕様を利用する方法です。
ただ想定された使用方法ではないので使い勝手やセキュリティの問題があるので十分な検討が必要です。

まとめ

• HTMLでXHRを利用してページを遷移せずにHTTP通信が行える
• XHRを利用した通信でHTMLと異なるドメインにアクセスできない制約がある
• サーバー側で何かしらの対応をしないと基本的には制約を回避することはできない
• 詳しい制約の回避方法はググれば出てくるので状況にあったものを選択する

2015/11/11 作成