Fabric.js improper escaping in fabric.Gradient colorStops leads to XSS in SVG serialization
Date: 2026-06
Affected: npm/fabric
Attack vector: xss
Category: vulnerability-disclosure
Severity: Medium
CVE: CVE-2026-44311
CWE: CWE-116
CWE-79
CVSS: 5.4 (CVSS:3.1/AV:N/AC:L/PR:N/UI:R/S:U/C:L/I:L/A:N)

### Summary A potential Cross-Site Scripting (XSS) vulnerability exists in Fabric.js due to improper escaping of user-controlled input during SVG serialization via the `toSVG()` method. Specifically, the `color` field within the `colorStops` array of a `fabric.Gradient` object is not properly escaped when converted into SVG `<stop>` elements. If an application renders the generated SVG string into the DOM (e.g., via `innerHTML`), this may allow an attacker to inject arbitrary HTML/SVG and execute JavaScript in the victim's browser. ### Details During SVG export, Fabric.js serializes gradient color stops into `<stop>` elements like: ```xml <stop offset="0" stop-color="..."></stop> ``` However, the `color` value is inserted into the `stop-color` attribute without proper escaping of special characters such as `"`, `<`, and `>`. This allows crafted input to break out of the attribute context and inject arbitrary markup. For example: ```js color: 'red"><img src="x" onerror="alert(1)">' ``` may result in: ```xml <stop offset="0" stop-color="red"> <img src="x" onerror="alert(1)"> ``` This breaks the intended SVG structure and introduces executable HTML. ### PoC (Proof of Concept) Successfully verified on **v7.2.0** (current latest version). The following HTML and JavaScript code reproduces the vulnerability. The code constructs a rectangle with a maliciously crafted gradient color stop and exports it to SVG: ```html <!DOCTYPE html> <html> <head> <title>Fabric.js SVG Ex


Mitigations:

Architectural layers (MAESTRO):