はじめに
Webアプリケーションのセキュリティについて学んでいると、CORSとCSPという言葉に出会うことがあります。どちらも「Cross」から始まる略語で、セキュリティに関連する機能ですが、実は全く異なる目的を持っています。
本記事では、CORSとCSPの違いを初心者向けに分かりやすく解説します。それぞれの役割と仕組みを理解することで、適切なセキュリティ対策を選択できるようになりますね。
CORS（Cross-Origin Resource Sharing）とは
CORSの役割
CORSは、異なるオリジン（ドメイン）間でのリソース共有を制御する仕組みです。オリジンとは、プロトコル（httpsなど）、ドメイン（example.comなど）、ポート番号（443など）の組み合わせのことを指します。
通常、ブラウザは同一オリジンポリシーによって、異なるオリジンへのアクセスを制限しています。CORSは、サーバー側が特定のオリジンからのアクセスを明示的に許可するための仕組みなのです。
どんな場面で必要か
CORSが必要になる典型的な場面は、フロントエンドとバックエンドのAPIが別々のドメインで動いている場合です。
例えば、以下のような状況を考えてみましょう。
- フロントエンド:
https://example.com - バックエンドAPI:
https://api.example.com
この場合、フロントエンドからAPIにリクエストを送ると、オリジンが異なるため、デフォルトではブラウザがリクエストをブロックします。APIサーバーがCORSヘッダーを返すことで、このアクセスを許可できるようになります。
CORSの仕組み
CORSは、サーバーがHTTPレスポンスヘッダーにAccess-Control-Allow-Originなどの情報を含めることで機能します。このヘッダーによって、どのオリジンからのアクセスを許可するかを指定できます。
重要なのは、CORSの制御はリソースを提供する側（APIサーバー）が行うという点です。APIサーバーが「どのドメインにデータを提供するか」を決定します。
CSP（Content Security Policy）とは
CSPの役割
CSPは、Webページがどこからリソース（スクリプト、画像、スタイルシートなど）を読み込めるかを制限する仕組みです。主にXSS攻撃（クロスサイトスクリプティング）からサイトを守るために使用されます。
XSS攻撃とは、攻撃者が悪意のあるスクリプトをWebページに挿入し、他のユーザーに実行させる攻撃手法のことです。
どんな場面で必要か
CSPは、Webサイトのセキュリティを強化したい場合に使用します。特に以下のような状況で有効ですね。
- ユーザーからの入力を表示するサイト（掲示板、SNSなど）
- 外部のCDNからライブラリを読み込んでいるサイト
- インラインスクリプトの実行を制限したいサイト
CSPを設定することで、たとえ攻撃者が悪意のあるスクリプトを挿入できたとしても、ブラウザがそのスクリプトの実行をブロックします。
CSPの仕組み
CSPは、HTTPレスポンスヘッダーまたはHTMLの<meta>タグで設定します。許可するリソースの読み込み元を指定することで、それ以外のリソースはブロックされます。
重要なのは、CSPの制御はリソースを読み込む側（自分のWebサイト）が行うという点です。サイトの管理者が「どこからリソースを読み込むか」を決定します。
CORSとCSPの違い
制御の方向性
CORSとCSPの最も大きな違いは、制御の方向性です。
CORS: 自分のサイトから外部のリソース（API）にアクセスする際の制御
- 「外に出ていく通信」を制御する
- APIサーバー側が許可を出す
CSP: 外部から自分のサイトにリソースを読み込む際の制御
- 「中に入ってくるリソース」を制御する
- 自分のサイト側で制限をかける
対処する脅威
それぞれが対処するセキュリティ上の脅威も異なります。
CORS: 主に不正なクロスオリジンリクエストを防ぐ
- 悪意のあるサイトが勝手にAPIを呼び出すことを防止
- ユーザーの認証情報を使った不正なリクエストを防ぐ
CSP: 主にXSS攻撃を防ぐ
- 悪意のあるスクリプトの実行を防止
- 信頼できないリソースの読み込みをブロック
比較表
| 項目 | CORS | CSP |
|---|---|---|
| 正式名称 | Cross-Origin Resource Sharing | Content Security Policy |
| 制御対象 | 外部リソースへのアクセス | 外部からのリソース読み込み |
| 制御する側 | リソース提供側（APIサーバー） | リソース利用側（自サイト） |
| 主な用途 | 異なるドメイン間のAPI通信 | XSS攻撃の防止 |
| 設定場所 | APIサーバー側のレスポンスヘッダー | Webページ提供サーバーのヘッダー |
| 対処する脅威 | 不正なクロスオリジンリクエスト | XSS攻撃、不正なスクリプト実行 |
まとめ
覚えておくべきポイント
CORSとCSPは名前が似ていますが、全く異なる目的を持つセキュリティ機能です。
CORSは、異なるドメイン間でのデータのやり取りを安全に行うための仕組みで、APIサーバー側で設定します。自分のフロントエンドが外部のAPIにアクセスする際に必要になりますね。
CSPは、Webページに悪意のあるスクリプトが実行されるのを防ぐための仕組みで、自分のWebサイト側で設定します。XSS攻撃からサイトを守るために重要な対策です。
どちらか一方だけを設定すれば良いというものではなく、それぞれ異なるセキュリティ上の脅威に対処します。両方を適切に設定することで、より安全なWebアプリケーションを構築できるようになります。
初心者の方は、まず「CORSは外に出ていく通信の制御、CSPは中に入ってくるリソースの制御」という基本的な違いを理解することから始めましょう。この理解があれば、実際の開発で適切なセキュリティ対策を選択できるようになりますよ。