Skip to content

4.5 同一生成元ポリシーとクロスオリジンリソース共有

4.5 同一生成元ポリシーとクロスオリジンリソース共有

XHTTPRequest では異なるドメインに対してアクセスを行い、レスポンスデータを読み込むことができない。これは同一生成元ポリシー(Same Origin Policy) というセキュリティ上のポリシーによるもの。
異なる生成元にアクセスしたい場合は、クロスオリジンリソース共有 (CORS: Cross-Origin Resource Sharing) を利用する。

4.5.1 CORS の基本的なやりとり

http://www.example.com/ から http://api.example.com/ にアクセスする場合。

  1. クライアント側から Originヘッダ で生成元 (http://www.example.com/) を指定する。
  2. サーバ側では許可する生成元一覧を保持し、Origin ヘッダの生成元が一覧に存在するかチェックを行う。
    1. 存在しない: 403 エラーを返す
    2. Access-Control-Allow-Origin というレスポンスヘッダに Origin ヘッダと同じ生成元を入れてレスポンスを返す。

4.5.2 プリフライトリクエスト

プリフライトリクエストは実際に生成元をまたいだリクエストを行う前に、そのリクエストが受け入れられるかどうかをチェックを行うこと。行う必要があるのは以下の場合。

  • HTTP メソッドが Simple Methods (HEAD/GET/POST) 以外の場合
  • 以下のヘッダ以外を送信しようとしている
    • Accept
    • Accept-Language
    • Content-Language
    • Content-Type
  • 以下のメディアタイプ以外を指定している
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain

プリフライトリクエストは OPTIONメソッド を利用して送信される。
プリフライトリクエストは通常はブラウザが自動的に発行するため、開発者が自分でリクエストを作成する必要はない。

4.5.3 CORS とユーザー認証情報

CROS ではユーザー認証情報 (Credential) を送信する場合は追加の HTTP ヘッダを利用する必要がある。

  • クライアント側
    • Cookieヘッダ や Authenticationヘッダ に認証情報を埋め込む
    • withCredentialsプロパティ に true をセットする
  • サーバ側
    • Access-Control-Allow-Credentialsヘッダ に true を入れて返す