CORSとクロスドメインエラー

CORSとは？

CORS（Cross-Origin Resource Sharing）は、Webアプリケーションが別のオリジン（ドメイン、プロトコル、ポート番号が異なるリソース）に対して、HTTPリクエストを安全に送るための仕組み。通常、Webブラウザはセキュリティの理由で、異なるオリジンからのリソースの読み込みを制限するが、CORSを使用することで、指定したオリジンに限りアクセスを許可することができる。

オリジンとは？

オリジンとは、プロトコル、ドメイン、ポート番号の組み合わせを指す。たとえば、https://yahoo.co.jp:443 のように表現され、同じドメインでもプロトコルやポート番号が異なると別のオリジンとみなされる。

ドメイン：http://yahoo.co.jp
オリジン：https://yahoo.co.jp:443

なぜCORSが必要か？

CORSが必要となる背景には、Same-Origin Policy（同一オリジンポリシー）と呼ばれるWebセキュリティのポリシーがある。このポリシーは、異なるオリジン間でのリソース共有を制限するもので、Webアプリケーションがクロスドメインの攻撃から保護されるようになっている。特に、以下のセキュリティ脅威に対応するためにSame-Origin Policyが存在する。

クロスドメイン攻撃の例：

XSS (Cross-Site Scripting): 悪意のあるスクリプトが別のサイトに注入され、ユーザーの情報が盗まれる攻撃。
CSRF (Cross-Site Request Forgery): 正当なユーザーが意図しないリクエストを送信させられ、権限のある操作が行われてしまう攻撃。

これらのセキュリティリスクを避けながら、必要に応じて別オリジンのリソースにアクセスするためにCORSが導入されている。

CORSの実装

CORSを実装するには、サーバーサイドで正しいレスポンスヘッダーを設定する必要がある。クライアントが異なるオリジンのリソースにアクセスしようとした際、サーバーはCORSヘッダーを確認し、アクセスを許可するかどうかを判断する。

サーバーでのCORS設定例：

http
Access-Control-Allow-Origin: https://trusted-one.co.jp  // 特定のオリジンのみ許可
Access-Control-Allow-Origin: *   // 全てのオリジンを許可
Access-Control-Allow-Headers: "X-Requested-With, Origin, X-Csrftoken, Content-Type, Accept"  // 許可するヘッダーのリスト

CORSリクエストの種類

CORSリクエストは、単純リクエストとプリフライトリクエストの2つに大別される。

1. 単純リクエスト（Simple Request）:

ブラウザが自動的に処理できる基本的なリクエスト。HTTPメソッドがGET, POST, HEADに限定され、特別なヘッダーを使用しないリクエスト。

2. プリフライトリクエスト（Preflight Request）:

クライアントが特定のHTTPメソッド（PUT, DELETE, PATCH, など）やカスタムヘッダーを使用したい場合、まずブラウザはOPTIONSメソッドでサーバーに確認を取る。この確認がプリフライトリクエストであり、サーバーが許可するリクエストのみ実行される。

プリフライトリクエストのレスポンス例：

http
Access-Control-Allow-Methods: PUT, DELETE, PATCH  // 許可されたHTTPメソッド
Access-Control-Allow-Origin: https://example.com  // 許可されたオリジン
Access-Control-Allow-Headers: Content-Type, X-Requested-With  // 許可されたヘッダー

CookieとCORS

CORSを使用する際、クッキーなどの認証情報を含めてリクエストする場合は、サーバー側とクライアント側の設定が必要。withCredentials オプションを有効にし、サーバー側で Access-Control-Allow-Credentials: true ヘッダーを設定する必要がある。

例：

http
Access-Control-Allow-Credentials: true

ただし、Access-Control-Allow-Origin: * と Allow-Credentials: true は同時に使用できない（セキュリティ上の理由から）。

まとめ

CORSは、Webセキュリティを保ちつつ、異なるオリジン間での安全なデータのやり取りを可能にする重要な仕組み。同一オリジンポリシーに従いながらも、必要に応じてオリジン間のリソース共有を許可することで、アプリケーションの柔軟性と安全性を両立できる。クロスドメインエラーが発生した場合は、CORS設定やプリフライトリクエストの確認を行い、サーバー側のレスポンスヘッダーを適切に構成することが重要となる。

このように、CORSは複雑なセキュリティ要件に対応しつつ、異なるオリジン間でのリソース共有を安全に行うための基本的な手法となっている。