Cross-Origin Resource Sharing（CORS）は、ウェブサーバーとブラウザ間の安全な通信を実現するための重要なメカニズムだ。ウェブアプリケーションが異なるドメインからリソースをリクエストする方法を提供することで、CORSは同一オリジンポリシー（SOP）の制限を克服するのに役立つ。SOPは、アプリケーションを配信しているドメインとは異なるドメインのデータにウェブアプリケーションがアクセスすることを制限するものだ。

このブログ記事では、CORSの重要性、その仕組み、そして異なるシナリオに応じたNginxでの設定方法を探る。また、allow-origin、allow-methods、allow-headers、expose-headersなどの主要なCORS概念についても掘り下げる。

CORSの重要性

CORSはモダンなウェブアプリケーションに不可欠だ。異なるドメインのサーバーとクライアント間の通信を可能にするからだ。これにより、アプリケーションは様々なドメインでホストされているデータやサービスに安全にアクセスしながら、ユーザーデータの整合性を維持することが保証される。

NginxでのCORS設定

Nginxは人気のあるウェブサーバーであり、CORSをサポートするよう簡単に設定できる。このセクションでは、NginxサーバーでCORSを有効にするための2つの異なる設定例を提供する。1つ目の設定は単一ドメイン用で、2つ目は複数のドメインとサブドメインをカバーする。

設定例1: 単一ドメイン（domain.com）

単一ドメインでCORSを有効にするには、Nginx設定ファイルのサーバーブロックに以下を追加する:

location / {
    add_header 'Access-Control-Allow-Origin' 'https://domain.com';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
    add_header 'Access-Control-Expose-Headers' 'Content-Length';
}

設定例2: 複数ドメインとサブドメイン（domain.com, domain1.com, domain2.com, domain3.com, およびサブドメイン）

複数のドメインとサブドメインでCORSを有効にするには、Nginxサーバーブロックで以下の設定を使用する:

location / {
    if ($http_origin ~* (https?://(?:.+\.)?(domain\.com|domain1\.com|domain2\.com|domain3\.com)$)) {
        add_header 'Access-Control-Allow-Origin' '$http_origin';
    }
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
    add_header 'Access-Control-Expose-Headers' 'Content-Length';
}

CORSの概念

  1. Access-Control-Allow-Origin: このヘッダーは、どのオリジンがサーバー上のリソースにアクセスを許可されるかを指定する。例では、単一ドメインを設定するか、正規表現を使用して複数のドメインとサブドメインにマッチさせている。
  2. Access-Control-Allow-Methods: このヘッダーは、クライアントがサーバーにリクエストを行う際に使用できる許可されたHTTPメソッド（GET、POST、OPTIONSなど）を定義する。
  3. Access-Control-Allow-Headers: このヘッダーは、クライアントがリクエストに含めることができる許可されたHTTPヘッダーをリストする。一般的なヘッダーには"Content-Type"や"Authorization"が含まれる。
  4. Access-Control-Expose-Headers: このヘッダーは、サーバーがクライアントに公開するヘッダーを指定する。例では"Content-Length"ヘッダーを公開している。

結論

CORSはモダンなウェブアプリケーションにとって重要なセキュリティメカニズムだ。NginxでCORSを理解し実装することで、ウェブアプリケーションが異なるドメイン間で安全にリソースにアクセスできることを保証できる。このガイドにより、単一または複数のドメインとサブドメインに対してNginxでCORSを設定できるようになり、allow-origin、allow-methods、allow-headers、expose-headersなどの主要なCORS概念の重要性も理解できたはずだ。NginxサーバーがCORS準拠であることを確保することで、ウェブアプリケーションのセキュリティと機能性が向上し、より良いユーザーエクスペリエンスと様々なプラットフォーム間での互換性の向上がもたらされる。