CORS事前要求の目的と仕組み
2024-10-28
Same-Origin Policy とその制限
まず、Web ブラウザには Same-Origin Policy という重要なセキュリティ制限があります。これは、異なるドメイン（オリジン）のスクリプトが、別のドメインのリソースにアクセスすることを制限します。この制限は、悪意のあるスクリプトによる攻撃を防ぐために存在します。
AJAX と CORS の登場
しかし、Web アプリケーションの開発において、異なるドメインのリソースにアクセスする必要性が増えてきました。AJAX (Asynchronous JavaScript and XML) の登場により、動的なページ更新が可能になり、さまざまな Web サービスを利用できるようになりました。
CORS (Cross-Origin Resource Sharing) は、この Same-Origin Policy の制限を緩和するためのメカニズムです。CORS を利用することで、特定の条件下で、異なるドメインのリソースにアクセスできるようになります。
Preflight CORS Requests は、CORS の重要な要素です。これは、ブラウザが実際のリクエストを送信する前に、サーバーに事前に問い合わせを行うためのメカニズムです。
なぜ Preflight Request が必要なのか？
- 非標準的な HTTP メソッドのサポート
CORS は、GET と POST 以外の HTTP メソッド（PUT、DELETE など）もサポートします。Preflight Request は、これらの非標準的なメソッドの使用を事前に確認します。 - サーバー側の制御
サーバーは、どのドメインからのリクエストを許可するか、どの HTTP メソッドを許可するかを制御できます。 - セキュリティの強化
Preflight Request を通じて、サーバーはリクエストのメソッド、ヘッダー、ボディなどを確認し、安全性を確保することができます。
- ブラウザがリクエストを準備
ブラウザは、実際のリクエストを送信する前に、OPTIONS メソッドを使った Preflight Request を送信します。 - サーバーが Preflight Request を受信
サーバーは、リクエストヘッダーを確認し、アクセスを許可するかどうかの判断を行います。 - サーバーがレスポンスを返す
サーバーは、Access-Control-Allow-Origin ヘッダーなどの適切なヘッダーを付けて、レスポンスを返します。 - ブラウザが実際のリクエストを送信
サーバーからの許可が得られた場合、ブラウザは実際のリクエストを送信します。
コード例
クライアント側 (JavaScript)
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ data: 'hello' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
サーバー側 (Node.js)
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', 'http://example.com');
res.header('Access-Control-Allow-Methods', 'GET, POS T, PUT, DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
if (req.method === 'OPTIONS') {
res.sendStatus( 204);
} else {
next();
}
});
Same-Origin Policy の範囲内で動作する
- サブドメインの利用
関連するドメインをサブドメインとして配置することで、CORS の制限を緩和できます。 - ドメインの統一
可能であれば、フロントエンドとバックエンドを同じドメインでホストすることで、CORS の制限を回避できます。
Server-Side Proxy の利用
- カスタム Proxy サーバーの構築
Node.js や Python などの言語を使用して、カスタムの Proxy サーバーを構築することもできます。このサーバーは、クライアントからのリクエストを受け取り、ターゲットサーバーに転送し、CORS ヘッダーを適切に設定します。 - API Gateway の活用
API Gateway を使用して、異なるドメインのリソースへのリクエストを中継することができます。API Gateway は、CORS ヘッダーを適切に設定し、リクエストを転送します。
JSONP (JSON with Padding)
- セキュリティ上の懸念
JSONP は、XSS (Cross-Site Scripting) 攻撃のリスクがあるため、慎重な使用が必要です。 - 歴史的な手法
JSONP は、JavaScript のscriptタグを利用して、サーバーから JSON データを取得する手法です。
WebSocket
- CORS の制限の回避
WebSocket は、CORS の制限を受けないため、異なるドメイン間でのリアルタイム通信を実現できます。 - リアルタイム通信
WebSocket は、HTTP プロトコルとは異なるプロトコルで、双方向の通信を可能にします。
選択のポイント
- 柔軟性
CORS は、さまざまなシナリオに対応できる柔軟性を持っています。 - 複雑性
Server-Side Proxy の実装は、一定の技術的な知識を必要とします。 - パフォーマンス
WebSocket はリアルタイム通信に優れていますが、オーバーヘッドがある場合があります。 - セキュリティ
JSONP はセキュリティリスクがあるため、推奨されません。
ajax html http
