From 622c8f71297b64898f8b07c1a302ff4bf02715c3 Mon Sep 17 00:00:00 2001
From: Mostafa Sadeghi <205455727+mostafasadeghidev@users.noreply.github.com>
Date: Fri, 7 Aug 2026 17:58:51 +0200
Subject: [PATCH] fix(publisher): allow cross-origin media in the published CSP
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The base policy set `img-src 'self' data: https:` but never set
`media-src`. An unset `media-src` falls back to `default-src 'self'`, so
every published page loaded a remote image happily and refused every
remote `<video>` / `<audio>`:

    Loading media from 'https://…/hover.mp4' violates the following
    Content Security Policy directive: "default-src 'self'". Note that
    'media-src' was not explicitly set, so 'default-src' is used as a
    fallback. The action has been blocked.

Both directives govern passive references that execute nothing, so the
line between them was arbitrary — and invisible from the markup. The
element is right, the URL resolves, the file serves; the video just never
plays and only the console says why.

`media-src` now mirrors `img-src` exactly, and a test asserts they stay
equal rather than pinning the literal string twice.

Found on a site imported from another builder, where per-item hover
videos are served from the source CDN.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/features/publisher.md              |  3 ++-
 src/__tests__/publisher/cspPlan.test.ts | 17 +++++++++++++++--
 src/core/publisher/cspPlan.ts           |  8 ++++++++
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/docs/features/publisher.md b/docs/features/publisher.md
index c87e8eb12..7a729b533 100644
--- a/docs/features/publisher.md
+++ b/docs/features/publisher.md
@@ -344,7 +344,8 @@ Plugins inject at four anchors. The order matters — see [docs/features/plugin-
 
 The CSP is modelled as **data**, not a string assembled with regex. `src/core/publisher/cspPlan.ts` owns one `CspPlan` (`Map<directive, Set<source>>`) and the deterministic `serializeCsp` (directives sorted by name, sources sorted within each directive). Every stage contributes to the same plan:
 
-- `createBaseCspPlan` (in `render.ts`) emits the base policy: `default-src 'self'`, restricted `script-src` (`'none'` → `'self'` + importmap `sha256` once any script tag is present), `style-src 'self' 'unsafe-inline'`, `img-src 'self' data: https:`, `frame-src 'none'`, and `worker-src` (`'none'` → `'self' blob:`).
+- `createBaseCspPlan` (in `render.ts`) emits the base policy: `default-src 'self'`, restricted `script-src` (`'none'` → `'self'` + importmap `sha256` once any script tag is present), `style-src 'self' 'unsafe-inline'`, `img-src 'self' data: https:`, `media-src 'self' data: https:`, `frame-src 'none'`, and `worker-src` (`'none'` → `'self' blob:`).
+  - `media-src` deliberately mirrors `img-src`. Both govern passive references that execute nothing, so allowing a remote image while blocking a remote `<video>` would be an arbitrary line. It has to be stated explicitly: an unset `media-src` falls back to `default-src 'self'`, and the only symptom is a video that silently never loads.
 - The server injection pipeline (`server/publish/frontendInjections.ts`) merges plugin `frontend.assets[]` relaxations + elected media-adapter origins into the plan in **one** pass via `rewriteCspMeta` — no second regex pass, no per-directive `RegExp`.
 - The module-JS injector (`injectModuleScripts` in `server/publish/moduleJsBundle.ts`) merges `script-src 'self'` through the same `rewriteCspMeta` helper — only when at least one `/_instatic/module-js/<moduleId>.js` script tag was injected.
 
diff --git a/src/__tests__/publisher/cspPlan.test.ts b/src/__tests__/publisher/cspPlan.test.ts
index aed090272..e9cfea458 100644
--- a/src/__tests__/publisher/cspPlan.test.ts
+++ b/src/__tests__/publisher/cspPlan.test.ts
@@ -31,14 +31,27 @@ describe('CspPlan — serialization is deterministic and sorted', () => {
   it('sorts directives by name and sources within each directive', () => {
     const plan = createBaseCspPlan({ anyScriptTag: false })
     const csp = serializeCsp(plan)
-    // Directives alphabetical: default-src < frame-src < img-src < script-src
-    //   < style-src < worker-src
+    // Directives alphabetical: default-src < frame-src < img-src < media-src
+    //   < script-src < style-src < worker-src
     expect(csp).toBe(
       "default-src 'self'; frame-src 'none'; img-src 'self' data: https:; " +
+        "media-src 'self' data: https:; " +
         "script-src 'none'; style-src 'self' 'unsafe-inline'; worker-src 'none';",
     )
   })
 
+  it('lets a cross-origin video load, exactly like a cross-origin image', () => {
+    // Without an explicit `media-src` the browser falls back to
+    // `default-src 'self'` and blocks every remote `<video>`/`<audio>` — a
+    // page could show a remote image but never play a remote video. The
+    // element and URL are both correct, so the only symptom is silence.
+    const csp = serializeCsp(createBaseCspPlan({ anyScriptTag: true }))
+    expect(csp).toContain("media-src 'self' data: https:;")
+    const img = /img-src ([^;]+);/.exec(csp)?.[1]
+    const media = /media-src ([^;]+);/.exec(csp)?.[1]
+    expect(media).toBe(img)
+  })
+
   it('produces a byte-identical policy regardless of source insertion order', () => {
     const a = createBaseCspPlan({ anyScriptTag: true, importmapSha: 'ABC123' })
     const b = createBaseCspPlan({ anyScriptTag: true, importmapSha: 'ABC123' })
diff --git a/src/core/publisher/cspPlan.ts b/src/core/publisher/cspPlan.ts
index cdbe3f7c4..9b6f33f64 100644
--- a/src/core/publisher/cspPlan.ts
+++ b/src/core/publisher/cspPlan.ts
@@ -83,6 +83,14 @@ export function createBaseCspPlan(opts: {
 
   setCspDirective(plan, 'style-src', ["'self'", "'unsafe-inline'"])
   setCspDirective(plan, 'img-src', ["'self'", 'data:', 'https:'])
+  // Same sources as `img-src`, and for the same reason. Without an explicit
+  // `media-src` the browser falls back to `default-src 'self'` and refuses
+  // every cross-origin `<video>` / `<audio>` — so a page could show a remote
+  // image but not play a remote video, which is an arbitrary line to draw
+  // between two passive, non-executing references. The failure is also
+  // invisible in the markup: the element is correct, the URL resolves, and
+  // only the console says why nothing happens.
+  setCspDirective(plan, 'media-src', ["'self'", 'data:', 'https:'])
   setCspDirective(plan, 'frame-src', ["'none'"])
   setCspDirective(plan, 'worker-src', opts.anyScriptTag ? ["'self'", 'blob:'] : ["'none'"])
   return plan