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ヘッダーをやり取りする際、初心者が最も陥りやすい仕様違反が存在します:
Cookieや認証情報を送信可能にする(Allow-Credentials: true)場合、ブラウザはワイルドカード * の指定を厳格に拒否します。サーバーはリクエストの Origin ヘッダーを検証した上で、許可された特定のオリジンのみを明示的に返信する必要があります。