CORSは、Webブラウザが異なるサーバー間でリソースを安全に共有できるようにするセキュリティ機能です。
通常、同一オリジンポリシー(Same-Origin-Policy)が適用され、異なるサーバー(ドメイン)からのリクエストはブロックされます。CORSを使用することで、異なるサーバー間からのリクエストを許可することができます。
この記事ではCORSについて学んでいきます。
Webアプリケーションを構築していくとCORSについての理解が必要になってきます。
CORSを理解していないと、解決できない問題にぶつかることも少なくないです。
ここでしっかりCORSを理解し、Webアプリケーションの開発をしていきましょう。
同一オリジンポリシーとは
同一オリジンポリシーは、Webブラウザがセキュリティのために使用するポリシーです。
一般的なブラウザでは、このポリシーが実装されており、異なるオリジンへのリクエストを制限します。
オリジンは、下記の要素から決まります。一つでも異なる場合は、異なるオリジンとしてブラウザは動作します。
- スキーム(http、httpsなど)
- ドメイン
- ポート番号
CORSの仕組み
CORSは、サーバーが特定のヘッダーを使用して、どのオリジンからのリクエストを受け付けるかを判断します。
主なCORSヘッダー
| Access-Control-Allow-Origin | リクエストを許可するオリジンを指定します |
| Access-Control-Allow-Methods | 許可するHTTPメソッドを指定します |
| Access-Control-Allow-Headers | 許可するカスタムヘッダーを指定します |
| Access-Control-Allow-Credentials | 認証情報の送信を許可するかを指定します |
| Access-Control-Max-Age | プリフライトリクエストの結果をキャッシュする時間を指定します |
プリフライトリクエスト
プリフライトリクエストは、CORSのリクエストの一つです。
サーバーがCORSプロトコルを理解していて準備がされていることを、OPTIONSのメソッドと下記のヘッダーを使用してチェックします。
- Access-Control-Request-Method
- Access-Control-Request-Headers
- Origin
プリフライトリクエストはブラウザが自動的に行います。
このリクエストをして、実際のリクエストを送信することができるかどうかを確認します。
CORSの利点と注意点
利点
- 適切に設定することで、許可されていないオリジンからの不正なリクエストを防ぐことができる
- 特定のオリジンやメソッド、ヘッダーを許可することで必要なリソースへ安全にアクセスさせることができる
注意点
- Access-Control-Allow-Originに＊(ワイルドカード)の使用することはやめましょう。特定のオリジンのみ許可すること
- CORSエラーはブラウザのConsoleやNetworkに表示されますが、詳細な原因までは表示されません。そのため、原因を特定することが難しいことが多いです
まとめ
CORSは異なるサーバー間でのリクエストを制限し、Webアプリケーションのセキュリティと柔軟性を高める重要な仕組みです。
適切に設定し、不正なアクセスを防ぎ安全なWebアプリケーションを開発していくように心がけましょう。