test: Add CSP violation detection test

- Listens for console CSP warnings and blocked requests
- Catches img-src/script-src/connect-src misconfigurations
- All 7 build-validation tests pass

Author: ijbo

changelogs/CHANGELOG-csp-test.md

@@ -0,0 +1,25 @@
+# CSP Violation Test
+
+- Added `no CSP violations on page load` test to `build-validation.spec.js`
+- Test listens for console warnings containing "Content Security Policy" and `net::ERR_BLOCKED_BY_CSP` request failures
+- Would have caught the shields.io badge block before deployment
+
+---
+
+## Summary
+Added a Playwright test to detect CSP violations at load time, closing the test coverage gap that let the shields.io badge block slip through.
+
+---
+
+## 1. CSP Violation Detection Test
+**Files:** `tests/dev/build-validation.spec.js`
+**What:** New test registers `console` and `requestfailed` listeners before page reload, collects any CSP-related warnings or blocked requests during a 5-second observation window, then asserts no violations occurred.
+**Impact:** Any future CSP misconfiguration (missing domain in `img-src`, `script-src`, `connect-src`, etc.) will be caught automatically by the test suite.
+
+---
+
+## Files Changed (1 total)
+
+| File | Lines Changed | Type |
+|------|:---:|------|
+| `tests/dev/build-validation.spec.js` | +28 | Test |

tests/dev/build-validation.spec.js

@@ -65,6 +65,36 @@ test.describe('Development Build Validation', () => {
         expect(csp).toContain('default-src');
     });
 
+    test('no CSP violations on page load', async ({ page }) => {
+        /** @type {string[]} */
+        const cspViolations = [];
+
+        // CSP blocks surface as console warnings (not JS errors)
+        page.on('console', msg => {
+            if (msg.type() === 'warning' || msg.type() === 'error') {
+                const text = msg.text();
+                if (text.includes('Content Security Policy') || text.includes('CSP')) {
+                    cspViolations.push(text);
+                }
+            }
+        });
+
+        // Also catch network requests blocked by CSP
+        page.on('requestfailed', req => {
+            const failure = req.failure();
+            if (failure && failure.errorText.includes('net::ERR_BLOCKED_BY_CSP')) {
+                cspViolations.push(`CSP blocked: ${req.url()}`);
+            }
+        });
+
+        await page.reload();
+        await page.waitForSelector('#markdown-editor', { state: 'visible' });
+        await page.waitForFunction(() => window.MDView && window.MDView.currentViewMode === 'split');
+        await page.waitForTimeout(5000);
+
+        expect(cspViolations, 'CSP violations detected — update img-src / script-src / connect-src in index.html').toEqual([]);
+    });
+
     test('vendor globals are loaded', async ({ page }) => {
         const globals = await page.evaluate(() => ({
             marked: typeof window.marked,