了解です!
CORSとプリフライトリクエスト周りの内容を 整理して、わかりやすくまとめ直し ました。
そのままチーム資料・Google Docs に貼れるように整えました。
🚀 CORS と プリフライトリクエストの基礎まとめ
✅ CORS(Cross-Origin Resource Sharing)とは?
CORS とは、
異なるオリジン間でのリソース共有を許可する仕組み です。
🎯 何のため?
同一オリジンポリシー(セキュリティ制約)を緩和し、信頼されたオリジンからのリクエストのみ許可 します。
🔥 CORS設定の問題点と改善ポイント
❗️ 問題例
Laravelの config/cors.php が以下のように設定されていた場合:
return [
'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_headers' => ['*'],
'supports_credentials' => true,
];
この場合の問題点:
| 問題内容 | 詳細 |
|---|---|
| allowed_origins が * | 全てのオリジン からのリクエストを許可。信頼できないサイトからのリクエストも通る。 |
| supports_credentials が true | クッキー・セッション情報付きリクエストが可能 → CSRF攻撃リスク。 |
| 組み合わせが危険 | 悪意あるサイトからセッション付きリクエストが送信され、不正操作されるリスクがある。 |
🛠️ 改善案
1. 許可するオリジンを限定
'allowed_origins' => ['https://www.example.com'],
2. supports_credentials は必要なときのみ true
'supports_credentials' => true, // 認証情報が必要な場合のみ
3. 安全なCORS設定例
return [
'paths' => ['api/*'],
'allowed_methods' => ['GET', 'POST'],
'allowed_origins' => ['https://www.example.com'],
'allowed_headers' => ['Content-Type', 'X-Requested-With'],
'supports_credentials' => true,
];
🚀 プリフライトリクエスト(Preflight Request)とは?
本リクエストの前にブラウザが送る事前確認リクエスト。
🎯 目的
サーバーが以下を許可しているか事前確認:
• リクエスト元オリジン
• HTTPメソッド
• カスタムヘッダー
🔥 プリフライトリクエストが発生する条件
以下のどれかに該当すると発生します:
| 条件 | 例 |
|---|---|
| HTTPメソッドが GET, POST, HEAD 以外 | PUT, DELETE など |
| Content-Type が特殊 | application/json など |
| カスタムヘッダーが含まれる | Authorization, X-Requested-With など |
📄 プリフライトリクエストの流れ
1. OPTIONS メソッドで確認リクエストを送信
例:
OPTIONS /api/resource HTTP/1.1
Origin: https://client.example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Authorization, Content-Type
2. サーバーのレスポンス
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://client.example.com
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: Authorization, Content-Type
Access-Control-Allow-Credentials: true
3. 本リクエスト送信
プリフライトが成功した場合、POSTやPUTなどのリクエストが行われる。
🔐 セキュリティリスクまとめ
| 設定 | リスク |
|---|---|
| allowed_origins が * | 全オリジンからアクセス可能(危険) |
| supports_credentials が true と allowed_origins が * の組み合わせ | CSRF攻撃の温床 |
🚫 プリフライトリクエストを発生させたくない場合
• Content-Type を application/x-www-form-urlencoded にする
• カスタムヘッダーを送らない
• 同一オリジン でリクエストする
✅ 最後に
プリフライトリクエストは ブラウザが勝手に送る「安全確認」。
CORSの設定ミスがあると、不正リクエスト・CSRF被害につながるので注意。


コメント