VYPR
\n\n\n

Fabric.js SVG Export XSS Bypass Test (Gradient Color)

\n \n \n

SVG Output Rendering:

\n
\n\n \n\n\n```\n\n### Impact\n\nThis issue can lead to XSS in applications that:\n1. Allow user-controlled input in gradient definitions (e.g., color values)\n2. Use `canvas.toSVG()` to export content\n3. Insert the resulting SVG string into the DOM without sanitization (e.g., via `innerHTML`)\n\nSuccessful exploitation may result in the execution of arbitrary JavaScript in the victim's browser, theft of sensitive data, or unauthorized actions on behalf of the user.\n\n### Suggested Fix\n**Proper Escaping (Recommended)**: Escape special characters in attribute values during SVG serialization.","additionalType":"https://schema.org/SoftwareApplication","sameAs":["https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2026-44311"]},"keywords":"CVE-2026-44311, medium, Fabrick Fabric.js","mentions":[{"@type":"SoftwareApplication","name":"Fabric.js","applicationCategory":"SecurityApplication","publisher":{"@type":"Organization","name":"Fabrick"}}],"isAccessibleForFree":true},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://portal.vyprsec.ai/"},{"@type":"ListItem","position":2,"name":"CVEs","item":"https://portal.vyprsec.ai/cves"},{"@type":"ListItem","position":3,"name":"CVE-2026-44311","item":"https://portal.vyprsec.ai/cves/CVE-2026-44311"}]}]}
← All advisories
Medium severity5.4GHSA Advisory· Published Jun 12, 2026· Updated Jun 12, 2026

Fabric.js improper escaping in fabric.Gradient colorStops leads to XSS in SVG serialization

CVE-2026-44311

Description

Fabric.js 7.2.0 through 7.3.x fail to escape gradient color values in toSVG(), enabling XSS when output is rendered into DOM.

AI Insight

LLM-synthesized narrative grounded in this CVE's description and references.

Fabric.js 7.2.0 through 7.3.x fail to escape gradient color values in toSVG(), enabling XSS when output is rendered into DOM.

Vulnerability

A Cross-Site Scripting (XSS) vulnerability exists in Fabric.js versions 7.2.0 through 7.3.x due to improper escaping of user-controlled input during SVG serialization via the toSVG() method [1][2]. Specifically, the color field within the colorStops array of a fabric.Gradient object is not sanitized when converted into SVG ` elements. This allows a crafted input, such as red">, to break out of the stop-color` attribute and inject arbitrary HTML/SVG markup [1][2]. The vulnerability was successfully verified on version 7.2.0 [1][2].

Exploitation

An attacker requires the ability to supply or influence the color value in a fabric.Gradient object that is subsequently serialized with toSVG() [1][2]. No authentication or special network position is needed if the application accepts user-provided gradient definitions. The attacker crafts a malicious color string containing special characters such as ", <, and >. When the resulting SVG string is rendered into the DOM (e.g., via innerHTML), the injected markup executes in the victim's browser [1][2]. The proof of concept demonstrates this by programmatically constructing a rectangle with a malicious gradient and exporting it to SVG [1][2].

Impact

Successful exploitation leads to arbitrary HTML/SVG injection and execution of script code in the context of the victim's browser session [1][2]. The attacker can potentially steal cookies, session tokens, or perform actions on behalf of the user, depending on the application's security context and permissions. The privilege level is that of the victim user, and the compromise scope is limited to the browser session where the malicious SVG is rendered.

Mitigation

The vulnerability is fixed in Fabric.js version 7.4.0, released on 2026-06-12 [3]. Users should immediately update to version 7.4.0 or later [3]. As a workaround, any application that renders SVG output from Fabric.js should sanitize the generated SVG string before inserting it into the DOM, for example by using DOMPurify or ensuring the output is never used with innerHTML [1][2]. There is no indication that this CVE is listed in CISA's Known Exploited Vulnerabilities (KEV) catalog as of the publication date.

