fix(packages): escape HTML special chars in serializeAttributes to prevent XSS

[Jerricho93]

Summary

serializeAttributes interpolated attribute values directly into HTML strings without encoding. Because the result is assigned to shadowRoot.innerHTML at construction time, and Shadow DOM does not sandbox script execution, any attribute value containing " (e.g. a user-controlled poster, src, or crossorigin) could break out of the attribute and inject event handlers or <script> siblings into the shadow root.

Changes per sink:

• utils: add private escapeAttributeValue that encodes &, <, >, " (ampersand first to prevent double-encoding); apply in serializeAttributes
• html/BackgroundVideo: remove the local duplicate serializeAttributes; import the shared util and pick against the existing attribute allowlist
• html/define/background: remove dead _attrs parameter (was passed to a template that never interpolated it)
• icons/scripts/build: inline esc() in the generated renderIcon function body to close the codegen sink
• site/build-ejected-skins: extend the partial local escapeAttributeValue to also cover < and >

Testing

• New packages/utils/src/dom/tests/attributes.test.ts: 9 cases covering all four chars, boolean branch, ampersand-first ordering regression, and namedNodeMapToObject raw-value preservation
• New packages/html/src/media/background-video/tests/background-video.test.ts: quote breakout, angle-bracket injection, non-allowlisted attribute filtering, boolean attrs, safe value round-trip
• Extended packages/core/.../custom-media-element.test.ts: describe('XSS prevention') with 4 cases
• New apps/e2e/tests/xss-prevention.spec.ts: 3 Playwright tests exercising the construction-time path via container.innerHTML

Validation

pnpm -F @videojs/utils test src/dom/tests/attributes.test.ts
pnpm -F @videojs/core test src/dom/media/custom-media-element
pnpm -F @videojs/html test src/media/background-video
pnpm test:e2e:vite
pnpm typecheck
pnpm lint

Known issue (follow-up)

CustomMediaElement has a pre-existing attribute routing inconsistency: getAttrsFromProps uses .toLowerCase() to build observedAttributes (e.g. crossorigin, controlslist, disableremoteplayback), while #define uses kebabCase to key mediaHostAttrToProp (e.g. cross-origin, controls-list, disable-remote-playback). Because these never match, multi-word attributes are never added to the disallowed set and always flow through serializeAttributes rather than attributeChangedCallback. This means post-construction setAttribute calls for those attributes do not sync to the media host setter. This fix makes serializeAttributes safe, closing the injection vector — but the routing inconsistency itself should be tracked and corrected separately.

Closes #1562

---

Note

High Risk
Security fix on HTML string assembly used at custom-element construction; behavior change for attribute values containing &<>" but intended to block script/event injection in shadow templates.

Overview
Closes an XSS path where unescaped attribute values were interpolated into HTML assigned to shadowRoot.innerHTML (and similar codegen sinks), allowing quote/angle-bracket breakout into event handlers or extra nodes inside shadow roots.

serializeAttributes in @videojs/utils/dom now runs values through escapeHtml (&, <, >, ", with ampersand first). BackgroundVideo drops its local serializer and uses the shared helper with an existing video-attribute allowlist via pick. background-video-skin stops passing unused attrs into a static template.

The same escaping pattern is applied to generated renderIcon output (icons build) and ejected skin HTML (build-ejected-skins), including </> on icon names and attrs.

Coverage adds unit tests for serializeAttributes / escapeHtml, XSS cases on CustomMediaElement and BackgroundVideo, and Playwright e2e on hls-video construction via innerHTML.

^{Reviewed by Cursor Bugbot for commit 101bd4a. Bugbot is set up for automated code reviews on this repo. Configure here.}

[vercel]

@Jerricho93 is attempting to deploy a commit to the Mux Team on Vercel.

A member of the Team first needs to authorize it.

[netlify]

👷 Deploy request for vjs10-site pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	101bd4a

[luwes]

would like some small changes but looks good overall!

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 449c141. Configure here.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
v10-sandbox	Ready	Preview, Comment	Jun 10, 2026 8:03pm

[luwes]

LGTM