EventSnap/e2e/loadtest/browser-check.mjs

#!/usr/bin/env node
/**
 * Real-browser pass over the event AFTER the load simulation has filled it.
 *
 * `event-sim.mjs` drives the HTTP API directly — deliberately, because 150 real
 * browsers would bottleneck the test box rather than the server. That leaves two
 * things unmeasured, and both are guest-visible:
 *
 *   1. The SvelteKit frontend container, which the API driver never touches.
 *   2. Whether the frontend ESCAPES the XSS caption the API stored verbatim. The
 *      backend stores captions raw by design (`upload.rs` length-checks only), so
 *      the entire defence is the renderer. The abuse suite proved the payload is
 *      in the database; only a browser can prove it is inert.
 *
 * Runs three real engines against the loaded gallery and reports load timings,
 * console errors, and the XSS verdict.
 *
 *     node e2e/loadtest/browser-check.mjs
 */
import { chromium, firefox, webkit, devices } from '@playwright/test';
import { writeFile, mkdir } from 'node:fs/promises';
import { fileURLToPath } from 'node:url';
import { dirname, join } from 'node:path';

const __dirname = dirname(fileURLToPath(import.meta.url));
const BASE = process.env.SIM_BASE ?? 'http://localhost:3102';
const API = `${BASE}/api/v1`;
const OUT = join(__dirname, 'results', 'browser');

const XSS_CAPTION = '<script>alert(document.cookie)</script><img src=x onerror=alert(1)>';
const XSS_MARKERS = ['<script>alert(', 'onerror=alert(1)', 'onerror=alert('];

async function joinGuest(name) {
  const res = await fetch(`${API}/join`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ display_name: name }),
  });
  if (!res.ok) throw new Error(`join failed ${res.status}`);
  return res.json();
}

/** Seed the guest session the way the app itself does, so we land on the gallery. */
async function seedSession(context, acct, name) {
  await context.addInitScript(
    ([jwt, uid, dn]) => {
      localStorage.setItem('eventsnap_jwt', jwt);
      localStorage.setItem('eventsnap_user_id', uid);
      localStorage.setItem('eventsnap_display_name', dn);
      // Skip the first-run guide. It is a modal over the feed, and leaving it up
      // means the feed never lazy-loads — which silently turns the XSS check into
      // "the payload wasn't on screen", not "the payload was neutralised".
      localStorage.setItem('eventsnap_guide_seen', '1');
    },
    [acct.jwt, acct.user_id, name]
  );
}

/**
 * Post a fresh XSS caption so the payload is the NEWEST item and therefore on the
 * first page of the feed. The load test's payload is real but buried behind ~780
 * newer uploads, and a check that never renders the payload proves nothing.
 */
async function seedXssUpload(jwt) {
  const { readdir, readFile } = await import('node:fs/promises');
  const dir = process.env.SIM_POOL_DIR ?? '/tmp/eventsnap-realpool';
  const files = (await readdir(dir)).filter((f) => f.toLowerCase().endsWith('.jpg') || f.toLowerCase().endsWith('.jpeg'));
  const buf = await readFile(join(dir, files[0]));
  const form = new FormData();
  form.append('file', new Blob([buf], { type: 'image/jpeg' }), 'x.jpg');
  form.append('caption', XSS_CAPTION);
  const res = await fetch(`${API}/upload`, {
    method: 'POST',
    headers: { Authorization: `Bearer ${jwt}` },
    body: form,
  });
  if (!res.ok) throw new Error(`xss seed upload failed ${res.status}: ${(await res.text()).slice(0, 200)}`);
  return (await res.json()).id;
}