References
  1. CVE-2026-44311 - GitHub Advisory Database
  2. Improper escaping in fabric.Gradient colorStops leads to XSS in SVG serialization
  3. Release Version 7.4.0 · fabricjs/fabric.js

AI Insight generated on Jun 12, 2026. Synthesized from this CVE's description and the cited reference URLs; citations are validated against the source bundle.

Affected products

1

Patches

0

No patches discovered yet.

Vulnerability mechanics

Root cause

"The `fabric.Gradient.toSVG()` method does not escape special characters in the `color` field when writing the `stop-color` attribute, allowing an attacker to break out of the attribute context and inject arbitrary HTML/SVG."

Attack vector

An attacker supplies a crafted `color` value (e.g., `red"><img src="x" onerror="alert(1)">`) inside a `fabric.Gradient` object. When `canvas.toSVG()` serializes the gradient, the malicious string breaks out of the `stop-color` attribute and injects arbitrary HTML/SVG markup [ref_id=1]. If the application renders that SVG string into the DOM via `innerHTML`, the injected `<img onerror=...>` executes attacker-controlled JavaScript in the victim's browser [ref_id=2]. The attack requires the application to accept user-controlled gradient color values and to unsafely insert the exported SVG into the page. (CWE-79)

Affected code

The vulnerability resides in the SVG serialization logic of `fabric.Gradient.toSVG()` — specifically how the `color` field inside a `colorStops` array is written into the `stop-color` attribute of a `<stop>` element without escaping special characters. No patch file is included in the bundle, but the advisory notes a fix was released in v7.4.0 [ref_id=1].

What the fix does

The advisory recommends escaping special characters (`"`, `<`, `>`) in attribute values during SVG serialization, which would prevent a crafted `color` value from prematurely closing the `stop-color` attribute or opening new tags [ref_id=1]. A fix was released in Fabric.js v7.4.0 [ref_id=1]. Without such escaping, an attacker can inject arbitrary HTML/SVG into the generated `<stop>` element and achieve XSS when the output is placed into the DOM.

Preconditions

  • inputApplication accepts user-controlled input for gradient color values (e.g., the `color` field of `colorStops` in a `fabric.Gradient`).
  • configApplication calls `canvas.toSVG()` on objects containing such gradients and inserts the resulting SVG string into the DOM without sanitization (e.g., via `innerHTML`).

Reproduction

The following HTML reproduces the vulnerability on Fabric.js v7.2.0. It creates a rectangle with a malicious gradient whose `color` value contains an XSS payload, exports the canvas to SVG, and renders the SVG into the DOM via `innerHTML` [ref_id=1]:

```html <!DOCTYPE html> <html> <head> <title>Fabric.js SVG Export XSS Bypass Test</title> <script src="https://cdn.jsdelivr.net/npm/fabric@7.2.0/dist/index.js"></script> </head> <body> <h1>Fabric.js SVG Export XSS Bypass Test (Gradient Color)</h1> <canvas id="c" width="400" height="300"></canvas> <h3>SVG Output Rendering:</h3> <div id="svg-output" style="border: 1px solid #ccc; padding: 10px; margin-top: 10px;"></div> <script> setTimeout(() => { const canvas = new fabric.Canvas('c'); const maliciousGradient = new fabric.Gradient({ type: 'linear', coords: { x1: 0, y1: 0, x2: 100, y2: 0 }, colorStops: [ { offset: 0, color: 'red"><img src="x" onerror="alert(\'XSS Triggered Successfully!\')">' }, { offset: 1, color: 'blue' } ] }); const rect = new fabric.Rect({ left: 50, top: 50, width: 300, height: 100, fill: maliciousGradient }); canvas.add(rect); const svgOutput = canvas.toSVG(); document.getElementById('svg-output').innerHTML = svgOutput; }, 100); </script> </body> </html> ```

Generated on Jun 12, 2026. Inputs: CWE entries + fix-commit diffs from this CVE's patches. Citations validated against bundle.

References

3

News mentions

0

No linked articles in our index yet.