CORSについて

ウェブアプリケーションが発展し、同一オリジンポリシーの制限を超えてデータのやり取りを行いたいというニーズが増えてきました。 その際サイトを超えたデータのやり取りに関する仕様として策定されたのがCORSです。

同一オリジンポリシー

同一オリジンではない、他のサイトへのアクセスを制限するもので、同一オリジンである条件は以下を満たすもの。

  • ホストが一致している
  • スキームが一致している
  • ポート番号が一致している

異なるオリジンからの読み出しを許可する

異なるオリジンからの読み出しを許可するためには、Access-Control-Allow-Originというヘッダーを情報の提供元がHTTPレスポンスヘッダに付与する必要があります。

プリフライトリクエスト

読み出し(GETメソッド)などのシンプルなリクエストの場合には上記のようにAccess-Control-Allow-Originを付与すれば問題ありませんでした。 しかしシンプルなリクエストではない場合には、ブラウザは異なるオリジンに対し、プリフライトリクエストを送信します。

シンプルなリクエストである条件は以下を満たすもの

メソッド

  • GET
  • HEAD
  • POST

リクエストヘッダ

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type

Content-Type

  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

上記のリクエスト以外はプリフライトリクエストというHTTPリクエストを送ります。

認証を含むリクエスト

デフォルトでは異なるオリジンに対するリクエスト内に、HTTP認証やクッキーなどの認証に用いられるリクエストヘッダは送信されません。認証を含むリクエストを行うには以下を満たす必要があります。

  • リクエスト側は、XMLHttpRequestのwithCredentialsプロパティをtrueにする。
  • レスポンス側は、Access-Control-Allow-Credentialsレスポンスヘッダーをtrueにする。

参考ページ

参考文献

体系的に学ぶ 安全なWebアプリケーションの作り方 第2版