async function runEngine(engineName, launcher, deviceProfile) {
  const result = { engine: engineName, device: deviceProfile ?? 'desktop', pages: {}, consoleErrors: [], dialogs: [], xss: null };
  let browser;
  try {
    browser = await launcher.launch();
  } catch (e) {
    // A missing system library on the test box is not a finding about the app.
    // Skip the engine and say so, rather than failing the whole pass.
    result.skipped = `could not launch: ${String(e).split('\n')[0].slice(0, 120)}`;
    return result;
  }
  const context = await browser.newContext(deviceProfile ? devices[deviceProfile] : {});
  const acct = await joinGuest(`Browser ${engineName} ${Date.now() % 10000}`);
  await seedSession(context, acct, `Browser ${engineName}`);
  const page = await context.newPage();

  // An executed payload would surface as a dialog. Nothing should ever fire.
  page.on('dialog', async (d) => {
    result.dialogs.push({ type: d.type(), message: d.message() });
    await d.dismiss();
  });
  page.on('console', (m) => {
    if (m.type() === 'error') result.consoleErrors.push(m.text().slice(0, 200));
  });
  page.on('pageerror', (e) => result.consoleErrors.push(`pageerror: ${String(e).slice(0, 200)}`));

  for (const [label, path] of [
    ['gallery', '/'],
    ['diashow', '/diashow'],
  ]) {
    const t0 = Date.now();
    try {
      await page.goto(`${BASE}${path}`, { waitUntil: 'load', timeout: 60000 });
      const loadMs = Date.now() - t0;
      await page.waitForTimeout(6000); // let the feed + images settle
      const imgCount = await page.locator('img').count();
      const shot = join(OUT, `${engineName}-${label}.png`);
      await page.screenshot({ path: shot, fullPage: false });
      result.pages[label] = { loadMs, settledMs: Date.now() - t0, imgCount, screenshot: shot };
    } catch (e) {
      result.pages[label] = { error: String(e).slice(0, 200) };
    }
  }

  // ── XSS verdict ───────────────────────────────────────────────────────────
  // Walk the gallery looking for the stored payload. It must appear as TEXT and
  // never as a live <script> element or an img with an onerror handler.
  try {
    await seedXssUpload(acct.jwt);
    await page.goto(`${BASE}/`, { waitUntil: 'load', timeout: 60000 });
    await page.waitForTimeout(6000);
    const verdict = await page.evaluate((markers) => {
      const bodyText = document.body.innerText ?? '';
      const html = document.body.innerHTML ?? '';
      const asText = markers.some((m) => bodyText.includes(m));
      // Any script tag that isn't a real app/module script would be injected.
      const injectedScripts = [...document.querySelectorAll('script')]
        .filter((s) => (s.textContent ?? '').includes('alert('))
        .map((s) => (s.textContent ?? '').slice(0, 80));
      const onerrorImgs = [...document.querySelectorAll('img[onerror]')].map((i) => i.getAttribute('onerror'));
      return {
        payloadVisibleAsText: asText,
        injectedScripts,
        onerrorImgs,
        // escaped entities are the positive signal that the renderer did its job
        escapedMarkup: html.includes('&lt;script&gt;') || html.includes('&lt;img'),
      };
    }, XSS_MARKERS);
    result.xss = verdict;
  } catch (e) {
    result.xss = { error: String(e).slice(0, 200) };
  }

  await browser.close();
  return result;
}

const main = async () => {
  await mkdir(OUT, { recursive: true });
  const results = [];
  results.push(await runEngine('chromium', chromium, 'Pixel 7'));
  results.push(await runEngine('webkit', webkit, 'iPhone 14'));
  results.push(await runEngine('firefox', firefox, null));

  const out = join(__dirname, 'results', `browser-check-${new Date().toISOString().replace(/[:.]/g, '-')}.json`);
  await writeFile(out, JSON.stringify(results, null, 2));

  console.log('\n' + '═'.repeat(70));
  console.log('REAL BROWSER CHECK');
  console.log('═'.repeat(70));
  let xssFail = false;
  let inconclusive = false;
  for (const r of results) {
    console.log(`\n${r.engine} (${r.device})`);
    if (r.skipped) {
      console.log(`  SKIPPED — ${r.skipped}`);
      continue;
    }
    for (const [k, v] of Object.entries(r.pages))
      console.log(
        `  ${k.padEnd(8)} ${v.error ? 'ERROR ' + v.error : `load ${v.loadMs}ms, ${v.imgCount} <img> after settle`}`
      );
    console.log(`  console errors: ${r.consoleErrors.length}${r.consoleErrors.length ? ' → ' + r.consoleErrors[0] : ''}`);
    console.log(`  dialogs fired : ${r.dialogs.length}`);
    const x = r.xss ?? {};
    const bad = (x.injectedScripts?.length ?? 0) > 0 || (x.onerrorImgs?.length ?? 0) > 0 || r.dialogs.length > 0;
    // Absence of an explosion only counts if the payload actually reached the DOM.
    const rendered = !!(x.payloadVisibleAsText || x.escapedMarkup);
    if (bad) xssFail = true;
    if (!bad && !rendered) inconclusive = true;
    const label = bad ? '✗ PAYLOAD LIVE' : rendered ? '✓ inert (rendered as text)' : '? INCONCLUSIVE — payload never reached the DOM';
    console.log(
      `  XSS           : ${label} ` +
        `(as text: ${x.payloadVisibleAsText}, escaped markup: ${x.escapedMarkup}, ` +
        `injected scripts: ${x.injectedScripts?.length ?? 0}, onerror imgs: ${x.onerrorImgs?.length ?? 0})`
    );
  }
  console.log(
    `\nverdict: ${
      xssFail
        ? '✗ stored XSS EXECUTES in a real browser'
        : inconclusive
          ? '? INCONCLUSIVE in at least one engine — payload never rendered, so nothing was proven'
          : '✓ stored payload rendered as inert text in every engine that ran'
    }`
  );
  console.log(`report → ${out}`);
  console.log('═'.repeat(70));
};

main().catch((e) => {
  console.error('browser check failed:', e);
  process.exit(1);
});