Protect loopback review sessions

Author: itsjling

README.md

@@ -68,9 +68,10 @@ npm run diffsplain -- doctor
 npm run doctor
 ```
 
-Run the checks:
+Install Chromium once, then run the checks:
 
 ```sh
+npm run test:browser:install
 npm run lint
 npm test
 ```

app/page.tsx

@@ -236,11 +236,17 @@ export default function Home() {
   const latestVersion = useRef<string | null>(null);
   const touchStart = useRef<number | null>(null);
   const searchRef = useRef<HTMLInputElement | null>(null);
+  const session = useMemo(
+    () => new URLSearchParams(window.location.hash.slice(1)),
+    [],
+  );
+  const [access, setAccess] = useState(() => session.get("access"));
 
   const refresh = useCallback(async () => {
     try {
       const liveUrl = new URL("diff-data.json", document.baseURI);
       liveUrl.searchParams.set("t", String(Date.now()));
+      if (access) liveUrl.searchParams.set("access", access);
       const liveResponse = await fetch(liveUrl, {
         cache: "no-store",
       });
@@ -268,7 +274,7 @@ export default function Home() {
         error instanceof Error ? error.message : "Could not read the snapshot",
       );
     }
-  }, []);
+  }, [access]);
 
   useEffect(() => {
     const initial = window.setTimeout(() => void refresh(), 0);
@@ -287,10 +293,9 @@ export default function Home() {
     };
     if ("EventSource" in window) {
       const eventsUrl = new URL("events", document.baseURI);
-      const project = new URLSearchParams(window.location.hash.slice(1)).get(
-        "project",
-      );
+      const project = session.get("project");
       if (project) eventsUrl.searchParams.set("project", project);
+      if (access) eventsUrl.searchParams.set("access", access);
       events = new EventSource(eventsUrl);
       events.addEventListener("ready", () => {
         stopPolling();
@@ -299,6 +304,13 @@ export default function Home() {
         void refresh();
       });
       events.addEventListener("update", () => void refresh());
+      events.addEventListener("access", (event) => {
+        const nextAccess = (event as MessageEvent<string>).data;
+        if (!/^[A-Za-z0-9_-]{32,}$/.test(nextAccess)) return;
+        session.set("access", nextAccess);
+        window.history.replaceState(null, "", `#${session}`);
+        setAccess(nextAccess);
+      });
       events.addEventListener("error", startPolling);
     } else {
       startPolling();
@@ -310,7 +322,7 @@ export default function Home() {
       events?.close();
       window.clearInterval(ticker);
     };
-  }, [refresh]);
+  }, [access, refresh, session]);
 
   const files = useMemo(() => snapshot?.files ?? [], [snapshot]);
   const currentIndex = Math.max(

benchmarks/live-update-speed.mjs

@@ -61,6 +61,15 @@ function stop(child) {
   });
 }
 
+function protectedUrl(reviewUrl, path) {
+  const route = new URL(path, reviewUrl);
+  const access = new URLSearchParams(new URL(reviewUrl).hash.slice(1)).get(
+    "access",
+  );
+  if (access) route.searchParams.set("access", access);
+  return route;
+}
+
 const temporary = mkdtempSync(join(tmpdir(), "diffsplain-updates-"));
 const output = join(temporary, "diff-data.json");
 writeFileSync(output, JSON.stringify({ version: "0" }));
