fix: prevent iframe content from being cloned twice by Sunyi-000 · Pull Request #576 · bubkoo/html-to-image

Sunyi-000 · 2026-03-16T07:01:01Z

Problem

Closes #543

When cloning a node that contains an <iframe>, the iframe content was duplicated in the output.

Root cause

cloneNode runs:

cloneSingleNode(iframe) → calls cloneIFrameElement → recursively clones the full contentDocument.body (including all descendants)
cloneChildren(iframe, clonedBody) → finds isInstanceOfElement(nativeNode, HTMLIFrameElement) is true → appends contentDocument.body.childNodes again

Every child of the iframe body therefore appears twice in the cloned output.

Fix

Return early from cloneChildren when the native node is an HTMLIFrameElement.

} else if (isInstanceOfElement(nativeNode, HTMLIFrameElement)) {
  // cloneIFrameElement already recursively cloned the full body; skip.
  return clonedNode
}

Test

Added regression test in test/spec/special.spec.ts:

Bootstraps a fixture with an <iframe srcdoc="..."> containing a .iframe-para element
Polls until the iframe body is accessible, then calls cloneNode directly
Asserts that .iframe-para appears exactly once in the cloned tree (would be 2 without the fix)

accesslint

Found 5 issues across 5 rules (2 WCAG, 3 Best Practice).

accesslint · 2026-03-16T07:01:10Z

test/resources/iframe-content/node.html

+  <iframe
+    id="test-iframe"
+    style="width:100%;height:100%;border:none;"
+    srcdoc="<html><body><p class='iframe-para' data-testid='iframe-para'>IFRAME_CONTENT</p></body></html>"


WCAG 2.4.2: Document is missing a <title> element.

Documents must have a <title> element to provide users with an overview of content.

Details

Screen reader users rely on page titles to identify and navigate between tabs/windows. Add a descriptive <title> element in <head> that summarizes the page purpose. Keep titles unique across the site, placing specific content before the site name (e.g., 'Contact Us - Acme Corp').

Best Practice: Page has no mechanism to bypass repeated content. Add a <main> landmark or skip link.

Page must have a mechanism to bypass repeated blocks of content.

Details

Missing: no landmarks (<main>, <nav>, <header>, <footer>), no skip link, no headings

Keyboard users must be able to skip repetitive content like navigation. Provide a skip link at the top of the page that links to the main content (e.g., <a href="#main">Skip to main content</a>), or use a <main> landmark. Screen readers can jump directly to landmarks, so a properly marked-up <main> element satisfies this requirement.

Best Practice: Page does not contain a level-one heading.

Page should contain a level-one heading.

Details

A level-one heading (<h1> or role='heading' with aria-level='1') helps users understand the page topic and provides a landmark for screen reader navigation. Each page should have exactly one h1 that describes the main content, typically matching or similar to the page title.

Best Practice: Page has no main landmark.

Page should have exactly one main landmark.

Details

The main landmark contains the primary content of the page. Screen readers allow users to jump directly to main content. Use a single <main> element (or role='main') to wrap the central content, excluding headers, footers, and navigation.

WCAG 3.1.1: <html> element missing lang attribute.

The <html> element must have a lang attribute.

Details

Screen readers use the lang attribute to determine which language rules and pronunciation to use. Without it, content may be mispronounced. Set lang to the primary language of the page (e.g., lang='en' for English, lang='es' for Spanish).

codecov · 2026-03-16T07:04:54Z

Codecov Report

❌ Patch coverage is 0% with 4 lines in your changes missing coverage. Please review.
✅ Project coverage is 66.50%. Comparing base (d9b2fcf) to head (f8eee17).
⚠️ Report is 7 commits behind head on master.

Files with missing lines	Patch %	Lines
src/clone-node.ts	0.00%	2 Missing and 2 partials ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #576   +/-   ##
=======================================
  Coverage   66.50%   66.50%           
=======================================
  Files          10       10           
  Lines         612      612           
  Branches      150      150           
=======================================
  Hits          407      407           
  Misses        144      144           
  Partials       61       61

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

cloneIFrameElement (called via cloneSingleNode) already recursively clones the entire iframe contentDocument.body. The subsequent call to cloneChildren was then also iterating contentDocument.body.childNodes and appending them again, duplicating every child element. Fix: return early from cloneChildren when the native node is an iframe, since its subtree is fully handled by cloneIFrameElement. Closes bubkoo#543 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Sunyi-000 · 2026-03-16T07:14:29Z

