Curious TechieDev Toolbox
すべてのガイド/Web標準9 min read

CORSと同一生成元ポリシー(SOP)の完全解説

Cross-Origin Resource Sharingの仕組み、プリフライトOPTIONSリクエスト、CORSエラーの原因と安全なAPI設定手法。

重要ポイント (要約)
  • 同一生成元ポリシー(SOP)は、スキーム・ホスト・ポートが異なるオリジンからのデータ読み取りを制限します。
  • CORSは、サーバー側がHTTPヘッダーを用いて特定の外部オリジンにアクセスを許可するための規格です。
  • 非単純リクエストでは、ブラウザが事前に OPTIONS プリフライトリクエストを送信して安全性を確認します。
  • 認証クッキーやヘッダーを含む通信では、ワイルドカード Access-Control-Allow-Origin: * はブラウザによって拒否されます。
  • CORSはブラウザが強制するセキュリティ機能であり、サーバー間通信(cURL等)には適用されません。

1. 同一オリジンポリシー(SOP)とは何か?

同一オリジンポリシー(Same-Origin Policy / SOP)は、悪意あるスクリプトからユーザーを保護するためにブラウザが強制するセキュリティ境界です。SOPにより、https://bank.com 上で実行中のJavaScriptは、別オリジンである https://malicious.com のCookieやローカルストレージ、Fetchレスポンスデータを勝手に読み取ることができません。

2つのURLが「同一オリジン」とみなされるのは、プロトコル(Scheme)ホスト名(Domain)、およびポート番号(Port)が完全に一致する場合に限られます:

https://api.example.com:443 vs https://example.com:443クロスオリジン(サブドメインの不一致)
http://example.com:80 vs https://example.com:443クロスオリジン(プロトコルの不一致: HTTP vs HTTPS)
https://example.com/app vs https://example.com/api同一オリジン(パスの違いは同一とみなされる)

2. CORSによる安全なクロスオリジンアクセスの仕組み

CORS (Cross-Origin Resource Sharing) は、WebサーバーがHTTPレスポンスヘッダーを返すことで、明示的に許可された外部オリジンに対してのみデータ読み取りを認める仕組みです:

  • Access-Control-Allow-Origin: リソースへのアクセスを許可するオリジン(例:https://app.curious-techie.com)。
  • Access-Control-Allow-Methods: 許可されるHTTPメソッド(例:GET, POST, PUT, DELETE)。
  • Access-Control-Allow-Headers: クライアントからの送信を許可するリクエストヘッダー(例:Content-Type, Authorization)。
  • Access-Control-Max-Age: ブラウザがプリフライト(OPTIONS)結果をキャッシュできる秒数。

3. プリフライトOPTIONSリクエストとキャッシュ戦略

JSONデータ(Content-Type: application/json)の送信やカスタム認証ヘッダー(Authorization: Bearer ...)の付与など、非単純リクエスト(Non-Simple Request)を行う際、ブラウザは本通信の前に自動的に HTTP OPTIONS プリフライトリクエスト をサーバーへ送信して安全性を確認します。

4. クレデンシャル(Cookie)とワイルドカード指定の落とし穴

オリジン間で認証CookieやAuthorizationヘッダーをやり取りする際、初心者が最も陥りやすい仕様違反が存在します:

無効な仕様の組み合わせ: Access-Control-Allow-Origin: * + Access-Control-Allow-Credentials: true

Cookieや認証情報を送信可能にする(Allow-Credentials: true)場合、ブラウザはワイルドカード * の指定を厳格に拒否します。サーバーはリクエストの Origin ヘッダーを検証した上で、許可された特定のオリジンのみを明示的に返信する必要があります。