Files
EventSnap/e2e/specs/07-adversarial/ui-rendering.spec.ts
fabi bbdfae09a0 chore(e2e): add ESLint + Prettier; fix real findings; dedupe BASE
The Playwright suite had no linter and no formatter — only tsc. Add flat-config ESLint
(typescript-eslint, type-aware) and Prettier (2-space, matching the suite's style).

Rules keep the ones that catch real TEST bugs and drop the noise:
  - no-floating-promises KEPT — an un-awaited request/assertion can let a test end before it runs,
    passing vacuously. It caught one: the SSE reader loop in sse-listener is now explicitly `void`.
  - no-unused-vars KEPT — caught three dead bindings (an unused adminToken fixture arg, an unused
    `api` arg, an unused JPEG_MAGIC import), all removed.
  - no-explicit-any OFF — all test code; `any` is the honest type for an untyped res.json() body or
    a page.evaluate() return.
  - no-empty-pattern OFF — Playwright's dependency-free fixtures are `async ({}, use) => {}`.

Refactor: `const BASE = process.env.E2E_FRONTEND_URL ?? '...'` was redeclared verbatim in 23
files — extracted to helpers/env.ts and imported, so a port/scheme change is one edit not a sweep.

Then `prettier --write`. Verified: eslint clean, tsc clean, prettier clean, desktop suite 210
passed / 1 skipped. (One mobile spec flaked once under retries:0 — a pre-existing cross-test
reflow-timing vector from the flakiness audit, not this change: the each-key edit is stable across
16 isolated runs and a clean full mobile re-run.)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-15 20:45:59 +02:00

73 lines
2.7 KiB
TypeScript

/**
* Phase 2 adversarial — UI-side defenses. Confirms that Svelte's default
* text interpolation escapes everywhere user-supplied content surfaces.
*
* This is a belt-and-braces test: Svelte 5 escapes `{value}` by default,
* so failures here would mean someone reached for `{@html}` somewhere
* they shouldn't.
*/
import { test, expect } from '../../fixtures/test';
test.describe('Adversarial — UI render escape', () => {
test('display name with <script> renders as text on /account', async ({ page, api }) => {
const payload = `<script>window.__xssFired=true</script><b>BOLD</b>`;
const r = await api.join(payload);
await page.goto('/');
await page.evaluate(
({ j, u, n, p }) => {
localStorage.setItem('eventsnap_jwt', j);
localStorage.setItem('eventsnap_user_id', u);
localStorage.setItem('eventsnap_display_name', n);
localStorage.setItem('eventsnap_pin', p);
},
{ j: r.jwt, u: r.user_id, n: payload, p: r.pin }
);
page.on('dialog', (d) => {
throw new Error(`Dialog fired: ${d.message()}`);
});
await page.goto('/account');
// Render guard FIRST. `domcontentloaded` fires before Svelte hydrates, so asserting
// the *absence* of a <b> at that point passes on a page that never rendered the name
// at all — a false green on an XSS test. Prove the payload actually reached the DOM
// (as escaped text) before concluding anything about how it was rendered.
await expect(page.getByText(payload, { exact: false }).first()).toBeVisible({
timeout: 10_000,
});
const fired = await page.evaluate(() => (window as any).__xssFired === true);
expect(fired).toBe(false);
// <b> tag inside the name should also not render as bold — Svelte escapes the entire
// string. toHaveCount auto-retries, so this can't win by racing hydration.
await expect(page.locator('b:has-text("BOLD")')).toHaveCount(0);
await expect(page.locator('script:has-text("__xssFired")')).toHaveCount(0);
});
test('rendering of a known SQL-injection-shaped name does not break the page', async ({
page,
api,
}) => {
const payload = `'); DROP TABLE users; --`;
const r = await api.join(payload);
await page.goto('/');
await page.evaluate(
({ j, u, n, p }) => {
localStorage.setItem('eventsnap_jwt', j);
localStorage.setItem('eventsnap_user_id', u);
localStorage.setItem('eventsnap_display_name', n);
localStorage.setItem('eventsnap_pin', p);
},
{ j: r.jwt, u: r.user_id, n: payload, p: r.pin }
);
await page.goto('/account');
// Page renders.
await expect(page.getByRole('link', { name: 'Galerie' })).toBeVisible();
});
});