HTML5のCORS（オリジン間リソース共有）とは？仕組みと実装方法を解説

CORS（オリジン間リソース共有）とは

CORS（Cross-Origin Resource Sharing：オリジン間リソース共有）は、Webブラウザ上で、別のドメイン（オリジン）が持つ制限されたリソースへのアクセスを許可するための仕組みです。通常、ブラウザはセキュリティ上の理由から「同一オリジンポリシー」によって、異なるドメイン間のリソースのやり取りを制限しています。CORSは、HTTPヘッダーを利用してこの制約を安全に緩和するための標準規格です。

カメラアクセス許可の具体例

たとえば、HTML5デモセクションにある動画プレーヤーをクリックすると、カメラの使用許可を求められます。ユーザーが許可を選択した場合にのみカメラが起動し、許可しなければそのWebアプリケーションでカメラを利用することはできません。このように、クロスオリジンのリソースへアクセスする際には、ユーザーの同意やサーバー側の許可が必要となります。

ブラウザごとの対応状況

CORSリクエストの実装方法は、ブラウザによって異なります。Chrome、Firefox、Opera、Safariは「withCredentials」プロパティを持つXMLHttpRequest2オブジェクトを使用します。一方、旧Internet Explorerは同等の機能を持つXDomainRequestオブジェクトを採用しています。そこで、両者を自動的に判別してリクエストオブジェクトを生成する関数を用意するのが一般的です。

CORSリクエスト生成のコード例

function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();

    if ("withCredentials" in xhr) {
        // XMLHttpRequestオブジェクトに"withCredentials"プロパティが
        // 存在するかどうかを確認します。
        // "withCredentials"はXMLHttpRequest2オブジェクトにのみ存在します。
        xhr.open(method, url, true);
    }
    else if (typeof XDomainRequest != "undefined") {
        // 次にXDomainRequestの有無を確認します。
        // XDomainRequestはIEにのみ存在する、IE独自のCORSリクエスト手段です。
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        // いずれも利用できない場合、
        // ブラウザはCORSに対応していません。
        xhr = null;
    }
    return xhr;
}

var xhr = createCORSRequest('GET', url);
if (!xhr) {
    throw new Error('CORS not supported');
}

まとめ

このように、まず「withCredentials」プロパティの有無でモダンブラウザ向けのXMLHttpRequest2かどうかを判定し、非対応の場合はIE独自のXDomainRequestへ切り替えることで、複数のブラウザ環境でもクロスオリジン通信を実現できます。なお、現在主流となっている最新のブラウザでは、fetch APIを使うことでよりシンプルにCORSリクエストを扱うことも可能です。