CORS（Cross-Origin Resource Sharing）とは

インターネットは過去数十年で爆発的に成長し、ウェブサイト、アプリケーション、APIなどが今まで以上に相互に連携しています。この相互接続された世界において、異なるドメイン間でリソースを安全かつ柔軟に共有するメカニズムの必要性は極めて重要です。それがCORS（Cross-Origin Resource Sharing）です。

CORSは、ウェブサーバーとウェブクライアント（ブラウザなど）の間で安全な異なるオリジン間通信を可能にするウェブ標準です。これにより、サーバーは、どのオリジン（ドメイン、スキーム、ポート）が自分のリソースにアクセスできるかを指定でき、不正なアクセスを防止します。CORSは、ブラウザを使用して情報を読み取ることが許可されたオリジンの集合を説明する新しいHTTPヘッダーを追加することによって機能します。

クロスオリジンリクエストの理解

この章では、クロスオリジンリクエストの概念について詳しく説明し、典型的なCORSシナリオを構成する主要なコンポーネントについて紹介します。

オリジンと同一オリジンポリシー

オリジンには3つのコンポーネントがあります。プロトコル（HTTP、HTTPSなど）、ドメイン（例：example.com）、ポート番号（例：80、443）です。プロトコル、ドメイン、およびポート番号が一致する場合、2つのリソースは同じオリジンと見なされます。同一オリジンポリシー（SOP）は、ウェブブラウザで実装されたセキュリティ機能であり、ウェブページがウェブページを提供しているドメインと異なるドメインに対してリクエストを送信できないよう制限します。

SOPは、クロスサイトリクエストフォージェリ（CSRF）やクロスサイトスクリプティング（XSS）などのセキュリティ上の脆弱性を防ぐため、ウェブページが外部リソースに対して不正なリクエストを送信できないようにします。ただし、CORSが必要な場合には、SOPが制限的すぎる場合があります。CORSは、基本的なセキュリティ原則を維持しながら安全な異なるオリジン間通信を可能にすることで、この問題を解決します。

シンプルリクエストとプレフライトリクエスト

CORSは、2種類のクロスオリジンリクエストを区別しています。シンプルリクエストとプレフライトリクエストです。

シンプルリクエストは、特定の基準を満たすリクエストです。例えば、GET、HEAD、またはPOSTメソッドのみを使用し、許可されたヘッダーの限られたセットを持ち、特定のコンテンツタイプ（text/plain、application/x-www-form-urlencoded、またはmultipart/form-data）を使用します。ブラウザは、Originヘッダーを添付してサーバーに直接シンプルリクエストを送信します。

プレフライトリクエストはより複雑で、実際のリクエストが送信される前に追加のステップが必要です。ブラウザは、OPTIONSメソッドを使用してプレフライトリクエストを開始し、サーバーが望ましいリクエストメソッドとヘッダーをサポートしているかどうかを問い合わせます。サーバーが肯定的に応答した場合、ブラウザは実際のリクエストを進めます。

CORSヘッダーと役割

CORSは、サーバーとブラウザが通信し、リソースへのアクセスを交渉するための一連のHTTPヘッダーに依存しています。いくつかの重要なCORSヘッダーには、以下が含まれます。

• Origin: リクエストのオリジン
• Access-Control-Allow-Origin: リソースにアクセスできる許可されたオリジンを指定
• Access-Control-Allow-Methods: 許可されたHTTPメソッドを列挙
• Access-Control-Allow-Headers: 許可されたHTTPヘッダーを列挙
• Access-Control-Expose-Headers: リクエストするスクリプトに公開できるレスポンスヘッダー

これらのヘッダーは、CORSポリシーを施行し、安全な異なるオリジン間通信を可能にするために重要な役割を果たします。

ブラウザのCORSにおける役割

ウェブブラウザは、CORSメカニズムの中心であり、サーバーの応答ヘッダーに基づいてCORSポリシーを施行し、リソースへのアクセスを制御します。ブラウザは、オリジンの異なるリクエストに対してOriginヘッダーを自動的に送信し、サーバーの応答をCORSヘッダーで検査し、要求されたリソースへのアクセスを許可または拒否するかどうかを決定します。このプロセスはユーザーには透明であり、認証された異なるオリジン間通信のみが行われるように保証されます。

