TERM 009
CORS
ブラウザによる、オリジンをまたぐ通信の許可表
CORSは、あるオリジンのWebページから別オリジンのサーバーへ送るリクエストについて、ブラウザがレスポンスをページへ渡してよいか判断する仕組みです。
異なるオリジン間のリクエストを制御する仕組みの全体像。
CONTENTSこの記事の目次＋
QUICK OVERVIEW
30秒でつかむ
通信元の単位
スキーム・ホスト・ポートの組み合わせで判定します。
事前確認
影響の大きい要求ではOPTIONSで許可条件を先に確認します。
資格情報付き通信
Cookieを含める場合は送受信双方で明示的な設定が必要です。
01 — DEFINITION
CORSとは
何か
CORSは、あるオリジンのWebページから別オリジンのサーバーへ送るリクエストについて、ブラウザがレスポンスをページへ渡してよいか判断する仕組みです。
02 — HOW IT WORKS
仕組みを
3段階で見る
細部へ入る前に、入力から結果までの役割を順番に捉えます。
送信元を付ける
ブラウザがページのオリジンをリクエストへ示す。
→許可範囲を返す
サーバーが許可するOriginやMethodを応答する。
→ブラウザが判定
一致した場合だけページへレスポンスを公開する。
CORSを理解するときの、最小の処理単位です。
03 — ESSENTIALS
押さえるべき
3つの要点
名前だけでなく、この3点の関係まで理解すると実装へつなげやすくなります。
通信元の単位
スキーム・ホスト・ポートの組み合わせで判定します。
事前確認
影響の大きい要求ではOPTIONSで許可条件を先に確認します。
資格情報付き通信
Cookieを含める場合は送受信双方で明示的な設定が必要です。
04 — REAL WORLD EXAMPLE
管理画面からAPIを呼ぶ
app.example.comの画面がapi.example.comへデータを送ります。
- 01
ブラウザがOriginを付けて要求する
- 02
APIが許可済みOriginを応答する
- 03
ブラウザが一致を確認して結果を渡す
05 — WATCH OUT
理解するときの
注意点
便利な仕組みほど、守備範囲と失敗の前提を明確にします。
認証・認可の代わりではない
許可Originからの利用者にも、データ単位の権限確認が必要です。
ワイルドカードを安易に使わない
資格情報を扱うAPIでは具体的なOriginだけを許可します。
IN ONE SENTENCE
CORSとは？
異なるオリジン間のリクエストを制御する仕組み。