Skip to content

feat(extension): bypass CORS for cross-origin images during export via background fetch#123

Merged
lcomplete merged 1 commit intomainfrom
dev
Mar 16, 2026
Merged

feat(extension): bypass CORS for cross-origin images during export via background fetch#123
lcomplete merged 1 commit intomainfrom
dev

Conversation

@lcomplete
Copy link
Copy Markdown
Owner

Summary

  • Routes cross-origin image fetches through the background service worker, which operates in a privileged context and is not subject to the CORS restrictions imposed on content scripts in Manifest V3.
  • Introduces fetchImageViaBackground and convertCrossOriginImages helpers in exportUtils.ts that run before html2canvas, converting unsafe images to data URLs so the canvas is never tainted.
  • Adds a fetch_image message handler in background.ts (with arrayBufferToBase64 / blobToDataUrl utilities) and registers the new message type in model.d.ts.
  • Bumps the extension version to 0.5.4.

@augmentcode
Copy link
Copy Markdown

augmentcode bot commented Mar 16, 2026

🤖 Augment PR Summary

Summary: This PR improves export reliability by avoiding CORS-tainted canvases when rendering pages that contain cross-origin images.

Changes:

  • Adds a background service worker fetch_image message that fetches remote images and returns them as data URLs.
  • Introduces fetchImageViaBackground and convertCrossOriginImages in exportUtils.ts to rewrite export-unsafe <img> sources to data URLs before html2canvas runs.
  • Enhances canvasToBlob to surface tainted-canvas errors via a toDataURL() attempt when toBlob() returns null.
  • Registers the new message type in model.d.ts and bumps the extension version to 0.5.4.

Technical Notes: Background fetch omits credentials and checks content-type is image/*; export still waits for images to load in the cloned DOM before rendering.

🤖 Was this summary useful? React with 👍 or 👎

Copy link
Copy Markdown

@augmentcode augmentcode bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review completed. 3 suggestions posted.

Fix All in Augment

Comment augment review to trigger a new review at any time.

} else if ((msg as any).type === "fetch_image") {
// Fetch a cross-origin image from the background (privileged context)
// and return it as a data URL for export.
const imageUrl = msg.payload?.url;
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this runs in a privileged background context, consider validating that imageUrl is an expected scheme (e.g. http(s) only) before attempting fetch, to avoid surprising behavior on unusual/invalid URL types.

Severity: low

Fix This in Augment

🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.

return;
}
const blob = await response.blob();
const dataUrl = await blobToDataUrl(blob);
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Converting an arbitrary image Blob to a base64 data URL can create very large strings; if the payload exceeds Chrome message size limits (or causes memory pressure), this path may fail and the caller will just see a null image with no clear cause.

Severity: medium

Fix This in Augment

🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.

// Avoid fetching ordinary same-origin images that simply haven't loaded
// yet. If the already-loaded image is still unsafe, fetch it regardless
// of origin to handle redirecting asset URLs.
if (!imageLoaded && url.origin === sourceOrigin) {
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This early-return means same-origin images that haven’t loaded yet won’t be background-fetched, which can miss the “same-origin URL that redirects cross-origin at load time” case described above and still lead to a tainted canvas in some exports.

Severity: medium

Fix This in Augment

🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.

@lcomplete lcomplete merged commit b556c43 into main Mar 16, 2026
1 check passed
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.

1 participant