fix(learner): review round 1: sanitize-html, sandboxed runner frame, one visibility rule, no Tab capture

C1: lesson HTML goes through a sanitize-html allowlist on the fully rendered output (no on* attributes, no style, no svg/math/iframe/object/embed/form; URLs limited to http(s), mailto, relative and anchors). Raw tags outside the allowlist are escaped as text. The SPA document is served with a CSP (script-src 'self', no inline script) through spaWithCsp in main.ts; contract request §5 asks core to own it. C2: exercises run in <iframe sandbox="allow-scripts"> (opaque origin, no cookies) loaded from /api/learner/runner-frame, whose CSP allows only its own script (by hash) and blob: workers, and connect-src 'none'. postMessage only, both sides check event.source; the timeout removes the frame. The worker stubs now also cover Worker, SharedWorker and caches. I1: learner visibility calls core canView with per-course authorship only, like /api/media (contract request §6). I2: Tab and Shift+Tab move focus; Enter keeps the previous line's indentation. Tests: XSS unit cases, headless-Chrome checks for the exploit lesson and for fetch, import, Cache.add, nested Worker, img, EventSource, WebSocket, XHR and sendBeacon from learner and test code (plus a negative control), visibility on both dialects, SPA and runner-frame CSP headers. Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-30 05:20:43 +01:00
parent 061ae7a2d9
commit c7b9e1f98e
22 changed files with 840 additions and 42 deletions
@@ -0,0 +1,39 @@
+// Browser harness for the headless-Chrome tests: the real runner and the real LessonView, bundled for the browser.
+import { createRoot } from "react-dom/client";
+import { createBrowserRunner } from "../../src/web/runner/runner";
+import { WORKER_SOURCE } from "../../src/web/runner/worker-source";
+import { LessonView } from "../../src/web/lesson/LessonView";
+import type { LessonPayload } from "../../src/shared/types";
+
+declare global {
+  interface Window {
+    stcRun(code: string, tests: string, timeoutMs: number): Promise<unknown>;
+    /** Negative control only: the old design, a same-origin blob worker in the page. */
+    stcRunPlain(code: string, tests: string, timeoutMs: number): Promise<unknown>;
+    stcRenderLesson(markdown: string, hintBody: string): Promise<string>;
+    stcReady: boolean;
+  }
+}
+
+window.stcRun = (code, tests, timeoutMs) => createBrowserRunner("js").run(code, tests, timeoutMs);
+window.stcRunPlain = (code, tests, timeoutMs) => createBrowserRunner("js", {
+  createWorker: () => new Worker(URL.createObjectURL(new Blob([WORKER_SOURCE], { type: "text/javascript" })), { type: "module" }),
+}).run(code, tests, timeoutMs);
+
+window.stcRenderLesson = async (markdown, hintBody) => {
+  const lesson: LessonPayload = {
+    courseId: "c", courseTitle: "C", lesson: { id: "x", title: "Exploit", type: "exercise", minutes: null },
+    module: { id: "m", title: "M", index: 0 }, locked: false, markdown, baseFile: "course/x.md", trackMarkdown: {}, tracks: [],
+    video: null, transcript: null, hints: [{ label: "nudge", body: hintBody }], decks: [], code: null, attachments: [], browser: null,
+    localCommand: null, prev: null, next: null, lessonFiles: {},
+  };
+  const el = document.getElementById("root")!;
+  createRoot(el).render(<LessonView lesson={lesson} preview />);
+  await new Promise((r) => setTimeout(r, 300));
+  // Open every fold so nested content is live in the DOM too.
+  for (const d of document.querySelectorAll("details")) d.open = true;
+  await new Promise((r) => setTimeout(r, 500));
+  return el.innerHTML;
+};
+
+window.stcReady = true;