KASUGAI Canvas v6.17.0

Cloudflare 認証 — Pages（cloudflare）

← 認証とプラグインへ戻る

3. Cloudflare 認証（cloudflare）：Pages

概要

Cloudflare Pages + Pages Functions を使ったサーバーレス ID/PASS 認証です。ID/PASS は環境変数、.kasc の内容は Cloudflare KV に登録しておき、認証成功後にその内容を取得してアプリを起動します。安全な本番運用に推奨します。

この方式のみ .kasc の読み書きが可能です。他の方式（0〜2）では .kasc は静的ファイルからの読み取り専用で、「適用」はブラウザ内への反映のみです。この方式では「適用」が KV への保存も行います。

静的ファイル自体も含めて全リクエストを保護したい場合は、4. Cloudflare 認証 — Workers（control: 4）を使ってください。

推奨デプロイ構成

データ種別ごとに配置先を分け、無料枠内で秘匿性と速度を両立させる構成です。

静的配信（リクエスト無制限無料・2万ファイル/25MiB 上限）
  └─ HTML/JS/CSS

外部タイルサービス or R2 公開バケット（認証なし）
  └─ タイル（PMTiles または地理院タイル等の外部サービス）
     ※ R2 公開バケットの読み出しは無料枠 1,000万回/月（Class B）まで

