🐙

CORSとは何者なのか

2025/01/25に公開

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をレスポンスヘッダーに記述し設定可能

参考

https://qiita.com/higakin/items/fabe6a23d564b20ad558
https://qiita.com/Hirohana/items/9b5501c561954ad32be7

Discussion