@@ -82,7 +91,10 @@ try {
   const url = await waitForUrl(child);
   const samples = [];
   if (mode === "events") {
-    const response = await fetch(`${url}/events`);
+    const response = await fetch(protectedUrl(url, "events"));
+    if (!response.ok) {
+      throw new Error(`Event stream returned ${response.status}`);
+    }
     reader = response.body.getReader();
     await reader.read();
     for (let version = 1; version <= 9; version += 1) {
@@ -96,7 +108,7 @@ try {
     let seenVersion = "0";
     const waiters = new Map();
     poll = setInterval(async () => {
-      const response = await fetch(`${url}/diff-data.json`, {
+      const response = await fetch(protectedUrl(url, "diff-data.json"), {
         cache: "no-store",
       });
       const value = await response.json();

package-lock.json

@@ -27,6 +27,7 @@
   },
   "files": [
     "dist",
+    "scripts/access-token.mjs",
     "scripts/build-diff-data.mjs",
     "scripts/cli-args.mjs",
     "scripts/coding-agents.mjs",
@@ -56,10 +57,13 @@
     "build": "vite build && node scripts/clean-built-live-data.mjs",
     "start": "node scripts/serve-built.mjs",
     "prepack": "npm run build",
-    "test": "npm run build && node --test tests/*.test.mjs",
+    "test": "npm run build && node --test tests/*.test.mjs && npm run test:browser",
+    "test:browser": "node --test tests/browser/*.test.mjs",
+    "test:browser:install": "playwright install chromium",
     "lint": "tsc --noEmit && eslint ."
   },
   "devDependencies": {
+    "@playwright/test": "1.62.0",
     "@tailwindcss/postcss": "4.2.1",
     "@types/node": "22.19.19",
     "@types/react": "19.2.14",

package.json

@@ -0,0 +1,21 @@
+import { createHash } from 'node:crypto';
+import { tmpdir, userInfo } from 'node:os';
+import { join } from 'node:path';
+
+export function accessTokenDirectory({
+  temporaryDirectory = tmpdir(),
+  identity = userInfo(),
+} = {}) {
+  const userKey = createHash('sha256')
+    .update(
+      JSON.stringify([
+        identity.uid,
+        identity.gid,
+        identity.username,
+        identity.homedir,
+      ]),
+    )
+    .digest('hex')
+    .slice(0, 16);
+  return join(temporaryDirectory, `diffsplain-access-${userKey}`);
+}

scripts/access-token.mjs

@@ -315,6 +315,7 @@ export function parseCliArgs(
   if (!/^\d+$/.test(portValue) || Number(portValue) > 65_535) {
     fail('--port must be a number from 0 to 65535');
   }
+  const host = (options.get('--host') || 'localhost').replace(/^\[|\]$/g, '');
 
   return {
     help: false,
@@ -326,7 +327,7 @@ export function parseCliArgs(
     agentArgs,
     port: Number(portValue),
     portWasPassed: options.has('--port'),
-    host: options.get('--host') || 'localhost',
+    host,
     browserEnabled: !options.has('--no-browser'),
     forceSummaryRegeneration: options.has('--force'),
   };

scripts/cli-args.mjs

@@ -1,12 +1,15 @@
 #!/usr/bin/env node
 
 import { spawn, spawnSync } from 'node:child_process';
-import { createHash } from 'node:crypto';
+import { createHash, randomBytes } from 'node:crypto';
 import {
+  chmodSync,
   existsSync,
+  mkdirSync,
   mkdtempSync,
   readFileSync,
   rmSync,
+  writeFileSync,
 } from 'node:fs';
 import { tmpdir } from 'node:os';
 import { dirname, join, resolve } from 'node:path';
@@ -19,6 +22,7 @@ import {
   selectCodingAgent,
 } from './coding-agents.mjs';
 import { doctorReport } from './doctor.mjs';
+import { accessTokenDirectory } from './access-token.mjs';
 
 const root = resolve(dirname(fileURLToPath(import.meta.url)), '..');
 const callerDirectory = process.cwd();
@@ -95,6 +99,20 @@ const projectKey = createHash('sha256')
   )
   .digest('hex')
   .slice(0, 12);
+const accessDirectory = accessTokenDirectory();
+const accessPath = join(accessDirectory, `${projectKey}.token`);
+mkdirSync(accessDirectory, { recursive: true, mode: 0o700 });
+chmodSync(accessDirectory, 0o700);
+let previousAccess;
+try {
+  const savedAccess = readFileSync(accessPath, 'utf8').trim();
+  if (/^[A-Za-z0-9_-]{43}$/.test(savedAccess)) previousAccess = savedAccess;
+} catch {
+  // The first run for a project has no prior tab access value.
+}
+const access = randomBytes(32).toString('base64url');
+writeFileSync(accessPath, access, { mode: 0o600 });
+chmodSync(accessPath, 0o600);
 if (agentEnabled) {
   feedArgs.push('--ignore-summary-watch');
   agentArgs.push('--snapshot', outputPath);
@@ -172,6 +190,9 @@ function startSite() {
       host,
       '--project',
       projectKey,
+      '--access',
+      access,
+      ...(previousAccess ? ['--previous-access', previousAccess] : []),
       ...(!cli.portWasPassed ? ['--increment-port'] : []),
     ],
     { cwd: root, stdio: ['ignore', 'pipe', 'inherit'] },