@mug-lab/cookie-auth-proxy 0.1.0

package/src/admin/state.js

@@ -0,0 +1,325 @@
+/**
+ * ID指定でDOM要素を取得する短縮関数。
+ */
+const $ = (id) => document.getElementById(id);
+const adminCsrfToken = window.__COOKIE_AUTH_PROXY_CSRF__ || "";
+let runtimeSnapshot = { clientOrigin: "", apiOrigin: "", apiCookie: "" };
+let historyFilter = "all";
+let pathFilter = "";
+let lastHistory = [];
+let lastStubs = [];
+let lastOverrides = [];
+let historyRenderSignature = "";
+const historyDetails = new Map();
+const historyDisplayLimit = 80;
+const dirtyNewStubIds = new Set();
+const dirtyNewOverrideIds = new Set();
+let allStubsEnabled = true;
+let allJsonOverridesEnabled = true;
+let pendingImportMode = "append";
+let pendingOverrideImportMode = "append";
+let serverAppPath = "/";
+let apiOriginAllowedPatterns = [];
+let sensitiveHeaderNames = [];
+let cookieValuesVisible = false;
+let proxyOrigin = "http://localhost:4300";
+let stubFilter = "";
+let overrideFilter = "";
+
+/**
+ * 管理APIへJSONリクエストを送り、失敗時はレスポンス本文からエラー内容を復元する。
+ */
+async function api(path, options) {
+  const res = await fetch(path, {
+    ...options,
+    headers: {
+      "content-type": "application/json",
+      ...(options && options.headers ? options.headers : {}),
+      "x-csrf-token": adminCsrfToken,
+    },
+  });
+  if (!res.ok) {
+    const body = await res.text();
+    try {
+      throw new Error(JSON.parse(body).error || body);
+    } catch (error) {
+      if (error instanceof SyntaxError) throw new Error(body);
+      throw error;
+    }
+  }
+  return res.json();
+}
+
+/**
+ * 管理画面の状態、ルール、履歴をサーバから再取得して描画する。
+ */
+async function load() {
+  const state = await api("/admin/state");
+  $("listen").textContent =
+    "Proxy " +
+    state.listen +
+    " / Client " +
+    state.clientOrigin +
+    " / Admin " +
+    state.adminOrigin;
+  proxyOrigin = state.listen;
+  $("clientOrigin").value = state.clientOrigin;
+  $("apiOrigin").value = state.apiOrigin;
+  renderCookieRows(parseCookieHeader(state.apiCookie || ""));
+  $("adminNotice").textContent = state.adminNotice || "";
+  $("adminNotice").classList.toggle(
+    "hidden",
+    !state.adminNotice || !state.adminNotice.trim(),
+  );
+  apiOriginAllowedPatterns = state.apiOriginAllowedPatterns || [];
+  sensitiveHeaderNames = state.sensitiveHeaderNames || [];
+  serverAppPath = state.serverAppPath || "/";
+  runtimeSnapshot = {
+    clientOrigin: $("clientOrigin").value,
+    apiOrigin: $("apiOrigin").value,
+    apiCookie: currentCookieHeader(),
+  };
+  updateApplyState();
+  $("cookieNote").textContent = state.hasCookie
+    ? "API Cookie is active."
+    : "No API cookie is active.";
+  allStubsEnabled = Boolean(state.stubsEnabled);
+  $("stubsEnabled").checked = allStubsEnabled;
+  allJsonOverridesEnabled = Boolean(state.jsonOverridesEnabled);
+  $("jsonOverridesEnabled").checked = allJsonOverridesEnabled;
+  renderStubs(state.stubs);
+  renderOverrides(state.jsonOverrides || []);
+  lastHistory = await api("/admin/history?summary=1");
+  renderHistory(lastHistory);
+}
+
+/**
+ * Runtime設定のApplyボタン活性状態を更新する。
+ */
+function updateApplyState() {
+  const clientOriginError = validateClientOrigin($("clientOrigin").value);
+  const originError = validateApiOrigin($("apiOrigin").value);
+  $("clientOriginError").textContent = clientOriginError;
+  $("apiOriginError").textContent = originError;
+  $("saveState").disabled =
+    Boolean(clientOriginError) ||
+    Boolean(originError) ||
+    ($("clientOrigin").value === runtimeSnapshot.clientOrigin &&
+      $("apiOrigin").value === runtimeSnapshot.apiOrigin &&
+      currentCookieHeader() === runtimeSnapshot.apiCookie);
+}
+
+/**
+ * Client Origin入力値がURLとして正しいか検証する。
+ */
+function validateClientOrigin(value) {
+  try {
+    const origin = new URL(value).origin;
+    if (origin === "null") throw new Error("origin is null");
+    return "";
+  } catch {
+    return "Enter a valid client origin.";
+  }
+}
+
+/**
+ * API Origin入力値がURLとして正しく許可パターンに一致するか検証する.
+ */
+function validateApiOrigin(value) {
+  if (!String(value || "").trim()) return "";
+
+  let origin;
+  try {
+    origin = new URL(value).origin;
+    if (origin === "null") throw new Error("origin is null");
+  } catch {
+    return "Enter a valid API origin.";
+  }
+
+  if (apiOriginAllowedPatterns.length === 0) return "";
+  try {
+    return apiOriginAllowedPatterns.some((pattern) =>
+      compileSafeRegex(pattern, "apiOriginAllowedPatterns").test(origin),
+    )
+      ? ""
+      : "This API origin is not allowed by the configured whitelist.";
+  } catch {
+    return "API origin whitelist configuration is invalid.";
+  }
+}
+
+/**
+ * 管理画面内の正規表現を、明らかに危険な形だけ拒否してからRegExpへ変換する。
+ */
+function compileSafeRegex(pattern, label) {
+  assertSafeRegexPattern(pattern, label);
+  return new RegExp(pattern);
+}
+
+/**
+ * ReDoSにつながりやすい正規表現を軽量検査する。
+ */
+function assertSafeRegexPattern(pattern, label) {
+  const value = String(pattern);
+  if (value.length > 1000) {
+    throw new Error(`${label}: pattern is too long.`);
+  }
+  if (/(^|[^\\])\\(?:[1-9]\d*|k<[^>]+>)/.test(value)) {
+    throw new Error(`${label}: backreferences are not allowed.`);
+  }
+  if (hasNestedQuantifier(value)) {
+    throw new Error(`${label}: nested quantified groups are not allowed.`);
+  }
+}
+
+/**
+ * (a+)+ や (.*)+ のような形を検出する。
+ */
+function hasNestedQuantifier(pattern) {
+  const source = stripCharacterClassesAndEscapes(pattern);
+  return /\((?:\?:|\?=|\?!|\?<=|\?<!)?[^)]*(?:[+*]|\{\d+(?:,\d*)?\})[^)]*\)(?:[+*?]|\{\d+(?:,\d*)?\})/.test(
+    source,
+  );
+}
+
+/**
+ * 構造検査の誤検知を減らすため、文字クラスとエスケープ済み文字をプレースホルダ化する。
+ */
+function stripCharacterClassesAndEscapes(pattern) {
+  let result = "";
+  let inClass = false;
+
+  for (let i = 0; i < pattern.length; i += 1) {
+    const char = pattern[i];
+    if (char === "\\") {
+      result += "x";
+      i += 1;
+      continue;
+    }
+    if (inClass) {
+      if (char === "]") {
+        inClass = false;
+        result += "x";
+      }
+      continue;
+    }
+    if (char === "[") {
+      inClass = true;
+      result += "x";
+      continue;
+    }
+    result += char;
+  }
+
+  return result;
+}
+
+/**
+ * Cookieヘッダー文字列を、管理画面で編集しやすい名前/値の行配列へ分解する。
+ */
+function parseCookieHeader(header) {
+  return String(header || "")
+    .split(";")
+    .map((part) => part.trim())
+    .filter(Boolean)
+    .map((part) => {
+      const index = part.indexOf("=");
+      if (index === -1) return { name: part, value: "" };
+      return {
+        name: part.slice(0, index).trim(),
+        value: part.slice(index + 1).trim(),
+      };
+    });
+}
+
+/**
+ * Cookie行エディタを現在のCookie配列から描画する。
+ */
+function renderCookieRows(cookies) {
+  const rows = cookies.length ? cookies : [{ name: "", value: "" }];
+  $("cookieRows").innerHTML = rows
+    .map((cookie) => cookieRowHtml(cookie))
+    .join("");
+  updateCookieVisibility();
+}
+
+/**
+ * Cookie 1行分のHTMLを作る。
+ */
+function cookieRowHtml(cookie) {
+  return `
+    <div class="cookie-row">
+      <input data-cookie-name placeholder="Name" value="${escapeAttr(cookie.name)}">
+      <input data-cookie-value placeholder="Value" type="${cookieValuesVisible ? "text" : "password"}" value="${escapeAttr(cookie.value)}">
+      <button type="button" title="Show or hide this value" onclick="toggleCookieRowVisible(event)">View</button>
+      <button type="button" class="danger" title="Remove cookie" onclick="removeCookieRow(event)">&#128465;</button>
+    </div>`;
+}
+
+/**
+ * Cookie行エディタの現在値をCookieヘッダー文字列へ戻す。
+ */
+function currentCookieHeader() {
+  return Array.from(document.querySelectorAll(".cookie-row"))
+    .map((row) => ({
+      name: row.querySelector("[data-cookie-name]").value.trim(),
+      value: row.querySelector("[data-cookie-value]").value.trim(),
+    }))
+    .filter((cookie) => cookie.name)
+    .map((cookie) => `${cookie.name}=${cookie.value}`)
+    .join("; ");
+}
+
+/**
+ * Cookie行を1つ追加する。
+ */
+function addCookieRow(name = "", value = "") {
+  $("cookieRows").insertAdjacentHTML(
+    "beforeend",
+    cookieRowHtml({ name, value }),
+  );
+  updateApplyState();
+}
+
+/**
+ * Cookie値入力欄のpassword/text表示を全行まとめて反映する。
+ */
+function updateCookieVisibility() {
+  document.querySelectorAll("[data-cookie-value]").forEach((input) => {
+    input.type = cookieValuesVisible ? "text" : "password";
+  });
+  $("toggleCookieValues").textContent = cookieValuesVisible
+    ? "Hide Values"
+    : "Show Values";
+}
+
+/**
+ * Cookie値の全体表示/マスク表示を切り替える。
+ */
+function toggleCookieValuesVisible() {
+  cookieValuesVisible = !cookieValuesVisible;
+  updateCookieVisibility();
+}
+
+/**
+ * 指定行のCookie値だけ表示/マスク表示を切り替える。
+ */
+function toggleCookieRowVisible(event) {
+  event.preventDefault();
+  const input = event.currentTarget
+    .closest(".cookie-row")
+    .querySelector("[data-cookie-value]");
+  input.type = input.type === "password" ? "text" : "password";
+  flash(event.currentTarget);
+}
+
+/**
+ * Cookie行を削除する。最後の1行を消した場合は空行を残す。
+ */
+function removeCookieRow(event) {
+  event.preventDefault();
+  const row = event.currentTarget.closest(".cookie-row");
+  row.remove();
+  if (!document.querySelector(".cookie-row")) addCookieRow();
+  updateApplyState();
+}

