fix(packages): escape HTML special chars in serializeAttributes to prevent XSS by Jerricho93 · Pull Request #1670 · videojs/v10

Jerricho93 · 2026-06-09T15:34:03Z

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

Medium Risk
Security fix on construction-time shadow HTML for media elements; behavior change is limited to escaping special characters in serialized attributes, with broad test coverage but many call sites rely on the shared helper.

Overview
Closes an XSS path where attribute values were interpolated into shadowRoot.innerHTML without encoding, so crafted poster, src, crossorigin, etc. could break out of quotes and inject markup or handlers in custom media shadow roots.

serializeAttributes now runs values through a shared escapeHtml helper (&, <, >, ", with & first). BackgroundVideo drops its local serializer and uses the shared util with an explicit video-attribute allowlist; background-video-skin stops passing unused attrs into its template. Icon renderIcon codegen and ejected-skin media-icon HTML apply the same escaping for dynamic attribute strings.

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

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

vercel · 2026-06-09T15:34:08Z

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

A member of the Team first needs to authorize it.

netlify · 2026-06-09T16:25:32Z

👷 Deploy request for vjs10-site pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	`d222690`

luwes · 2026-06-09T23:27:24Z

    if (value === '') html += ` ${key}`;
-    else html += ` ${key}="${value}"`;
+    else html += ` ${key}="${escapeAttributeValue(value)}"`;


luwes · 2026-06-09T23:37:18Z

+// Ampersand must be escaped first to avoid double-encoding the entities below.
+function escapeAttributeValue(value: string): string {
+  return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}


can we move this to its own file and name it more generic escapeHtml(). it's pretty common as utility.
https://github.com/videojs/v10/blob/440145e9de980fda317b11ae2b7ee3abdc7e3ff7/packages/utils/src/string/escape-html.ts#L10

luwes · 2026-06-09T23:38:04Z

@@ -27,7 +27,7 @@ export class BackgroundVideoSkinElement extends ReactiveElement {

    if (!this.shadowRoot) {
      this.attachShadow((this.constructor as typeof BackgroundVideoSkinElement).shadowRootOptions);
-      this.shadowRoot!.innerHTML = getTemplateHTML(namedNodeMapToObject(this.attributes));


why is this removed?

The _attrs parameter is not being used here. If we were to accept attrs in getTemplateHTML without escaping, it would introduce the same issues we're fixing with this PR. If there is a plan in the future to add this (by removing _ to attrs), we can reintroduce it and add the escape logic now. Does it makes sense? Otherwise, at this point in time in the code, this is effectively dead code

luwes

would like some small changes but looks good overall!

…event XSS Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…n in e2e XSS tests Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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.}

…ideo Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

vercel · 2026-06-10T20:02:41Z

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

github-project-automation Bot added this to Video.js 10 Roadmap Jun 9, 2026

Jerricho93 marked this pull request as ready for review June 9, 2026 18:52

luwes reviewed Jun 9, 2026

View reviewed changes

luwes requested changes Jun 9, 2026

View reviewed changes

Jerricho93 and others added 3 commits June 10, 2026 16:28

fix(packages): escape HTML special chars in serializeAttributes to pr…

d9251b7

…event XSS Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix(test): use crossorigin attribute and wait for hls-video definitio…

3eb18cd

…n in e2e XSS tests Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

refactor(utils): extract escapeHtml into @videojs/utils/string

449c141

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Jerricho93 force-pushed the fix/1562-escape-serialized-attribute-values branch from 530412d to 449c141 Compare June 10, 2026 19:29

cursor Bot reviewed Jun 10, 2026

View reviewed changes

Comment thread packages/html/src/media/background-video/index.ts Outdated

fix(html): revert unintentional get target() refactor in background-v…

d222690

…ideo Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Jerricho93 requested a review from luwes June 10, 2026 20:02

vercel Bot deployed to Preview June 10, 2026 20:03 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

fix(packages): escape HTML special chars in serializeAttributes to prevent XSS#1670
Jerricho93 wants to merge 4 commits into
videojs:mainfrom
Jerricho93:fix/1562-escape-serialized-attribute-values

Jerricho93 commented Jun 9, 2026 •

edited by cursor Bot

Loading

Uh oh!

vercel Bot commented Jun 9, 2026

Uh oh!

netlify Bot commented Jun 9, 2026 •

edited

Loading

Uh oh!

luwes Jun 9, 2026

Uh oh!

luwes Jun 9, 2026

Uh oh!

Jerricho93 Jun 10, 2026

Uh oh!

luwes Jun 9, 2026

Uh oh!

Jerricho93 Jun 10, 2026

Uh oh!

luwes left a comment

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

vercel Bot commented Jun 10, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Jerricho93 commented Jun 9, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Testing

Validation

Known issue (follow-up)

Uh oh!

vercel Bot commented Jun 9, 2026

Uh oh!

netlify Bot commented Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

👷 Deploy request for vjs10-site pending review.

Uh oh!

luwes Jun 9, 2026

Choose a reason for hiding this comment

Uh oh!

luwes Jun 9, 2026

Choose a reason for hiding this comment

Uh oh!

Jerricho93 Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

luwes Jun 9, 2026

Choose a reason for hiding this comment

Uh oh!

Jerricho93 Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

luwes left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

vercel Bot commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Jerricho93 commented Jun 9, 2026 •

edited by cursor Bot

Loading

netlify Bot commented Jun 9, 2026 •

edited

Loading

vercel Bot commented Jun 10, 2026 •

edited

Loading