fix: allow autoplay attributes on <video> in markdown - #261
Open
Ramon-Jimenez wants to merge 1 commit into
Open
Conversation
The sanitizer allowlist for <video> spelled three attributes in lowercase HTML form, but hast normalises attributes to their DOM property names before sanitizing. The comparison never matched, so the attributes were silently stripped: autoplay -> autoPlay stripped playsinline -> playsInline stripped mute -> (not a real HTML attribute at all) Only src, controls and loop were getting through, which meant autoplay could not be enabled on a <video> from markdown at all. <video-gif> was unaffected because its autoPlay/muted/playsInline are hardcoded props on the React component and never pass through the sanitizer. Spelling them the way hast stores them lets them through: <video src="..." autoplay muted playsinline controls></video> Note that browsers only autoplay muted video, so `muted` is required alongside `autoplay` for it to actually start.
BundleMonNo change in files bundle size Unchanged groups (1)
Final result: ✅ View report in BundleMon website ➡️ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📌 References
📝 Implementation
The sanitizer allowlist for
<video>spelled three attributes in lowercase HTML form, buthastnormalises attributes to their DOM property names before sanitizing. The comparisonnever matched, so the attributes were silently stripped:
haststoresautoplayautoPlayautoplayplaysinlineplaysInlineplaysinlinemutedmutemuteis not a real HTML attributeOnly
src,controlsandloopwere getting through, so autoplay could not be enabled on a<video>from markdown at all.<video-gif>was unaffected — itsautoPlay/muted/playsInlineare hardcoded props on the React component and never pass through the sanitizer.
One line, spelling them the way
haststores them:🔥 How to test it?
In any module step, use:
The video should start on its own, muted, with controls available to unmute and replay.
mutedis required — browsers refuse to autoplay video with sound, soautoplayon its ownwill still be blocked by the browser (correctly).
controlskeeps the player usable, whichmatters for narrated walkthroughs where muted autoplay alone would be useless.
Verified by running the real
validHtmlschema throughhast-util-sanitizebefore and after:Sanitizing is not weakened —
<video src="x" onerror="alert(1)"></video><script>alert(2)</script>still reduces to
video {"src":"x"}with the<script>removed. Confirmed working on a liveinstance with a real training video.
📑 Others
🤖 Generated with Claude Code