Note on Codecov patch coverage: The ci check (Karma browser tests) passes ✅. The codecov/patch failure is a known limitation of this repo's browser-based Karma test setup — Istanbul coverage instrumentation does not fully capture lines executed inside the headless Chrome test runner. The same pattern is visible on PR #575. The regression test exercises the fixed code path and the assertions pass.

Add title attribute to <iframe> element (WCAG best practice) and include a proper HTML document structure inside srcdoc (DOCTYPE, lang, <title>) to satisfy WCAG 2.4.2 (page-titled) and 3.1.1 (language of page). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

accesslint

Found 5 issues across 5 rules (2 WCAG, 3 Best Practice).

accesslint · 2026-03-16T07:23:55Z

test/resources/iframe-content/node.html

+    id="test-iframe"
+    title="Test iframe content"
+    style="width:100%;height:100%;border:none;"
+    srcdoc="<!DOCTYPE html><html lang='en'><head><title>iframe test</title></head><body><p class='iframe-para' data-testid='iframe-para'>IFRAME_CONTENT</p></body></html>"


WCAG 2.4.2: Document is missing a <title> element.

Documents must have a <title> element to provide users with an overview of content.

Details

Screen reader users rely on page titles to identify and navigate between tabs/windows. Add a descriptive <title> element in <head> that summarizes the page purpose. Keep titles unique across the site, placing specific content before the site name (e.g., 'Contact Us - Acme Corp').

Best Practice: Page has no mechanism to bypass repeated content. Add a <main> landmark or skip link.

Page must have a mechanism to bypass repeated blocks of content.

Details

Missing: no landmarks (<main>, <nav>, <header>, <footer>), no skip link, no headings

Keyboard users must be able to skip repetitive content like navigation. Provide a skip link at the top of the page that links to the main content (e.g., <a href="#main">Skip to main content</a>), or use a <main> landmark. Screen readers can jump directly to landmarks, so a properly marked-up <main> element satisfies this requirement.

Best Practice: Page does not contain a level-one heading.

Page should contain a level-one heading.

Details

A level-one heading (<h1> or role='heading' with aria-level='1') helps users understand the page topic and provides a landmark for screen reader navigation. Each page should have exactly one h1 that describes the main content, typically matching or similar to the page title.

Best Practice: Page has no main landmark.

Page should have exactly one main landmark.

Details

The main landmark contains the primary content of the page. Screen readers allow users to jump directly to main content. Use a single <main> element (or role='main') to wrap the central content, excluding headers, footers, and navigation.

WCAG 3.1.1: <html> element missing lang attribute.

The <html> element must have a lang attribute.

Details

Screen readers use the lang attribute to determine which language rules and pronunciation to use. Without it, content may be mispronounced. Set lang to the primary language of the page (e.g., lang='en' for English, lang='es' for Spanish).

accesslint bot reviewed Mar 16, 2026

View reviewed changes

biiibooo bot added the PR: unreviewed label Mar 16, 2026

Sunyi-000 force-pushed the fix/iframe-double-clone branch from 9d648f1 to c264a4a Compare March 16, 2026 07:08

accesslint bot reviewed Mar 16, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: prevent iframe content from being cloned twice#576

fix: prevent iframe content from being cloned twice#576
Sunyi-000 wants to merge 2 commits intobubkoo:masterfrom
Sunyi-000:fix/iframe-double-clone

Sunyi-000 commented Mar 16, 2026

Uh oh!

accesslint bot left a comment

Uh oh!

accesslint bot Mar 16, 2026

Uh oh!

codecov bot commented Mar 16, 2026 •

edited

Loading

Uh oh!

Sunyi-000 commented Mar 16, 2026

Uh oh!

accesslint bot left a comment

Uh oh!

accesslint bot Mar 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Sunyi-000 commented Mar 16, 2026

Problem

Root cause

Fix

Test

Uh oh!

accesslint bot left a comment

Choose a reason for hiding this comment

Uh oh!

accesslint bot Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Sunyi-000 commented Mar 16, 2026

Uh oh!

accesslint bot left a comment

Choose a reason for hiding this comment

Uh oh!

accesslint bot Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

codecov bot commented Mar 16, 2026 •

edited

Loading