| Package | Affected versions | Patched versions |
|---|---|---|
| fabric.js | < 7.2.0 | 7.2.0 |
| fabric | < 7.2.0 | 7.2.0 |
fabric.js applies escapeXml() to text content during SVG export (src/shapes/Text/TextSVGExportMixin.ts:186) but fails to apply it to other user-controlled string values that are interpolated into SVG attribute markup. When attacker-controlled JSON is loaded via loadFromJSON() and later exported via toSVG(), the unescaped values break out of XML attributes and inject arbitrary SVG elements including event handlers.
loadFromJSON() (src/canvas/StaticCanvas.ts:1229) calls enlivenObjects() which calls _fromObject() (src/shapes/Object/Object.ts:1902). _fromObject passes all deserialized properties to the shape constructor via new this(enlivedObjectOptions). The constructor ultimately calls _setOptions() (src/CommonMethods.ts:9) which iterates over every property and assigns it to the object via this.set(prop, options[prop]). There is no allowlist or sanitization - any property in the JSON, including id, is set verbatim on the fabric object.
id Property InjectionThe id property from deserialized JSON is interpolated directly into SVG attribute strings without escaping.
Vulnerable code (src/shapes/Object/FabricObjectSVGExportMixin.ts, line 89, getSvgCommons()):
getSvgCommons(
this: FabricObjectSVGExportMixin & FabricObject & { id?: string },
) {
return [
this.id ? `id="${this.id}" ` : '', // <-- unescaped, user-controlled
this.clipPath
? `clip-path="url(#${...})" `
: '',
].join('');
}
This method is called in _createBaseSVGMarkup() (same file, line 178) which wraps every object's SVG output in a <g> element. Every fabric object type (Rect, Circle, Path, Text, Image, Group, etc.) inherits this mixin, so the id injection vector applies to all object types.
Contrast with text content, which IS escaped:
// src/shapes/Text/TextSVGExportMixin.ts:186
return `<tspan ...>${escapeXml(char)}</tspan>`;
The inconsistency shows that the intention was to prevent injection but was missed w attribute contexts.
src / xlink:href InjectionRunning one of these products? Scan your site to see whether it exposes a vulnerable version.
Scan my site freeImage source URLs are interpolated raw into xlink:href in _toSVG().
Vulnerable code (src/shapes/Image.ts, line 404, _toSVG()):
imageMarkup.push(
'\t<image ',
'COMMON_PARTS',
`xlink:href="${this.getSvgSrc(true)}" x="${x - this.cropX}" y="${
y - this.cropY
}" ...` // <-- unescaped
);
getSvgSrc() returns the image src property which is set from JSON during deserialization. An attacker can inject a src value that breaks out of the xlink:href attribute.
sourceToString()Vulnerable code (src/Pattern/Pattern.ts, line 181, toSVG()):
`<image x="0" y="0" ... xlink:href="${this.sourceToString()}"></image>`
// <-- unescaped, returns this.source.src for image sources
Additionally, Pattern's constructor (line 92–94) runs this.id = uid() before Object.assign(this, options), meaning a user-supplied id in the pattern JSON overwrites the auto-generated uid. The pattern id is then interpolated unescaped on line 180:
`<pattern id="SVGID_${id}" x="${patternOffsetX}" ...>`
id Partial Injection (lower Severity)Vulnerable code (src/gradient/Gradient.ts, line 212, toSVG()):
`id="SVGID_${this.id}"` // <-- unescaped
Gradient's constructor (line 125) computes id: id ? ${id}_${uid()} : uid(). If a user-supplied id is present in the gradient JSON, it is prepended to the auto-generated uid. The user-controlled portion is interpolated unescaped into the SVG. This is exploitable but the payload is constrained by the _<uid> suffix appended after it.
Any application that:
loadFromJSON(), collaborative sharing, import features, CMS plugins), ANDtoSVG() output in a browser context (SVG preview, export download rendered in-page, email template, embed)...is vulnerable to stored XSS. An attacker can execute arbitrary JavaScript in the victim's browser session.
Real-world attack scenarios:
Update to fabric.js 7.2.0 or newer version.
| File | Issue | Method | Exploitable |
|---|---|---|---|
src/shapes/Object/FabricObjectSVGExportMixin.ts | Unescaped this.id in attribute | getSvgCommons() | Yes - primary vector, all object types |
src/shapes/Image.ts | Unescaped getSvgSrc() in xlink:href | _toSVG() | Yes |
src/Pattern/Pattern.ts | Unescaped sourceToString() in xlink:href; unescaped id in attribute | toSVG() | Yes |
src/gradient/Gradient.ts | User-supplied id prefix interpolated unescaped | toSVG() | Yes (partial - uid suffix appended) |