test(e2e): enforce the Trusted Types CSP for real

The page is served with require-trusted-types-for 'script' and a
trusted-types allowlist holding only the configured policy name — under
real Chrome enforcement, which jsdom cannot do, the overlay only
renders if every HTML write went through that policy (including inside
the about:blank iframe, which inherits the page's CSP). The jsdom
trusted-types test is removed; the helper gained a pageHeaders option.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: bjohansebas

test/e2e/overlay.test.js

@@ -389,6 +389,39 @@ describe("error overlay (browser)", () => {
     );
   });
 
+  it("renders under an enforced Trusted Types CSP with the configured policy", async () => {
+    hotApp = await createHotApp({
+      query: '?overlay={"trustedTypesPolicyName":"wdm-test"}',
+      code: app("v1"),
+      // Real enforcement, which jsdom cannot do: every HTML sink must go
+      // through the "wdm-test" policy or Chrome throws. The about:blank
+      // overlay iframe inherits this policy from the page.
+      pageHeaders: {
+        "Content-Security-Policy":
+          "require-trusted-types-for 'script'; trusted-types wdm-test",
+      },
+    });
+    ({ page, browser } = await runBrowser());
+
+    await page.goto(hotApp.url);
+    await page.waitForFunction(
+      () => document.getElementById("app")?.textContent === "v1",
+    );
+
+    hotApp.edit("broken by csp {{{");
+
+    // The overlay renders — proof that every innerHTML write went through
+    // the configured policy (a raw write, or a policy under any other name,
+    // would have thrown under this CSP).
+    const frame = await waitForOverlay(page);
+    await frame.waitForFunction(() =>
+      document.body.textContent.includes("Module parse failed"),
+    );
+    expect(await frame.evaluate(() => document.body.textContent)).toContain(
+      "broken by csp",
+    );
+  });
+
   it("does not appear when overlay=false", async () => {
     hotApp = await createHotApp({ query: "?overlay=false", code: app("v1") });
     ({ page, browser } = await runBrowser());

test/helpers/hot-app.js

@@ -64,8 +64,9 @@ function makeConfig(name, dir, appFile, query) {
  * (appended to the client entry) and `files` (extra fixture files by relative
  * name). Multi-compiler mode: pass `apps: [{ name, code }]` instead — each
  * app becomes a named compilation whose client connects with `?name=<name>`
- * and renders from `<name>.js`.
- * @param {{ query?: string, code?: string, files?: Record<string, string>, apps?: { name: string, code: string }[], hot?: EXPECTED_ANY }} options options
+ * and renders from `<name>.js`. `pageHeaders` are sent with the HTML page
+ * (e.g. a Content-Security-Policy).
+ * @param {{ query?: string, code?: string, files?: Record<string, string>, apps?: { name: string, code: string }[], hot?: EXPECTED_ANY, pageHeaders?: Record<string, string> }} options options
  * @returns {Promise<EXPECTED_ANY>} handles for the running app
  */
 async function createHotApp({
@@ -74,6 +75,7 @@ async function createHotApp({
   files = {},
   apps,
   hot = true,
+  pageHeaders = {},
 }) {
   const dir = fs.mkdtempSync(
     path.join(fs.realpathSync.native(os.tmpdir()), "wdm-e2e-"),
@@ -136,6 +138,9 @@ async function createHotApp({
 
     app.get("/", (_req, res) => {
       res.setHeader("Content-Type", "text/html");
+      for (const [name, value] of Object.entries(pageHeaders)) {
+        res.setHeader(name, value);
+      }
       res.end(pageHtml(scripts));
     });
     app.use(instance);

test/overlay.test.js

@@ -324,29 +324,6 @@ describe("overlay", () => {
     });
   });
 
-  describe("trusted types", () => {
-    afterEach(() => {
-      delete globalThis.trustedTypes;
-    });
-
-    it("creates a policy with the configured name and renders through it", () => {
-      globalThis.trustedTypes = {
-        createPolicy: jest.fn((name, rules) => ({
-          createHTML: rules.createHTML,
-        })),
-      };
-
-      configureOverlay({ trustedTypesPolicyName: "custom#policy" });
-      showProblems("errors", ["boom"]);
-
-      expect(globalThis.trustedTypes.createPolicy).toHaveBeenCalledWith(
-        "custom#policy",
-        expect.objectContaining({ createHTML: expect.any(Function) }),
-      );
-      expect(getCard().textContent).toContain("boom");
-    });
-  });
-
   describe("configureOverlay", () => {
     it("returns the overlay API", () => {
       const api = configureOverlay({});