CORS の基本 — サーバが開ける窓口

前章で、正規のフロント(:4001)ですらブロックされました。読ませたいなら、API が明示的に許可を出す必要があります。その許可が CORS(Cross-Origin Resource Sharing) です。

法と倫理ゲート

手を動かす前に

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

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

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

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

窓口を、開ける

API(api.js)に、1行足します。「http://127.0.0.1:4001 には読ませてよい」と名指しで許可するヘッダです。

const server = http.createServer((req, res) => {
  res.setHeader('Content-Type', 'application/json; charset=utf-8');
  // CORS: このオリジンには、レスポンスを読ませてよい、と明示的に許可する。
  res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:4001');
  res.end(JSON.stringify({ secret: '架空太郎の口座残高: 1,234,567 円' }));
});

API を再起動して(Ctrl+C → node api.js)、ブラウザで http://127.0.0.1:4001 を再読み込みします。

単純リクエストと、プリフライト

CORS には2つのモードがあります。診断でよく効くので、違いを押さえます。

プリフライトに答えるには、API が OPTIONS を処理する必要があります。

// プリフライト(OPTIONS)への応答。許可するメソッド・ヘッダを返す。
if (req.method === 'OPTIONS') {
  res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:4001');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  res.writeHead(204);
  res.end();
  return;
}

CORS は「緩める」だけ

大事な位置づけを、もう一度。

持ち帰る一言

CORS は、サーバが名指しで開ける窓口。 Access-Control-Allow-Origin で許可したオリジンだけが、別オリジンのレスポンスを読める。判断材料はサーバが出し、ブラウザが強制する。プリフライト(OPTIONS)は副作用のあるリクエストの下見。では、この窓口を「開けすぎる」と何が起きるか。次章で穴を見ます。