fix: patch html-to-image for PNG export font crash and tainted canvas (#8754)

## Summary

Fixes #2821

I tested a large PNG notebook download on safari, firefox and chrome and
faced different issues.

- Patch `html-to-image@1.11.13` to fix `normalizeFontFamily` crash when
`fontFamily` is undefined on `@font-face` rules (Firefox: `TypeError:
can't access property "trim", font is undefined`)
- Add `imagePlaceholder` to default `html-to-image` options so
cross-origin images that fail to embed fall back to a transparent pixel
instead of leaving external URLs that taint the canvas (`SecurityError:
Tainted canvases may not be exported`)
- Improve error logging in `downloadHTMLAsImage` to surface the actual
error message

Author: Light2Dark

frontend/src/utils/__tests__/download.test.tsx

@@ -437,8 +437,8 @@ describe("downloadHTMLAsImage", () => {
     await downloadHTMLAsImage({ element: mockElement, filename: "test" });
 
     expect(toast).toHaveBeenCalledWith({
-      title: "Error",
-      description: "Failed to download as PNG.",
+      title: "Failed to download as PNG",
+      description: "Failed",
       variant: "danger",
     });
   });

frontend/src/utils/download.ts

@@ -156,10 +156,11 @@ export async function downloadHTMLAsImage(opts: {
     // Get screenshot
     const dataUrl = await toPng(element);
     downloadByURL(dataUrl, Filenames.toPNG(filename));
-  } catch {
+  } catch (error) {
+    Logger.error("Error downloading as PNG", error);
     toast({
-      title: "Error",
-      description: "Failed to download as PNG.",
+      title: "Failed to download as PNG",
+      description: prettyError(error),
       variant: "danger",
     });
   } finally {

frontend/src/utils/html-to-image.ts

@@ -140,6 +140,11 @@ export const necessaryStyleProperties = [
   "cursor",
 ];
 
+// 1x1 transparent PNG as a fallback for images that fail to embed (e.g., cross-origin).
+// Without this, failed embeds leave external URLs in the cloned DOM, which taints the canvas.
+const TRANSPARENT_PIXEL =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQI12NgAAIABQABNjN9GQAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAA0lEQVQI12P4z8BQDwAEgAF/QualIQAAAABJRU5ErkJggg==";
+
 /**
  * Default options for html-to-image conversions.
  * These handle common edge cases like filtering out toolbars and logging errors.
@@ -162,6 +167,7 @@ export const defaultHtmlToImageOptions: HtmlToImageOptions = {
       return true;
     }
   },
+  imagePlaceholder: TRANSPARENT_PIXEL,
   onImageErrorHandler: (event) => {
     Logger.error("Error loading image:", event);
   },

patches/html-to-image@1.11.13.patch

@@ -1,29 +1,59 @@
 diff --git a/es/clone-node.js b/es/clone-node.js
-index 114cbf214f65cda237dbba67458c2b68fadf421e..2f31795bdb0f81b6a435b630a475b1ffe9f1d666 100644
+index 114cbf214f65cda237dbba67458c2b68fadf421e..8aaec57528ffc1f912c6f62ab4fbbf717cb104b2 100644
 --- a/es/clone-node.js
 +++ b/es/clone-node.js
-@@ -59,10 +59,6 @@ async function cloneChildren(nativeNode, clonedNode, options) {
+@@ -59,9 +59,15 @@ async function cloneChildren(nativeNode, clonedNode, options) {
      if (isSlotElement(nativeNode) && nativeNode.assignedNodes) {
          children = toArray(nativeNode.assignedNodes());
      }
 -    else if (isInstanceOfElement(nativeNode, HTMLIFrameElement) &&
 -        ((_a = nativeNode.contentDocument) === null || _a === void 0 ? void 0 : _a.body)) {
 -        children = toArray(nativeNode.contentDocument.body.childNodes);
--    }
++    else if (isInstanceOfElement(nativeNode, HTMLIFrameElement)) {
++        try {
++            if ((_a = nativeNode.contentDocument) === null || _a === void 0 ? void 0 : _a.body) {
++                children = toArray(nativeNode.contentDocument.body.childNodes);
++            }
++        }
++        catch (_e) {
++            // Cross-origin iframes cannot be accessed; fall through to clone as-is
++        }
+     }
      else {
          children = toArray(((_b = nativeNode.shadowRoot) !== null && _b !== void 0 ? _b : nativeNode).childNodes);
-     }
 diff --git a/es/embed-webfonts.js b/es/embed-webfonts.js
-index f6b0d96829c8a3301c142cacd07079e85b1f64fd..f5bfa86bc18c8314ad565c73c7dfab87728f3428 100644
+index f6b0d96829c8a3301c142cacd07079e85b1f64fd..c0eba90427585cefadb3baab8b05e58b8115e34c 100644
 --- a/es/embed-webfonts.js
 +++ b/es/embed-webfonts.js
-@@ -190,9 +190,12 @@ export async function embedWebFonts(clonedNode, options) {
+@@ -153,15 +153,17 @@ async function parseWebFontRules(node, options) {
+     return getWebFontRules(cssRules);
+ }
+ function normalizeFontFamily(font) {
+-    return font.trim().replace(/["']/g, '');
++    return (font || '').trim().replace(/["']/g, '');
+ }
+ function getUsedFonts(node) {
+     const fonts = new Set();
+     function traverse(node) {
+         const fontFamily = node.style.fontFamily || getComputedStyle(node).fontFamily;
+-        fontFamily.split(',').forEach((font) => {
+-            fonts.add(normalizeFontFamily(font));
+-        });
++        if (fontFamily) {
++            fontFamily.split(',').forEach((font) => {
++                fonts.add(normalizeFontFamily(font));
++            });
++        }
+         Array.from(node.children).forEach((child) => {
+             if (child instanceof HTMLElement) {
+                 traverse(child);
+@@ -190,9 +192,12 @@ export async function embedWebFonts(clonedNode, options) {
          : options.skipFonts
              ? null
              : await getWebFontCSS(clonedNode, options);
 -    if (cssText) {
 +    const finalCssText = options.extraStyleContent != null
-+        ? options.extraStyleContent.concat(cssText || '')
++        ? (cssText || '').concat(options.extraStyleContent)
 +        : cssText
 +    if (finalCssText) {
          const styleNode = document.createElement('style');
@@ -49,22 +79,30 @@ index a832baf45e95d7b3bb076ecacd46e73493f3e9ef..b487b064337bf75cb74dd530b54b7c6a
       * A boolean to turn off auto scaling for truly massive images..
       */
 diff --git a/lib/clone-node.js b/lib/clone-node.js
-index 214f4d30a50baae7f007d2399eeac298366538c7..4de9de97b39a620ebe8ba16e5feb9e552eb95bc6 100644
+index 214f4d30a50baae7f007d2399eeac298366538c7..74d67830cf549c05c533904123a9482c2cf5314f 100644
 --- a/lib/clone-node.js
 +++ b/lib/clone-node.js
-@@ -134,10 +134,6 @@ function cloneChildren(nativeNode, clonedNode, options) {
+@@ -134,9 +134,15 @@ function cloneChildren(nativeNode, clonedNode, options) {
                      if (isSlotElement(nativeNode) && nativeNode.assignedNodes) {
                          children = (0, util_1.toArray)(nativeNode.assignedNodes());
                      }
 -                    else if ((0, util_1.isInstanceOfElement)(nativeNode, HTMLIFrameElement) &&
 -                        ((_a = nativeNode.contentDocument) === null || _a === void 0 ? void 0 : _a.body)) {
 -                        children = (0, util_1.toArray)(nativeNode.contentDocument.body.childNodes);
--                    }
++                    else if ((0, util_1.isInstanceOfElement)(nativeNode, HTMLIFrameElement)) {
++                        try {
++                            if ((_a = nativeNode.contentDocument) === null || _a === void 0 ? void 0 : _a.body) {
++                                children = (0, util_1.toArray)(nativeNode.contentDocument.body.childNodes);
++                            }
++                        }
++                        catch (_e) {
++                            // Cross-origin iframes cannot be accessed; fall through to clone as-is
++                        }
+                     }
                      else {
                          children = (0, util_1.toArray)(((_b = nativeNode.shadowRoot) !== null && _b !== void 0 ? _b : nativeNode).childNodes);
-                     }
 diff --git a/lib/embed-webfonts.js b/lib/embed-webfonts.js
-index c91538bd9c3afa63326a91267fb7b5b9c999cccd..f3e3bc8f0e9e254b3c10e3c317d804e3c83f769e 100644
+index c91538bd9c3afa63326a91267fb7b5b9c999cccd..ca5fdedfd7904b6d99ad201d739300d4a50f451c 100644
 --- a/lib/embed-webfonts.js
 +++ b/lib/embed-webfonts.js
 @@ -300,9 +300,12 @@ function embedWebFonts(clonedNode, options) {
@@ -73,7 +111,7 @@ index c91538bd9c3afa63326a91267fb7b5b9c999cccd..f3e3bc8f0e9e254b3c10e3c317d804e3
                      cssText = _a;
 -                    if (cssText) {
 +                    const finalCssText = options.extraStyleContent != null
-+                        ? options.extraStyleContent.concat(cssText || '')
++                        ? (cssText || '').concat(options.extraStyleContent)
 +                        : cssText
 +                    if (finalCssText) {
                          styleNode = document.createElement('style');
@@ -99,41 +137,72 @@ index a832baf45e95d7b3bb076ecacd46e73493f3e9ef..b487b064337bf75cb74dd530b54b7c6a
       * A boolean to turn off auto scaling for truly massive images..
       */
 diff --git a/src/clone-node.ts b/src/clone-node.ts
-index 5dfcd117a1dd3d3d5cfb7c98ead3eb828085337a..8aa85ca88f84e8e64297673dcff36b21d48a95b4 100644
+index 5dfcd117a1dd3d3d5cfb7c98ead3eb828085337a..e0cd29915bd053ad31c1460ead1cb3556a23a79e 100644
 --- a/src/clone-node.ts
 +++ b/src/clone-node.ts
-@@ -88,11 +88,6 @@ async function cloneChildren<T extends HTMLElement>(
-
+@@ -89,10 +89,15 @@ async function cloneChildren<T extends HTMLElement>(
    if (isSlotElement(nativeNode) && nativeNode.assignedNodes) {
      children = toArray<T>(nativeNode.assignedNodes())
--  } else if (
+   } else if (
 -    isInstanceOfElement(nativeNode, HTMLIFrameElement) &&
 -    nativeNode.contentDocument?.body
--  ) {
++    isInstanceOfElement(nativeNode, HTMLIFrameElement)
+   ) {
 -    children = toArray<T>(nativeNode.contentDocument.body.childNodes)
++    try {
++      if (nativeNode.contentDocument?.body) {
++        children = toArray<T>(nativeNode.contentDocument.body.childNodes)
++      }
++    } catch {
++      // Cross-origin iframes cannot be accessed; fall through to clone as-is
++    }
    } else {
      children = toArray<T>((nativeNode.shadowRoot ?? nativeNode).childNodes)
    }
 diff --git a/src/embed-webfonts.ts b/src/embed-webfonts.ts
-index a84a699d37aeaaea19b9b31e0e98710f1e30da3c..6835efb8a2431aa8f066cd5ed0b47234b55f347a 100644
+index a84a699d37aeaaea19b9b31e0e98710f1e30da3c..83e33eade74c61a5f2ff56952535292c158f9cbb 100644
 --- a/src/embed-webfonts.ts
 +++ b/src/embed-webfonts.ts
-@@ -258,9 +258,13 @@ export async function embedWebFonts<T extends HTMLElement>(
+@@ -203,7 +203,7 @@ async function parseWebFontRules<T extends HTMLElement>(
+ }
+ 
+ function normalizeFontFamily(font: string) {
+-  return font.trim().replace(/["']/g, '')
++  return (font || '').trim().replace(/["']/g, '')
+ }
+ 
+ function getUsedFonts(node: HTMLElement) {
+@@ -211,9 +211,11 @@ function getUsedFonts(node: HTMLElement) {
+   function traverse(node: HTMLElement) {
+     const fontFamily =
+       node.style.fontFamily || getComputedStyle(node).fontFamily
+-    fontFamily.split(',').forEach((font) => {
+-      fonts.add(normalizeFontFamily(font))
+-    })
++    if (fontFamily) {
++      fontFamily.split(',').forEach((font) => {
++        fonts.add(normalizeFontFamily(font))
++      })
++    }
+ 
+     Array.from(node.children).forEach((child) => {
+       if (child instanceof HTMLElement) {
+@@ -258,9 +260,13 @@ export async function embedWebFonts<T extends HTMLElement>(
        ? null
        : await getWebFontCSS(clonedNode, options)
-
+ 
 -  if (cssText) {
 +  const finalCssText = options.extraStyleContent != null
-+    ? options.extraStyleContent.concat(cssText || '')
++    ? (cssText || '').concat(options.extraStyleContent)
 +    : cssText
 +
 +  if (finalCssText) {
      const styleNode = document.createElement('style')
 -    const sytleContent = document.createTextNode(cssText)
 +    const sytleContent = document.createTextNode(finalCssText)
-
+ 
      styleNode.appendChild(sytleContent)
-
+ 
 diff --git a/src/types.ts b/src/types.ts
 index 6023c3c2def1cb3ce83112c4c902997617582f59..ef40283ab6e47c98c7f8ea477c3ae29671682d98 100644
 --- a/src/types.ts