Skip to content

fix(playground): absorb malformed HTML + warn when runner script is swallowed - #1705

Open
caugner wants to merge 2 commits into
mainfrom
1440-playground-detect-swallowed-script
Open

fix(playground): absorb malformed HTML + warn when runner script is swallowed#1705
caugner wants to merge 2 commits into
mainfrom
1440-playground-detect-swallowed-script

Conversation

@caugner

@caugner caugner commented Jul 9, 2026

Copy link
Copy Markdown
Contributor

(⚠️ Mirrored to mdn/dex#435. ⚠️ )

Description

Fix the Playground runner (vendor/yari/libs/play/index.js) so malformed HTML no longer swallows the user's JS, and warn when it still does:

  • Insert <!-- "" '' --> after the HTML, which closes an unclosed tag, attribute value, or comment before the runner script.
  • Set window.__mdnPlayJsStarted in a script before the runner and window.__mdnPlayJsEnded in the script after it.
  • Add a <head> check on DOMContentLoaded that warns via console.warn if either flag is missing.
  • Add a unit test (test/unit/play/runner.test.js).

Motivation

Ensure a typo like <o in the HTML no longer renders the JS as text, and that users get a hint in the remaining cases (e.g. an unclosed <textarea>), where the JS silently does not run.

Additional details

Flags instead of marker elements: user JS that replaces the body's children (e.g. document.body.innerHTML = ..., as several live samples do) removes the script elements but not the flags.

Verified with headless Chrome:

HTML JS runs Warning
<p>ok</p> yes no
annn <o jwj, <div class=", unclosed <!-- yes no
JS replacing document.body children yes no
unclosed <textarea>, <template>, <math> no yes

The file is mirrored in mdn/dex (cloud-function/src/internal/play/index.js), which serves the runner in deployed environments, so the fix only takes effect there once mdn/dex#435 lands.

Related issues and pull requests

Fixes #1440.

@github-actions

github-actions Bot commented Jul 9, 2026

Copy link
Copy Markdown
Contributor

ba69f51 was deployed to: https://fred-pr1705.review.mdn.allizom.net/

Comment thread vendor/yari/libs/play/index.js
@caugner
caugner force-pushed the 1440-playground-detect-swallowed-script branch from 24b04be to 9623022 Compare July 17, 2026 14:25
@caugner caugner changed the title fix(playground): warn when malformed HTML swallows the JS script fix(playground): guard runner against markup break-out Jul 17, 2026
@caugner
caugner force-pushed the 1440-playground-detect-swallowed-script branch from 9623022 to 4f7eb53 Compare July 17, 2026 14:49
@caugner
caugner marked this pull request as ready for review July 17, 2026 14:51
@caugner
caugner requested a review from a team as a code owner July 17, 2026 14:51
@caugner
caugner requested a review from LeoMcA July 17, 2026 14:51
Comment thread vendor/yari/libs/play/index.js Outdated
Comment thread vendor/yari/libs/play/index.js Outdated
Comment thread vendor/yari/libs/play/index.js Outdated
Comment thread vendor/yari/libs/play/index.js Outdated
Comment thread vendor/yari/libs/play/index.js Outdated
@caugner
caugner force-pushed the 1440-playground-detect-swallowed-script branch from 4f7eb53 to 72cb4a7 Compare September 2, 2026 16:13
@caugner caugner changed the title fix(playground): guard runner against markup break-out fix(playground): warn when malformed HTML swallows the JS script Sep 2, 2026
Comment thread vendor/yari/libs/play/index.js Outdated
Comment thread vendor/yari/libs/play/index.js Outdated
@caugner
caugner force-pushed the 1440-playground-detect-swallowed-script branch from fe7f962 to dd9f0e1 Compare September 3, 2026 09:36
@caugner
caugner marked this pull request as draft September 3, 2026 09:37
@caugner
caugner force-pushed the 1440-playground-detect-swallowed-script branch from dd9f0e1 to c64793c Compare September 3, 2026 09:46
@caugner caugner changed the title fix(playground): warn when malformed HTML swallows the JS script fix(playground): warn when malformed HTML swallows the runner script Sep 3, 2026
@caugner
caugner marked this pull request as ready for review September 4, 2026 11:42
@caugner
caugner requested a review from LeoMcA September 4, 2026 11:44
Comment thread vendor/yari/libs/play/index.js Outdated
@caugner
caugner marked this pull request as draft September 8, 2026 08:13
@caugner
caugner force-pushed the 1440-playground-detect-swallowed-script branch from c64793c to 90e3191 Compare September 9, 2026 13:38
@caugner
caugner marked this pull request as ready for review September 9, 2026 14:05
Comment thread vendor/yari/libs/play/index.js Outdated
@caugner caugner changed the title fix(playground): warn when malformed HTML swallows the runner script fix(playground): absorb malformed HTML + warn when runner script is swallowed Sep 9, 2026
@caugner
caugner force-pushed the 1440-playground-detect-swallowed-script branch from 9711bc3 to ad0fca6 Compare September 9, 2026 15:27
Add `id="mdn-play-js"` and `id="mdn-play-js-end"` markers to the runner
script and the script following it, and check from the head after
`DOMContentLoaded` that both are present as script elements. If either
is missing, log a console warning.

Unclosed or malformed tags in the HTML input can absorb the runner
script, so the JavaScript never executes and the playground silently
does nothing.
…lags

Insert `<!-- "" '' -->` after the HTML so an unclosed tag, attribute
value, or comment ends there instead of swallowing the runner script.
Set `window.__mdnPlayJsStarted` and `window.__mdnPlayJsEnded` around the
runner and check those in `<head>`, since the script elements disappear
when user JS replaces the body's children (a false positive in live
samples using `document.body.innerHTML`).
@caugner
caugner force-pushed the 1440-playground-detect-swallowed-script branch from ad0fca6 to 138b9be Compare September 9, 2026 15:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

When <o characters in Playground HTML input causes entire JavaScript input to show up in HTML preview

3 participants