CORSの設定

この章では、Webサーバーやコンテンツ配信ネットワーク（CDN）など、さまざまな技術でCORSを構成する方法について説明します。

Webサーバー

Apache

ApacheでCORSを有効にするには、.htaccessファイルに次のディレクティブを追加するか、Apache構成ファイルの適切な<Directory>セクション内に挿入します。

Header set Access-Control-Allow-Origin "http://example.com"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"

Nginx

NginxでCORSを有効にするには、次のディレクティブをサーバーの構成ブロックに追加します。

add_header 'Access-Control-Allow-Origin' 'http://example.com';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';

コンテンツ配信ネットワーク（CDN）

Amazon CloudFront

Amazon CloudFrontでCORSを有効にするには、オリジンを構成して、応答にCORSヘッダーを追加します。また、キャッシュポリシーを作成して、ビューアーリクエストからオリジンへのOrigin、Access-Control-Request-Headers、Access-Control-Request-Methodヘッダーを転送します。

Cloudflare

Cloudflareでは、ドメインにWorkerスクリプトを追加することでCORSを有効にできます。

addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const response = await fetch(request)
  const corsHeaders = {
    'Access-Control-Allow-Origin': 'http://example.com',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type, Authorization',
  }

  const newHeaders = new Headers(response.headers)
  for (const [key, value] of Object.entries(corsHeaders)) {
    newHeaders.set(key, value)
  }

  return new Response(response.body, {
    status: response.status,
    statusText: response.statusText,
    headers: newHeaders,
  })
}

よくあるCORSエラーとトラブルシューティング

この章では、よくあるCORS関連の問題について説明し、効果的なトラブルシューティングとデバッグ方法について説明します。

CORSエラーの特定

CORSエラーはさまざまな方法で現れますが、通常はブラウザのコンソールにクライアントサイドのエラーとして表れます。一般的なエラーメッセージには以下が含まれます。

• "Access to XMLHttpRequest at 'URL' from origin 'ORIGIN' has been blocked by CORS policy."
• "No 'Access-Control-Allow-Origin' header is present on the requested resource."
• "The 'Access-Control-Allow-Origin' header contains multiple values 'VALUE', but only one is allowed."
• "Request header field 'HEADER' is not allowed by Access-Control-Allow-Headers in preflight response."

これらのエラーメッセージには、CORS問題の根本原因に関する有用な情報が含まれており、デバッグの方向性を示すことができます。

WebブラウザでのCORS問題のデバッグ

Webブラウザには、CORS問題のデバッグに役立つさまざまなツールが用意されています。

• ブラウザコンソール
  コンソールは、CORSに関連するエラーメッセージを表示し、問題の原因に関する貴重な情報を提供することができます。

• ネットワークタブ
  ブラウザの開発者ツールのネットワークタブでは、個々のHTTPリクエストとレスポンス、ヘッダー、ステータスコードなどを調査できます。これらの情報は、欠落しているCORSヘッダーや誤ったCORSヘッダーを特定するのに役立ちます。

• セキュリティタブ
  Chromeなどの一部のブラウザは、CORS関連の問題を含むセキュリティ問題に関する詳細な情報を表示するセキュリティタブを提供しています。

これらのツールを使用することで、CORS問題の原因を特定し、必要な場合にはサーバー構成やアプリケーションコードの変更を特定できます。

サーバーサイドでのデバッグ技術

サーバーサイドでのCORS問題のデバッグには、サーバーログ、構成ファイル、アプリケーションコードを調査することが必要です。考慮すべきいくつかのテクニックは次のとおりです。

• サーバーログ
  サーバーログを調べ、構成ファイルやミドルウェアに関する問題など、CORSに関連するエラーや警告があるかどうかを確認します。

• 構成ファイル
  サーバーとアプリケーションの構成ファイルを確認し、CORS設定が正しいかどうかを確認します。

• アプリケーションコード
  プリフライトリクエストの処理方法が間違っている、CORSヘッダーが適切に構成されていないなど、CORS問題を引き起こす可能性があるアプリケーションコードを調べます。

これらのテクニックを駆使して、サーバーサイドのコンポーネントを徹底的に調査することで、サーバーから発生するCORS問題を特定し、解決することができます。