Azure Cosmos DB でのクロスオリジンリソース共有 (CORS)

[アーティクル]
06/01/2023

適用対象: NoSQL

クロスオリジンリソース共有 (CORS) は、あるドメインで実行されている Web アプリケーションが別のドメイン内にあるリソースにアクセスできるようにする HTTP 機能です。 Web ブラウザーでは、Web ページから別のドメインの API を呼び出すことを防ぐために、同一オリジンポリシーと呼ばれるセキュリティ制限が実装されています。ただし、CORS を使用すれば、オリジンドメインから他のドメイン内の API を安全に呼び出すことができます。 Azure Cosmos DB の NoSQL 用 API では、"allowedOrigins" ヘッダーを使用してクロスオリジンリソース共有 (CORS) がサポートされるようになりました。 Azure Cosmos DB アカウントに対して CORS のサポートを有効にすると、認証済みの要求だけが指定されたルールに従って評価され、それらが許可されるかどうかが判断されます。

クロスオリジンリソース共有 (CORS) の設定は、Azure portal または Azure Resource Manager テンプレートから構成できます。 NoSQL 用 API を使用する Azure Cosmos DB アカウントの場合、Azure Cosmos DB では、Node.js とブラウザーベースの両方の環境で動作する JavaScript ライブラリがサポートされています。このライブラリでは、ゲートウェイモードの使用時に CORS サポートを利用できるようになりました。この機能を利用するために、クライアント側で必要となる構成はありません。 CORS サポートを利用すると、ブラウザー側のリソースから、JavaScript ライブラリを通じて Azure Cosmos DB に直接アクセスしたり、REST API から直接アクセスできるようにして、操作を簡素化することができます。

Note

CORS のサポートは、Azure Cosmos DB for NoSQL でのみ適用でき、サポートされています。 Cassandra、Gremlin、MongoDB には Azure Cosmos DB API を適用できません。これらのプロトコルでは、クライアントとサーバー間の通信に HTTP が使用されていません。

Azure portal から CORS サポートを有効にする

Azure portal を使用してクロスオリジンリソース共有を有効にするには、次の手順に従います。

Azure Cosmos DB アカウントに移動します。 [CORS] ページを開きます。
Azure Cosmos DB アカウントへのクロスオリジン呼び出しをできるようにするオリジンの、コンマ区切りリストを指定します。たとえば、https://www.mydomain.com、https://mydomain.com、https://api.mydomain.com などです。ワイルドカード "*" を使用してすべてのオリジンを許可し、[送信] を選択することもできます。

Note

現在、ドメイン名の一部にワイルドカードを使用することはできません。たとえば、https://*.mydomain.net のような形式はまだサポートされていません。

Resource Manager テンプレートから CORS サポートを有効にする

Resource Manager テンプレートを使用して CORS を有効にするには、既存のテンプレートに、"allowedOrigins" プロパティを含んだ "cors" セクションを追加します。この JSON は、CORS を有効にした新しい Azure Cosmos DB アカウントを作成するテンプレートの例です。

{
  "type": "Microsoft.DocumentDB/databaseAccounts",
  "name": "[variables('accountName')]",
  "apiVersion": "2019-08-01",
  "location": "[parameters('location')]",
  "kind": "GlobalDocumentDB",
  "properties": {
    "consistencyPolicy": "[variables('consistencyPolicy')[parameters('defaultConsistencyLevel')]]",
    "locations": "[variables('locations')]",
    "databaseAccountOfferType": "Standard",
    "cors": [
      {
        "allowedOrigins": "https://contoso.com"
      }
    ]
  }
}

ブラウザーから Azure Cosmos DB JavaScript ライブラリを使用する

現在、Azure Cosmos DB JavaScript ライブラリのパッケージには、CommonJS バージョンのライブラリのみが含まれています。このライブラリをブラウザーから使用するには、Rollup や Webpack などのツールを使用してブラウザー互換ライブラリを作成する必要があります。特定の Node.js ライブラリには、専用のブラウザーモックが必要になります。これは、必要なモック設定を含んだ Webpack 構成ファイルの例です。

const path = require("path");

module.exports = {
  entry: "./src/index.ts",
  devtool: "inline-source-map",
  node: {
    net: "mock",
    tls: "mock"
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  }
};

こちらのコードサンプルでは、TypeScript と Webpack を Azure Cosmos DB JavaScript SDK ライブラリと共に使用します。このサンプルでは、新しい項目の作成時にリアルタイムで更新を送信する Todo アプリを構築します。

ベストプラクティスとして、ブラウザーから Azure Cosmos DB と通信するために、主キーを使用することはしないでください。代わりに、リソーストークンを使用して通信を行ってください。リソーストークンについて詳しくは、「Azure Cosmos DB のデータへのアクセスのセキュリティ保護」をご覧ください。

次のステップ

Azure Cosmos DB アカウントを保護するその他の方法については、次の記事をご覧ください。

クロスオリジン リソース共有 (CORS) の構成

Azure portal から CORS サポートを有効にする

Resource Manager テンプレートから CORS サポートを有効にする

ブラウザーから Azure Cosmos DB JavaScript ライブラリを使用する

次のステップ

その他のリソース

クロスオリジンリソース共有 (CORS) の構成