From 95cfa046248de1510d88075f0e6fc2e367c417b8 Mon Sep 17 00:00:00 2001
From: Duncan Faulkner <duncan@anglebrackets.dev>
Date: Thu, 15 Oct 2026 22:40:13 +0100
Subject: [PATCH 1/2] fix(report): scan pages with a strict CSP or Trusted
 Types

---
 CHANGELOG.md                   | 11 +++++++++++
 package-lock.json              |  4 ++--
 package.json                   |  2 +-
 src/report/headless.ts         |  9 ++++++++-
 src/testing/e2e-report.spec.ts | 19 ++++++++++++++++++-
 5 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 97adcfc..e308115 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to `@ngbracket/a11y-devtools` are documented here.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## 0.18.3
+
+### Fixed
+
+- Report mode now scans pages served with a strict Content-Security-Policy or
+  Trusted Types. The scan runs as an injected script, which a policy such as
+  `script-src 'self'` or `require-trusted-types-for 'script'` blocked, so the
+  page was reported as an error with no findings. The scanning browser now
+  bypasses the page's CSP. Your app's policy is unchanged; only the headless
+  browser that report mode starts ignores it.
+
 ## 0.18.2
 
 ### Fixed
diff --git a/package-lock.json b/package-lock.json
index 2cdf0fe..fb31bdb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ngbracket/a11y-devtools",
-  "version": "0.18.2",
+  "version": "0.18.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ngbracket/a11y-devtools",
-      "version": "0.18.2",
+      "version": "0.18.3",
       "license": "MIT",
       "dependencies": {
         "axe-core": "^4.13.0"
diff --git a/package.json b/package.json
index 8e75ecb..0f5764f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngbracket/a11y-devtools",
-  "version": "0.18.2",
+  "version": "0.18.3",
   "description": "Finds accessibility problems in Angular apps and names the component behind each one. A dev overlay, or headless reports for CI.",
   "license": "MIT",
   "author": "Duncan Faulkner",
diff --git a/src/report/headless.ts b/src/report/headless.ts
index e6b8334..88f2ca2 100644
--- a/src/report/headless.ts
+++ b/src/report/headless.ts
@@ -214,7 +214,14 @@ async function scanPass(
   config: PassConfig,
 ): Promise<PageReport[]> {
   const { baseUrl, routes, labels, waitMs, axeOptions, inPageScript, frameworkPrefixes } = config;
-  const context = await browser.newContext({ viewport: { width: 1280, height: 900 }, colorScheme });
+  // bypassCSP: the scan runs as an injected inline script (plus a style tag that
+  // hides the overlay), which a strict Content-Security-Policy or Trusted Types
+  // would block. It only lifts the policy in this scanning browser.
+  const context = await browser.newContext({
+    viewport: { width: 1280, height: 900 },
+    colorScheme,
+    bypassCSP: true,
+  });
   const pages: PageReport[] = [];
   try {
     const page = await context.newPage();
diff --git a/src/testing/e2e-report.spec.ts b/src/testing/e2e-report.spec.ts
index c99b3bb..e958095 100644
--- a/src/testing/e2e-report.spec.ts
+++ b/src/testing/e2e-report.spec.ts
@@ -57,6 +57,13 @@ const PAGES: Record<string, string> = {
       <button type="button"><svg width="16" height="16" aria-hidden="true"></svg></button>
       <a href="#help" tabindex="2">Help</a>
     </main>`,
+  // Served with a strict Content-Security-Policy and Trusted Types (see the
+  // server below), which block the injected scan unless the browser bypasses CSP.
+  '/csp': `
+    <main>
+      <h1>Strict CSP</h1>
+      <img src="data:image/gif;base64,R0lGODlhAQABAAAAACw=">
+    </main>`,
   // Healthy: native controls in order, plus an iframe (Tab inside a frame shows
   // up as repeated focus on the <iframe>, which must not read as a trap).
   '/clean': `
@@ -210,7 +217,13 @@ describe.skipIf(!ready)('report-mode in a real browser (E2E)', () => {
   beforeAll(async () => {
     server = createServer((req, res) => {
       const body = PAGES[req.url ?? ''];
-      res.writeHead(body ? 200 : 404, { 'content-type': 'text/html; charset=utf-8' });
+      res.writeHead(body ? 200 : 404, {
+        'content-type': 'text/html; charset=utf-8',
+        ...(req.url === '/csp' && {
+          'content-security-policy':
+            "default-src 'self'; img-src data:; script-src 'self'; style-src 'self'; require-trusted-types-for 'script'",
+        }),
+      });
       res.end(body ? html(body) : 'not found');
     });
     await new Promise<void>((done) => server.listen(0, '127.0.0.1', done));
@@ -260,6 +273,10 @@ describe.skipIf(!ready)('report-mode in a real browser (E2E)', () => {
     expect(report.pages.map((p) => p.label)).toEqual(Object.keys(PAGES));
   });
 
+  it('scans a page with a strict Content-Security-Policy and Trusted Types', () => {
+    expect(ids('/csp')).toContain('image-alt');
+  });
+
   it('checks contrast below the fold even when the app runs the in-app overlay', () => {
     const below = page('/overlay-below-fold').findings.filter((f) => f.html.includes('below-fold'));
     expect(below.map((f) => f.id)).toEqual(['color-contrast']);

From c1c36c8f6b57d953c653258b3560bbc6e3ddca69 Mon Sep 17 00:00:00 2001
From: Duncan Faulkner <duncan@anglebrackets.dev>
Date: Thu, 15 Oct 2026 22:43:16 +0100
Subject: [PATCH 2/2] test(report): cover a meta-tag CSP; say the scan runs
 without the page's policy

---
 CHANGELOG.md                   |  6 ++++--
 src/testing/e2e-report.spec.ts | 25 ++++++++++++++++++++++---
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e308115..187ea5f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,8 +11,10 @@ This project adheres to [Semantic Versioning](https://semver.org/).
   Trusted Types. The scan runs as an injected script, which a policy such as
   `script-src 'self'` or `require-trusted-types-for 'script'` blocked, so the
   page was reported as an error with no findings. The scanning browser now
-  bypasses the page's CSP. Your app's policy is unchanged; only the headless
-  browser that report mode starts ignores it.
+  ignores the page's CSP, whether it comes from a header or a `<meta>` tag.
+  Your app's policy is unchanged. Because the scan runs without the policy,
+  anything the policy would block for real users (a web font, an inline style)
+  loads during the scan, so a problem caused by the CSP itself isn't reported.
 
 ## 0.18.2
 
diff --git a/src/testing/e2e-report.spec.ts b/src/testing/e2e-report.spec.ts
index e958095..48cce21 100644
--- a/src/testing/e2e-report.spec.ts
+++ b/src/testing/e2e-report.spec.ts
@@ -64,6 +64,13 @@ const PAGES: Record<string, string> = {
       <h1>Strict CSP</h1>
       <img src="data:image/gif;base64,R0lGODlhAQABAAAAACw=">
     </main>`,
+  // The same policy set by a <meta http-equiv> tag instead (the server adds it
+  // to <head>), which is how many Angular apps ship a CSP.
+  '/csp-meta': `
+    <main>
+      <h1>Strict CSP in a meta tag</h1>
+      <img src="data:image/gif;base64,R0lGODlhAQABAAAAACw=">
+    </main>`,
   // Healthy: native controls in order, plus an iframe (Tab inside a frame shows
   // up as repeated focus on the <iframe>, which must not read as a trap).
   '/clean': `
@@ -205,6 +212,10 @@ const PAGES: Record<string, string> = {
     <main><h1>Sidebar</h1></main>`,
 };
 
+/** Blocks inline scripts and styles and requires Trusted Types. */
+const STRICT_CSP =
+  "default-src 'self'; img-src data:; script-src 'self'; style-src 'self'; require-trusted-types-for 'script'";
+
 function html(body: string): string {
   return `<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Fixture</title></head><body>${body}</body></html>`;
 }
@@ -220,11 +231,15 @@ describe.skipIf(!ready)('report-mode in a real browser (E2E)', () => {
       res.writeHead(body ? 200 : 404, {
         'content-type': 'text/html; charset=utf-8',
         ...(req.url === '/csp' && {
-          'content-security-policy':
-            "default-src 'self'; img-src data:; script-src 'self'; style-src 'self'; require-trusted-types-for 'script'",
+          'content-security-policy': STRICT_CSP,
         }),
       });
-      res.end(body ? html(body) : 'not found');
+      const page = body ? html(body) : 'not found';
+      res.end(
+        req.url === '/csp-meta'
+          ? page.replace('<head>', `<head><meta http-equiv="Content-Security-Policy" content="${STRICT_CSP}">`)
+          : page,
+      );
     });
     await new Promise<void>((done) => server.listen(0, '127.0.0.1', done));
     baseUrl = `http://127.0.0.1:${(server.address() as AddressInfo).port}`;
@@ -277,6 +292,10 @@ describe.skipIf(!ready)('report-mode in a real browser (E2E)', () => {
     expect(ids('/csp')).toContain('image-alt');
   });
 
+  it('scans a page whose strict policy is set in a meta tag', () => {
+    expect(ids('/csp-meta')).toContain('image-alt');
+  });
+
   it('checks contrast below the fold even when the app runs the in-app overlay', () => {
     const below = page('/overlay-below-fold').findings.filter((f) => f.html.includes('below-fold'));
     expect(below.map((f) => f.id)).toEqual(['color-contrast']);