HTML5とCORSを活用してWebブラウザで別ドメインの制限付きリソースへアクセスする方法

CORS（Cross-Origin Resource Sharing：オリジン間リソース共有）とは、Webブラウザ上で、別のドメイン（オリジン）から提供される制限付きリソースへのアクセスを許可するための仕組みです。通常、ブラウザはセキュリティ上の理由から「同一オリジンポリシー」によって異なるドメイン間の通信をブロックしますが、CORSを利用することでサーバー側が明示的に許可した相手に対してのみ、リソースの共有が可能になります。

具体例：HTML5動画プレーヤーとカメラへのアクセス

たとえば、HTML5デモセクションにある動画プレーヤーをクリックすると、カメラへのアクセス許可を求めるダイアログが表示されます。ユーザーがこの権限を許可した場合のみカメラが起動し、許可しなければWebアプリケーションはカメラにアクセスできません。このように、CORSはユーザーの同意のもとでクロスドメインのリソース利用を安全に実現するための重要な役割を担っています。

主要ブラウザにおけるCORSの実装方式

CORSリクエストの実装方法はブラウザによって異なります。Chrome、Firefox、Opera、Safariといったモダンブラウザでは 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にのみ存在するプロパティで、その有無を確認することでモダンブラウザかどうかを判別できます。
• XDomainRequest： Internet Explorer独自のオブジェクトであり、旧IE環境向けのフォールバックとして使用します。
• 非対応ブラウザ： どちらも利用できない場合は null を返し、「CORS not supported」エラーとして処理します。

なお、現在ではXDomainRequestをサポートする旧版Internet Explorerはすでにサポート終了となっているため、実際の開発では標準のXMLHttpRequestやfetch APIを使用すれば十分です。ただし、レガシーシステムの保守などで旧IEに対応する必要がある場合には、このようなフォールバック処理が依然として有用です。また、サーバー側では Access-Control-Allow-Origin ヘッダーなどを適切に設定することで、どのオリジンからのアクセスを許可するかを制御できます。