
目次
CORS(Cross-Origin Resource Sharing、クロスオリジンリソース共有)とは
CORS(Cross-Origin Resource Sharing)は、Webブラウザのセキュリティ機能の一つです。あるオリジン(ドメイン、プロトコル、ポート番号の組み合わせ)で動作するWebページが、別のオリジンにあるリソースにアクセスしようとする際に発生する制限を、安全な方法で緩和する仕組みです。CORSは、Webアプリケーションのセキュリティを維持しつつ、異なるオリジン間でのリソース共有を可能にするために不可欠な技術です。
Webブラウザは、同一オリジンポリシーというセキュリティ原則に基づいて動作します。このポリシーは、あるオリジンからロードされたドキュメントやスクリプトが、別のオリジンにあるリソースにアクセスすることを原則として禁止します。同一オリジンポリシーは、悪意のあるWebサイトがユーザーの情報を不正に取得したり、ユーザーになりすまして操作したりするのを防ぐために重要な役割を果たします。
しかし、WebアプリケーションがAPIや画像、フォントなどのリソースを異なるオリジンから取得する必要がある場合、同一オリジンポリシーは大きな制約となります。CORSは、サーバーが特定のオリジンからのリクエストを許可するように設定することで、この制約を緩和します。CORSの設定によって、Web開発者はセキュリティを維持しながら、異なるオリジン間でのリソース共有を柔軟に行うことができるようになります。
CORSの仕組みと設定
「CORSの仕組みと設定」に関して、以下を解説していきます。
- CORSの動作フロー
- CORSの設定方法(サーバー側)
CORSの動作フロー
CORSの動作フローは、ブラウザが異なるオリジンへのリクエストを送信する際に、プリフライトリクエストと実際のデータリクエストの2段階で行われます。プリフライトリクエストは、OPTIONSメソッドを使用して、サーバーが特定のリクエストを許可するかどうかを確認するものです。サーバーが許可する場合、ブラウザは実際のデータリクエストを送信します。
プリフライトリクエストに対するサーバーの応答には、Access-Control-Allow-Originヘッダーが含まれており、許可されたオリジンが指定されます。このヘッダーの値がリクエスト元のオリジンと一致するか、ワイルドカード(*)が指定されている場合に、ブラウザはリクエストを許可します。CORSの動作フローを理解することで、異なるオリジン間でのリソース共有がどのように安全に行われるかを把握できます。
段階 | 内容 | ヘッダー |
---|---|---|
プリフライト | OPTIONSリクエスト送信 | Origin |
サーバー応答 | 許可オリジンを通知 | Access-Control-Allow-Origin |
データリクエスト | 実際のデータ送信 | Origin |
サーバー応答 | データと許可オリジンを通知 | Access-Control-Allow-Origin |
CORSの設定方法(サーバー側)
CORSの設定は、主にサーバー側で行います。サーバーは、HTTPレスポンスヘッダーにAccess-Control-Allow-Originを設定することで、特定オリジンからのリクエストを許可します。Access-Control-Allow-Originには、許可するオリジンを具体的に指定するか、すべてのオリジンを許可するワイルドカード(*)を使用できます。
Access-Control-Allow-Methodsヘッダーを使用すると、許可するHTTPメソッド(GET、POSTなど)を指定できます。Access-Control-Allow-Headersヘッダーを使用すると、許可するリクエストヘッダーを指定できます。CORSの設定を適切に行うことで、Webアプリケーションはセキュリティを維持しながら、異なるオリジンからのリソースを安全に利用できます。
ヘッダー | 説明 | 値の例 |
---|---|---|
Access-Control-Allow-Origin | 許可するオリジン | https://examplecom |
Access-Control-Allow-Methods | 許可するHTTPメソッド | GET, POST, OPTIONS |
Access-Control-Allow-Headers | 許可するリクエストヘッダー | Content-Type, Authorization |
Access-Control-Allow-Credentials | Cookie送信許可 | true |