同一オリジンポリシー — 国境を、見る

2つのオリジンを立てます。データを返す API(:4000)と、それを使いたい別オリジンのフロントエンド(:4001)。よくある構成です——API と画面が別のドメイン/ポートで動く。まずは CORS を一切設定せず、素の同一オリジンポリシーが働くところを見ます。

法と倫理ゲート

手を動かす前に

このコースは攻撃の技術に触れます。実習してよい相手は、次の3つだけです。

• (a) 自分で作った練習用のやられ環境(このサイトが配る自作ターゲット)
• (b) あなた自身の許可された環境(自分の Thousand SKY・secret-notes-ctf など)
• (c) CTF 競技の中(規約の範囲で)

実在する第三者のシステムを許可なく触ることは、不正アクセス禁止法に触れます。 このゲートは、その線引きを毎回の入口で確かめるためのものです。詳しくは「セキュリティの法と倫理」へ。

上の (a)(b)(c) の範囲だけで実習することに同意します。

API(:4000)

データを返すだけの API です。api.js として保存します。

// api.js — API。127.0.0.1:4000。第1章では CORS ヘッダを付けない。
const http = require('node:http');

const server = http.createServer((req, res) => {
  res.setHeader('Content-Type', 'application/json; charset=utf-8');
  // ここに CORS ヘッダ(Access-Control-Allow-Origin)は付けない。
  // = 同一オリジンポリシーが素のまま効く。
  res.end(JSON.stringify({ secret: '架空太郎の口座残高: 1,234,567 円' }));
});

server.listen(4000, '127.0.0.1', () => console.log('API: http://127.0.0.1:4000 (Ctrl+C で停止)'));

別オリジンのフロント(:4001)

ブラウザから :4000 のデータを読んで表示しようとするページです。front.js として保存します。

// front.js — 別オリジンのフロント。127.0.0.1:4001。ブラウザで :4000 を読もうとする。
const http = require('node:http');

const PAGE = [
  '<!doctype html><meta charset="utf-8"><body style="font-family:sans-serif">',
  '<h1>別オリジンのフロント(:4001)</h1><pre id="out">読み込み中…</pre>',
  '<script>',
  "fetch('http://127.0.0.1:4000/')",
  '  .then(function (r) { return r.json(); })',
  "  .then(function (d) { out.textContent = '読めた: ' + JSON.stringify(d); })",
  "  .catch(function (e) { out.textContent = 'ブロックされた: ' + e; });",
  '</script></body>',
].join('\n');

const server = http.createServer((req, res) => {
  res.setHeader('Content-Type', 'text/html; charset=utf-8');
  res.end(PAGE);
});

server.listen(4001, '127.0.0.1', () => console.log('フロント: http://127.0.0.1:4001 (Ctrl+C で停止)'));

両方立てて、ブラウザで開く

2つのターミナルで、それぞれ起動します。

node api.js       # 1つめのターミナル

node front.js     # 2つめのターミナル

そして、ブラウザでフロントを開きます。

http://127.0.0.1:4001

大事な誤解を、正す

そして、ここに CORS が要る理由が見えます。

持ち帰る一言

別オリジンの中身は、既定で読めない。自分のフロントすら止まる。 同一オリジンポリシーは善悪を区別せず、あらゆる別オリジン読み取りを既定で禁じ、利用者を守ります。正規のフロントに読ませたいなら、サーバが明示的に許可を出す——それが CORS です。