【セキュリティ】CORS はどんな場面で使われるのか

はじめに

Web 開発やセキュリティの文脈で必ず登場する CORS（Cross-Origin Resource Sharing）。
しかし実際には、

• 「なんとなく設定している」
• 「エラーが出たから * にした」
• 「CSRF 対策だと思っていた」

という 誤解 が非常に多い仕組みでもあります。

この記事では、

• CORS が なぜ存在するのか
• どんな実務シーンで使われるのか
• CORS が守るもの／守らないもの

を、具体例ベースで整理します。

---

CORS とは何か

CORS とは一言で言うと、

「このレスポンスを、別オリジンの JavaScript に読ませてよいか」をサーバーが宣言する仕組み

です。

重要なポイントは次の 3 つです。

• CORS は ブラウザが強制するルール
• サーバーはレスポンス自体は返している
• JS が「中身を読めるかどうか」を制御しているだけ

curl / Postman / backend-to-backend 通信には一切関係ありません

---

CORS がよく使われる代表的なシーン

1. API・Web サービス（最も典型的）

構成例

• フロントエンド
  https://example-client.com
• API
  https://example-api.com

fetch("https://example-api.com/users")

CORS がない場合

• API は 200 OK を返す
• しかしブラウザがレスポンスを JS に渡さない
• Console に CORS エラーが出る

CORS がある場合

Access-Control-Allow-Origin: https://example-client.com

「このオリジンの JS なら読んでいい」と サーバーが許可

ポイント

• API が壊れているわけではない
• ブラウザが“読むのを止めている”だけ

---

2. CDN（ライブラリ・静的リソース配信）

よくある例

• JavaScript ライブラリ
• CSS
• WebAssembly
• 画像・JSON データ

Access-Control-Allow-Origin: *

CDN は「多くのサイトから安全に使われる」前提なので、
広い許可設定をしているケースが多いです。

注意点

• <script src> だけなら CORS が不要なこともある
• fetch() で取得して JS が中身を読む瞬間に CORS が発動

---

3. Web フォント（意外と知られていない）

@font-face {
  src: url("https://fonts.example.net/font.woff2");
}

Web フォントは、
フィンガープリンティングや情報漏えいの観点から厳しく扱われます。

Access-Control-Allow-Origin: https://your-site.com

CORS がないと？

• ダウンロードは成功
• しかしフォントは適用されない

見た目が崩れるが、原因が分かりにくい典型例

---

4. サードパーティウィジェット・プラグイン

例

• SNS シェアボタン
• チャットボット
• 決済 SDK
• アクセス解析

これらは内部で：

• 外部 JS が実行され
• API に fetch() を投げ
• レスポンスを読む

という動作をしています。

そのため、

• iframe
• postMessage
• CORS

が セットで使われることが非常に多いです。

---

5. マルチドメイン認証（SSO / OAuth）

構成例

• app.example.com
• auth.example.com
• api.example.com

Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Credentials: true

ここでの CORS の役割

• 認証そのものではない
• 「認証後の情報を JS が読めるか」 を制御

⚠️ よくある誤解

CORS があるから認証は安全
→ 完全に誤り

---

CORS に関するよくある誤解

誤解	実際
CORS は API を守る	❌
CORS は CSRF 対策	❌
CORS があれば安全	❌
curl で通るから問題ない	❌

真実

• CORS は ブラウザ利用者を守る仕組み
• XSS があると CORS は簡単に破壊される
• セキュリティの「本体」ではないが、壊れると被害が大きい

---

チェックポイント

• Access-Control-Allow-Origin: * + Allow-Credentials: true は 即アウト
• フロントが複数ある場合、Origin を 明示的に制御
• CORS エラーは「通信失敗」ではなく「読み取り拒否」
• XSS 対策なしで CORS を語らない

---

まとめ

• CORS は クロスオリジン通信を安全に成立させるためのブラウザ制御
• API / CDN / フォント / OAuth で必須
• サーバー防御ではない
• 設定ミスは 情報漏えい・トークン流出につながる