package/src/admin.html

@@ -0,0 +1,178 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Cookie Auth Proxy Admin</title>
+    <link rel="stylesheet" href="/admin/admin.css" />
+  </head>
+  <body>
+    <header><h1>Cookie Auth Proxy Admin</h1></header>
+    <div class="admin-notice hidden" id="adminNotice" role="status"></div>
+    <main>
+      <div>
+        <section>
+          <h2>Runtime</h2>
+          <div class="runtime-group">
+            <h3>Connection</h3>
+            <div class="muted" id="listen"></div>
+            <label>Client Origin</label>
+            <input id="clientOrigin" />
+            <p class="muted error-message" id="clientOriginError"></p>
+            <label>API Origin</label>
+            <input id="apiOrigin" />
+            <p class="muted error-message" id="apiOriginError"></p>
+          </div>
+
+          <div class="runtime-group">
+            <div class="section-head">
+              <h3>API Cookie</h3>
+              <span class="muted" id="cookieNote"></span>
+            </div>
+            <div class="cookie-header" aria-hidden="true">
+              <span>Name</span>
+              <span>Value</span>
+              <span></span>
+              <span></span>
+            </div>
+            <div class="cookie-list" id="cookieRows"></div>
+            <div class="row cookie-actions">
+              <button id="addCookie">Add Cookie</button>
+              <button id="toggleCookieValues">Show Values</button>
+            </div>
+          </div>
+
+          <div class="runtime-group runtime-command-group">
+            <div class="row">
+              <button class="primary" id="saveState" disabled>Apply</button>
+              <button id="refresh">Refresh</button>
+            </div>
+            <div class="runtime-actions">
+              <button id="openApp">
+                Open App
+                <span class="external-link-icon" aria-hidden="true"
+                  >&#8599;</span
+                >
+              </button>
+              <button id="openServerApp">
+                Open Server App
+                <span class="external-link-icon" aria-hidden="true"
+                  >&#8599;</span
+                >
+              </button>
+            </div>
+          </div>
+        </section>
+      </div>
+
+      <section class="main-panel" id="mainPanel">
+        <div class="panel active" id="historyPanel">
+          <div class="panel-sticky">
+            <div class="tabs">
+              <button class="tab active" data-tab="historyPanel">History</button>
+              <button class="tab" data-tab="stubsPanel">Stubs</button>
+              <button class="tab" data-tab="overridesPanel">Overrides</button>
+            </div>
+            <div class="toolbar">
+              <h2>API History</h2>
+              <div class="filters">
+                <button class="active" data-status-filter="all">All</button>
+                <button data-status-filter="2">2xx</button>
+                <button data-status-filter="3">3xx</button>
+                <button data-status-filter="4">4xx</button>
+                <button data-status-filter="5">5xx</button>
+                <button data-status-filter="other">Other</button>
+              </div>
+              <button id="clearHistory">Clear</button>
+            </div>
+            <label>Path Filter Regex</label>
+            <input id="pathFilter" placeholder="^/api/" />
+          </div>
+          <div class="scroll-area" id="historyScroll">
+            <div class="history" id="history"></div>
+          </div>
+        </div>
+
+        <div class="panel" id="stubsPanel">
+          <div class="panel-sticky">
+            <div class="tabs">
+              <button class="tab" data-tab="historyPanel">History</button>
+              <button class="tab active" data-tab="stubsPanel">Stubs</button>
+              <button class="tab" data-tab="overridesPanel">Overrides</button>
+            </div>
+            <div class="toolbar">
+              <h2>Stub Settings</h2>
+              <div class="toolbar-group">
+                <label class="switch">
+                  <span>All stubs</span>
+                  <input id="stubsEnabled" type="checkbox" checked />
+                  <span class="slider"></span>
+                </label>
+                <input
+                  id="importFile"
+                  type="file"
+                  accept="application/json,.json"
+                  style="display: none"
+                />
+                <button id="exportStubs">Export</button>
+                <button class="danger" id="cleanImportStubs">
+                  Clean Import
+                </button>
+                <button id="addImportStubs">Add Import</button>
+                <button class="primary" id="addStub">Add Stub</button>
+              </div>
+            </div>
+            <label>Filter</label>
+            <input id="stubFilter" placeholder="name / method / path" />
+          </div>
+          <div class="scroll-area" id="stubsScroll">
+            <div class="stubs" id="stubs"></div>
+          </div>
+        </div>
+
+        <div class="panel" id="overridesPanel">
+          <div class="panel-sticky">
+            <div class="tabs">
+              <button class="tab" data-tab="historyPanel">History</button>
+              <button class="tab" data-tab="stubsPanel">Stubs</button>
+              <button class="tab active" data-tab="overridesPanel">Overrides</button>
+            </div>
+            <div class="toolbar">
+              <h2>JSON Overrides</h2>
+              <div class="toolbar-group">
+                <label class="switch">
+                  <span>All overrides</span>
+                  <input id="jsonOverridesEnabled" type="checkbox" checked />
+                  <span class="slider"></span>
+                </label>
+                <input
+                  id="overrideImportFile"
+                  type="file"
+                  accept="application/json,.json"
+                  style="display: none"
+                />
+                <button id="exportOverrides">Export</button>
+                <button class="danger" id="cleanImportOverrides">
+                  Clean Import
+                </button>
+                <button id="addImportOverrides">Add Import</button>
+                <button class="primary" id="addOverride">Add Override</button>
+              </div>
+            </div>
+            <label>Filter</label>
+            <input id="overrideFilter" placeholder="name / method / path" />
+          </div>
+          <div class="scroll-area" id="overridesScroll">
+            <div class="overrides" id="overrides"></div>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <script src="/admin/state.js"></script>
+    <script src="/admin/renderers.js"></script>
+    <script src="/admin/editors.js"></script>
+    <script src="/admin/files.js"></script>
+    <script src="/admin/events.js"></script>
+  </body>
+</html>