bubkoo / html-to-image

✂️ Generates an image from a DOM node using HTML5 canvas and SVG.
MIT License
5.39k stars 503 forks source link

fix: prevent duplicate child cloning of iframe content #434

Open joshualoehr opened 9 months ago

joshualoehr commented 9 months ago

Description

Currently, iframe content is duplicated during the recursive cloneNode process. See this repo for a minimal reproduction of the issue: https://github.com/joshualoehr/html-to-image-iframe-bug

image

I'm new to this library so it's not clear to me if there's a downside to the fix I'm proposing, or a better way to approach a solution. But all of the existing tests pass and the new test I've added covers the scenario in my repro repo.

Motivation and Context

When the iframe node is originally passed into cloneNode, it is forwarded to cloneSingleNode. In cloneSingleNode, the iframe's document body is extracted and recursively passed back into cloneNode as another root node. That latter cloneNode call takes care of cloning all of the iframe content just fine.

However, since the original call to cloneNode with the iframe node is still promise-chained, it will then pass through cloneChildren, decorate, and ensureSVGSymbols again, after its document body node has already done so. That causes the iframe's body and other nested contents to be cloned again, redundantly. The result is two copies of the iframe contents in the SVG.

The changes in this PR stop cloneChildren and decorate from doing anything if operating on the iframe node itself, rather than its nested document body. ensureSVGSymbols seems to be irrelevant for iframes, so I've left it alone.

Types of changes

Self Check before Merge

vivcat[bot] commented 9 months ago

👋 @joshualoehr

💖 Thanks for opening this pull request! 💖

Please follow the contributing guidelines. And we use semantic commit messages to streamline the release process.

Examples of commit messages with semantic prefixes:

Things that will help get your PR across the finish line:

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

codecov[bot] commented 9 months ago

Codecov Report

Patch and project coverage have no change.

Comparison is base (b751cbf) 62.93% compared to head (eba8d40) 62.93%. Report is 3 commits behind head on master.

Additional details and impacted files ```diff @@ Coverage Diff @@ ## master #434 +/- ## ======================================= Coverage 62.93% 62.93% ======================================= Files 10 10 Lines 580 580 Branches 143 143 ======================================= Hits 365 365 Misses 151 151 Partials 64 64 ``` | [Files Changed](https://app.codecov.io/gh/bubkoo/html-to-image/pull/434?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=%E5%B4%96) | Coverage Δ | | |---|---|---| | [src/clone-node.ts](https://app.codecov.io/gh/bubkoo/html-to-image/pull/434?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=%E5%B4%96#diff-c3JjL2Nsb25lLW5vZGUudHM=) | `71.42% <ø> (ø)` | |

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.