Functions 認証ゲート（無料枠 10万リクエスト/日）
  ├─ /api/auth, /api/kasc
  └─ /api/data/* … 秘匿 GeoJSON 等（R2 バインド経由・r2:// 指定時のみ）

Cloudflare KV
  └─ .kasc（kasc:<プロジェクトID>）

静的配信はファイル数・サイズの上限があるため、タイルのような大量ファイルは置けません。公開データは R2 公開バケットか外部タイルサービスを使います。R2 は1ファイル最大5TiB・転送料（egress）無料で、読み出しは無料枠 1,000万回/月（Class B オペレーション）までです。カスタムドメイン経由にして CDN キャッシュを効かせると実際の R2 アクセス数をさらに減らせます。

利用シーン

  • インターネットや不特定多数からアクセスされる本番運用
  • ID/PASS と .kasc 設定情報をサーバー側で管理したい場合
  • 静的アセットのみの Workers プロジェクトでは環境変数・バインディングを設定できないため、Pages プロジェクトとしてデプロイしてください

起動と設定

web/auth-methods.json の control を 3 に設定すると、この認証方式が選択されます。

{
  "control": 3
}

ブラウザで https://<your-site>/ を開くだけで起動します。

デプロイ手順（Pages プロジェクト）

  1. ダッシュボード → Workers & Pages → Pages でプロジェクトを作成します（Workers ではありません）。
  2. Git 連携の場合は出力ディレクトリを web に設定します。
  3. 直接アップロードの場合は、リポジトリルートで以下を実行します。--project-name にダッシュボードで作ったプロジェクト名を指定してください。
npx wrangler pages deploy web --project-name <プロジェクト名>

または、リポジトリルートで python run-pages.py を実行するとプロジェクト解決・control=3 設定・デプロイ・動作確認まで自動化できます（control はデプロイ後に 0 に戻します）（--project-name でデプロイ先の指定も可）。

この1コマンドで web/（静的アセット）と functions/（Pages Functions）の両方がまとめてデプロイされます。functions/ はカレントディレクトリから自動検出されるため、必ずリポジトリルートで実行してください（web/ 内で実行すると検出されません）。検出された functions/ は /api/* エンドポイントとして動作します。web/functions/ に入れても Function にはならず、ソースコードが静的ファイルとして公開されてしまうため、functions/ は必ずルートに置きます。

注意：ダッシュボードの「直接アップロード」で web/ フォルダだけをドラッグ&ドロップした場合、functions/ は含まれず /api/* が 404 になります（ログイン時に「認証に失敗しました」と表示されます）。必ず wrangler か Git 連携でデプロイしてください。

再デプロイの目安：

  • web/・functions/ 内のファイルを変更した → 上記コマンドを再実行
  • 環境変数・KV/R2 バインドを変更した → Deployments → 最新デプロイの「Retry deployment」で再適用（ファイル再アップロード不要）
  • KV の中身（.kasc）を更新した → デプロイ不要（インスペクターの「適用」や wrangler kv key put で即反映・伝播は最大60秒）

環境変数

Pages プロジェクト → Settings → Environment variables（環境変数）に設定してください。環境変数は Production / Preview ごとに分かれているため、アクセスする URL（本番ドメインか *.pages.dev のプレビューか）に合わせて設定してください。設定後は「Retry deployment」で反映されます。

.dev.vars などのローカルファイルは git 管理外とし、本番環境では必ずダッシュボード経由で管理してください。

KASUGAI_AUTH_USER      = ユーザーID
KASUGAI_AUTH_PASS      = パスワード
KASUGAI_TOKEN_SECRET   = 署名鍵（任意・未設定時は KASUGAI_AUTH_PASS）

.kasc 登録手順（Cloudflare KV）

.kasc の内容は Cloudflare KV に登録します。ID/PASS 認証後にのみ取得できます。

  1. ダッシュボード → ストレージとデータベース → KV でネームスペースを作成します（例：KASUGAI_KV）。
  2. Pages プロジェクト → Settings → Bindings → Functions → KV 名前空間 で、変数名 KASUGAI_KV・KV 名前空間 KASUGAI_KV（ドロップダウンから選択）でバインドします。保存後は「Retry deployment」で有効化してください。
    ※ この画面には kasc:default や .kasc の中身は入力しません。バインドは「ネームスペースを env.KASUGAI_KV という名前で Function から見えるようにする」設定だけです。
  3. ネームスペースの中にキー kasc:<プロジェクトID> を作成し、値に .kasc の内容を登録します（例：キー kasc:default）。ダッシュボードの KV 画面（ストレージとデータベース → KV → ネームスペースを開く → キーと値のペアを追加）または下記の wrangler コマンドで登録します。
  4. デプロイから元の .kasc は削除してください。モード3のアプリは .kasc を KV からのみ読み込み、KV に無いプロジェクトは静的ファイルも内蔵デフォルトも使わず空で起動します。ただし静的ファイル自体は公開のため、残すと直接 URL で第三者に取得されます。
wrangler kv namespace create KASUGAI_KV
wrangler kv key put --binding KASUGAI_KV "kasc:default" --path web/projects/default/kasugai_canvas.kasc

KV の書き込みが全エッジへ反映されるまで最大60秒程度かかります。

.kasc の保存

この認証方式でログイン中は、インスペクターの「適用」ボタンが POST /api/kasc 経由で KV に保存します（静的ホスティング時は従来どおりエクスポート運用）。

保存にはログイン時に発行される署名トークン（有効期間12時間）を使います。署名鍵は環境変数 KASUGAI_TOKEN_SECRET（未設定時は KASUGAI_AUTH_PASS）です。

秘匿データ配信（Cloudflare R2・任意）

GeoJSON 等の秘匿データを R2 に置き、/api/data/* の認証ゲート経由でのみ配信できます。一部のデータだけを選択的に秘匿化する方式です。

  1. ダッシュボード → ストレージとデータベース → R2 でバケットを作成します（例：kasugai-data）。公開設定は不要です。
  2. Pages プロジェクト → Settings → Bindings → Functions → R2 bucket で、バケットを KASUGAI_DATA という変数名でバインドします。
  3. 秘匿したいファイルをオブジェクトとして登録します（キー名は英数字・_-./ のみ）。
wrangler r2 bucket create kasugai-data
wrangler r2 object put kasugai-data/secret/area.geojson --path DATA/area.geojson

.kasc では URL に r2://<キー> スキームを使います。認証後は自動的に /api/data/<キー>?token=… へ書き換えられて読み込まれます（r2:// を付けないデータは従来どおり静的配信のままです）。

geojson: 秘匿レイヤ | r2://secret/area.geojson | on
fly_geojson: 秘匿ルート | r2://secret/route.geojson

「適用」で保存する際は r2:// 形式に自動で戻されるため、KV にはトークンを含まない可搬な形式で保持されます。fly_geojson の高さ書き戻し（PUT）にも対応しています。

無料枠の消費：/api/data/* は1ファイルごとに Functions リクエスト（10万回/日）＋ R2 Class B（1,000万回/月）を消費します。レイヤ単位の少数ファイルなら実質無料枠内ですが、タイル級の大量リクエストには向きません。

資産ごとの秘匿状況

資産未ログインの第三者ログイン済みユーザー
ID/PASS ✅ 秘匿 ✅ 秘匿
環境変数（KASUGAI_AUTH_USER / KASUGAI_AUTH_PASS）にのみ存在し、照合は Pages Function 内で実施。ブラウザには合否とトークンしか返らないため、誰からも読み取れません。ただし推測可能な値（demo 等）は総当たり・推測でログインされ得ます。
.kasc 設定（KV） ✅ 秘匿
/api/kasc の認証ゲート内		 ❌ 全量が見える
ログイン時に全プロジェクト分を一括取得
中に書かれたデータ URL も同じ扱いです。r2:// キー名が見えても実 URL ではないため単体では無害ですが、外部 URL・API キー入り URL はログイン者にそのまま見えます。
HTML/JS/CSS（アプリ本体） ❌ 全公開 ❌ 見える
静的配信は認証なし。index.html・app.js・PLUGIN/ 等は直接 URL で誰でも取得可能です。ログイン画面は見た目のゲートであり、静的ファイルの保護にはなりません。
データ（web/）
URL が公開情報から分かる		 ◐ 対象は限定的
該当するなら ❌ 列挙容易		 ❌ 見える
方式0〜2 と違い、.kasc は KV 内で非公開のため URL の出どころになりません。残る公開情報の出どころは projects.json・HTML/JS・誤って残置した .kasc のみで、ここにパスが書かれたデータは一覧・推測で容易に取得されます。DATA/ や projects/ に残した .kasc・GeoJSON・画像も直接 URL で取得されます。KV 登録済みの .kasc はデプロイから削除してください。
データ（web/）
URL が非公開・推測困難		 △ obscurity ❌ 見える
KV 内の .kasc にだけ書かれたデータ URL は、未ログインの第三者には発見できません — URL そのものが秘匿情報として機能します。ただし認証チェックはないため、URL が一度漏れれば防御はゼロです（obscurity による弱い隠蔽）。本当に秘匿したいデータは R2（r2://）に置いてください。
データ（R2・r2:// 経由） ✅ 秘匿
署名トークン必須		 ◐ 取得可
トークン付き /api/data/* 経由
実 URL は存在せず /api/data/...?token=… に書き換えられます。トークンは URL に現れるため、ログイン済みブラウザのデベロッパーツール・履歴・プロキシログから読み取り得ます。トークンがあれば有効期間（12時間）中はアクセス可能です。

✅ 秘匿　◐ 条件付き　❌ 公開

セキュリティ上の注意

  • 保護できるもの：アプリ起動制御（サーバーレス ID/PASS 認証）、.kasc 設定情報の内容（ID/PASS 認証後に Cloudflare KV から取得）、KASUGAI_DATA バケット内のデータ（署名トークン必須）
  • 保護できないもの：HTML/JS/CSS 等の静的ファイル、静的配信に置いた DATA/ 内の画像・GeoJSON 等、R2 公開バケットの内容
  • 注意：/api/data/* のトークンは URL に埋め込まれるためブラウザ履歴・プロキシログに残り得ます。レスポンスは Cache-Control: private, no-store で返すため CDN キャッシュ経由の漏洩は防がれます
  • 静的ファイル自体を含めて完全に保護したい場合は、4. Cloudflare 認証 — Workers（全リクエスト認証ゲート）または Cloudflare Access（Zero Trust）を使ってください
  • Cloud Run 上で同様の「認証のみ・静的公開」モデルを使う場合は 5. Cloud Run 認証（control: 5。KV→GCS・r2://→gs:// に相当）を参照してください