CORSとは何者なのか
CORSとは
MDNだと以下のように述べられています。
オリジン間リソース共有 (Cross-Origin Resource Sharing, CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。
少し難しいですね。
これを理解するためにはまず、オリジン と同一オリジンポリシーについて理解する必要があります。
オリジン
以下MDN
ウェブコンテンツのオリジン (Origin) は、ウェブコンテンツにアクセスするために使われる URL の スキーム (プロトコル)、 ホスト (ドメイン)、 ポート番号 によって定義されます。スキーム、ホスト、ポート番号がすべて一致した場合のみ、 2 つのオブジェクトは同じオリジンであると言えます。
書いてあるとおりオリジンはスキーム(プロトコル)、ホスト(ドメイン名またはIPアドレス)、およびポート番号の組み合わせで定義されます。
例えばhttps://example.com:443/path/page.html
というURLがあったとすると以下のように分解できます。
- スキーム(プロトコル):
https
- ホスト(ドメインまたはIPアドレス):
example.com
- ポート番号:
443
そしてこの場合のオリジンはhttps://example.com:443
となります。
同一オリジンポリシー(SOP)
同一オリジンポリシーは重要なセキュリティの仕組みであり、あるオリジンによって読み込まれた文書やスクリプトが、他のオリジンにあるリソースにアクセスできる方法を制限するものです。
要するに異なるオリジン(クロスオリジン)からのリソースへのアクセスを制限するという仕組みですね。
https://example.com:443/path/page.html
から
https://example.com:3000/
へのアクセスはポート番号が違うので(オリジンが違う)のでアクセスできません。
逆に
https://example.com:443/path/page.html
から
https://example.com:443/sample01/page.html
へのアクセスはオリジンが一致しているのでアクセスが許可されます。
上記のようにアクセスを制限することで悪意のある攻撃から情報を守ることができるようになります。
しかし、「異なるオリジンのAPIを呼び出したい!」という時に困ってしまいます。
そのニーズに応えるために考案されたのがCORSです。
改めてCORSについて
CORSは、同一オリジンポリシーの制限を緩和し、特定の条件下で異なるオリジン間のリソース共有を可能にします。
このリソース共有を可能にするためにはバックエンド側での設定が必要で、Access-Control-Allow-Origin
をレスポンスに設定する必要があります。
以下がChatGPTに生成してもらったサンプルです。
const express = require('express');
const app = express();
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', 'https://example.com');
next();
});
上記ではhttps://example.com
へのリソース共有を許可しています。
まとめ
- 同一オリジンポリシーにより異なるオリジンからのリソースへのアクセスは制限されている
- CORSは同一オリジンポリシーの制限を緩和して、異なるオリジン間のリソース共有を可能にする仕組み
-
Access-Control-Allow-Origin
をレスポンスヘッダーに記述し設定可能
参考
Discussion