fabric 7.0.0 → 7.2.0

package/src/gradient/Gradient.spec.ts

@@ -1,16 +1,16 @@
 import { getFabricDocument } from '../env';
 import { FabricObject } from '../shapes/Object/FabricObject';
 import { Gradient } from './Gradient';
-import type { GradientUnits, SVGOptions } from './typedefs';
+import type {
+  GradientUnits,
+  RadialGradientCoords,
+  SVGOptions,
+} from './typedefs';
 import { classRegistry } from '../ClassRegistry';
 
-import { describe, expect, it, test, vi } from 'vitest';
+import { describe, expect, it, test } from 'vitest';
 import { StaticCanvas } from '../canvas/StaticCanvas';
 
-vi.mock('../util/internals/uid', () => ({
-  uid: () => 0,
-}));
-
 function createLinearGradient(units: GradientUnits = 'pixels', id?: string) {
   return new Gradient({
     type: 'linear',
@@ -85,17 +85,17 @@ function createRadialGradientSwapped() {
 }
 
 const SVG_LINEAR =
-  '<linearGradient id="SVGID_0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 1 -50 -50)"  x1="0" y1="10" x2="100" y2="200">\n<stop offset="0%" style="stop-color:rgba(255,0,0,0);"/>\n<stop offset="100%" style="stop-color:green;"/>\n</linearGradient>\n';
+  '<linearGradient id="SVGID" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 1 -50 -50)"  x1="0" y1="10" x2="100" y2="200">\n<stop offset="0%" style="stop-color:rgba(255,0,0,0);"/>\n<stop offset="100%" style="stop-color:green;"/>\n</linearGradient>\n';
 const SVG_RADIAL =
-  '<radialGradient id="SVGID_0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 1 -50 -50)"  cx="100" cy="200" r="50" fx="0" fy="10">\n<stop offset="0%" style="stop-color:red;"/>\n<stop offset="100%" style="stop-color:rgba(0,255,0,0);"/>\n</radialGradient>\n';
+  '<radialGradient id="SVGID" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 1 -50 -50)"  cx="100" cy="200" r="50" fx="0" fy="10">\n<stop offset="0%" style="stop-color:red;"/>\n<stop offset="100%" style="stop-color:rgba(0,255,0,0);"/>\n</radialGradient>\n';
 const SVG_INTERNALRADIUS =
-  '<radialGradient id="SVGID_0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 1 -50 -50)"  cx="100" cy="200" r="50" fx="0" fy="10">\n<stop offset="20%" style="stop-color:red;"/>\n<stop offset="100%" style="stop-color:rgba(0,255,0,0);"/>\n</radialGradient>\n';
+  '<radialGradient id="SVGID" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 1 -50 -50)"  cx="100" cy="200" r="50" fx="0" fy="10">\n<stop offset="20%" style="stop-color:red;"/>\n<stop offset="100%" style="stop-color:rgba(0,255,0,0);"/>\n</radialGradient>\n';
 const SVG_SWAPPED =
-  '<radialGradient id="SVGID_0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 1 -50 -50)"  cx="0" cy="10" r="50" fx="100" fy="200">\n<stop offset="20%" style="stop-color:rgba(0,255,0,0);"/>\n<stop offset="100%" style="stop-color:red;"/>\n</radialGradient>\n';
+  '<radialGradient id="SVGID" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 1 -50 -50)"  cx="0" cy="10" r="50" fx="100" fy="200">\n<stop offset="20%" style="stop-color:rgba(0,255,0,0);"/>\n<stop offset="100%" style="stop-color:red;"/>\n</radialGradient>\n';
 const SVG_LINEAR_PERCENTAGE =
-  '<linearGradient id="SVGID_0" gradientUnits="objectBoundingBox" gradientTransform="matrix(1 0 0 1 0 0)"  x1="0" y1="10" x2="100" y2="200">\n<stop offset="0%" style="stop-color:rgba(255,0,0,0);"/>\n<stop offset="100%" style="stop-color:green;"/>\n</linearGradient>\n';
+  '<linearGradient id="SVGID" gradientUnits="objectBoundingBox" gradientTransform="matrix(1 0 0 1 0 0)"  x1="0" y1="10" x2="100" y2="200">\n<stop offset="0%" style="stop-color:rgba(255,0,0,0);"/>\n<stop offset="100%" style="stop-color:green;"/>\n</linearGradient>\n';
 const SVG_RADIAL_PERCENTAGE =
-  '<radialGradient id="SVGID_0" gradientUnits="objectBoundingBox" gradientTransform="matrix(1 0 0 1 0 0)"  cx="100" cy="200" r="50" fx="0" fy="10">\n<stop offset="0%" style="stop-color:red;"/>\n<stop offset="100%" style="stop-color:rgba(0,255,0,0);"/>\n</radialGradient>\n';
+  '<radialGradient id="SVGID" gradientUnits="objectBoundingBox" gradientTransform="matrix(1 0 0 1 0 0)"  cx="100" cy="200" r="50" fx="0" fy="10">\n<stop offset="0%" style="stop-color:red;"/>\n<stop offset="100%" style="stop-color:rgba(0,255,0,0);"/>\n</radialGradient>\n';
 
 describe('Gradient', () => {
   function fromElement(
@@ -149,30 +149,73 @@ describe('Gradient', () => {
     test('toSVG linear', () => {
       const gradient = createLinearGradient();
       const baseObj = new FabricObject({ width: 100, height: 100 });
-      expect(gradient.toSVG(baseObj)).toEqual(SVG_LINEAR);
+      expect(gradient.toSVG(baseObj)).toEqualSVG(SVG_LINEAR);
     });
 
     test('toSVG radial', () => {
       const gradient = createRadialGradient();
       const baseObj = new FabricObject({ width: 100, height: 100 });
-      expect(gradient.toSVG(baseObj)).toEqual(SVG_RADIAL);
+      expect(gradient.toSVG(baseObj)).toEqualSVG(SVG_RADIAL);
+    });
+
+    test('toSVG linear sanitizes coord injection', () => {
+      const gradient = new Gradient({
+        type: 'linear',
+        coords: {
+          x1: '0" /><script>alert(1)</script>' as unknown as number,
+          y1: '0" /><script>alert(1)</script>' as unknown as number,
+          x2: '0" /><script>alert(1)</script>' as unknown as number,
+          y2: '0" /><script>alert(1)</script>' as unknown as number,
+        },
+        colorStops: [
+          { offset: 0, color: 'rgba(255,0,0,0)' },
+          { offset: 1, color: 'green' },
+        ],
+      });
+      const baseObj = new FabricObject({ width: 100, height: 100 });
+      const svg = gradient.toSVG(baseObj);
+      expect(svg).not.toContain('<script>');
+    });
+
+    test('toSVG radial sanitizes coord injection', () => {
+      const gradient = new Gradient({
+        type: 'radial',
+        coords: {
+          x1: '0" /><script>alert(1)</script>' as unknown as number,
+          y1: '0" /><script>alert(1)</script>' as unknown as number,
+          x2: '0" /><script>alert(1)</script>' as unknown as number,
+          y2: '0" /><script>alert(1)</script>' as unknown as number,
+          r1: '0" /><script>alert(1)</script>' as unknown as number,
+          r2: '50" /><script>alert(1)</script>' as unknown as number,
+        },
+        colorStops: [
+          { offset: 0, color: 'red' },
+          { offset: 1, color: 'rgba(0,255,0,0)' },
+        ],
+      });
+      const baseObj = new FabricObject({ width: 100, height: 100 });
+      const svg = gradient.toSVG(baseObj);
+      expect(svg).not.toContain('<script>');
     });
 
     test('toSVG radial with r1 > 0', () => {
       const gradient = createRadialGradientWithInternalRadius();
       const obj = new FabricObject({ width: 100, height: 100 });
-      expect(gradient.toSVG(obj)).toEqual(SVG_INTERNALRADIUS);
+      expect(gradient.toSVG(obj)).toEqualSVG(SVG_INTERNALRADIUS);
     });
 
     test('toSVG radial with r1 > 0 swapped', () => {
       const gradient = createRadialGradientSwapped();
       const obj = new FabricObject({ width: 100, height: 100 });
       const gradientColorStops = JSON.stringify(gradient.colorStops);
-      expect(gradient.toSVG(obj), 'it exports as expected').toBe(SVG_SWAPPED);
-      const gradientColorStopsAfterExport = JSON.stringify(gradient.colorStops);
-      expect(gradient.toSVG(obj), 'it exports as expected a second time').toBe(
+      expect(gradient.toSVG(obj), 'it exports as expected').toEqualSVG(
         SVG_SWAPPED,
       );
+      const gradientColorStopsAfterExport = JSON.stringify(gradient.colorStops);
+      expect(
+        gradient.toSVG(obj),
+        'it exports as expected a second time',
+      ).toEqualSVG(SVG_SWAPPED);
       expect(gradientColorStops, 'colorstops do not change').toBe(
         gradientColorStopsAfterExport,
       );
@@ -181,13 +224,13 @@ describe('Gradient', () => {
     test('toSVG linear objectBoundingBox', () => {
       const gradient = createLinearGradient('percentage');
       const obj = new FabricObject({ width: 100, height: 100 });
-      expect(gradient.toSVG(obj)).toBe(SVG_LINEAR_PERCENTAGE);
+      expect(gradient.toSVG(obj)).toEqualSVG(SVG_LINEAR_PERCENTAGE);
     });
 
     test('toSVG radial objectBoundingBox', () => {
       const gradient = createRadialGradient('percentage');
       const obj = new FabricObject({ width: 100, height: 100 });
-      expect(gradient.toSVG(obj)).toBe(SVG_RADIAL_PERCENTAGE);
+      expect(gradient.toSVG(obj)).toEqualSVG(SVG_RADIAL_PERCENTAGE);
     });
   });
 
@@ -235,8 +278,8 @@ describe('Gradient', () => {
 
   test('toObject with custom props', () => {
     const gradient = createLinearGradient('pixels', 'myId');
-    const object = gradient.toObject(['id']);
-    expect(object.id).toBe('myId_0');
+    const object = gradient.toObject(['id']) as { id: string };
+    expect(object.id).toMatch(/^myId_\d+$/);
   });
 
   test('toObject radialGradient', () => {
@@ -535,23 +578,25 @@ describe('Gradient', () => {
     let object = new FabricObject({ width: 200, height: 200 });
     let gradient = fromElement(element, object, { opacity: '' });
     it('should not change with width height', () => {
-      expect(gradient.coords.x1).toEqual(0.3);
-      expect(gradient.coords.y1).toEqual(0.2);
-      expect(gradient.coords.x2).toEqual(0.1);
-      expect(gradient.coords.y2).toEqual(1);
-      expect(gradient.coords.r1).toEqual(0);
-      expect(gradient.coords.r2).toEqual(1);
+      const coords = gradient.coords as RadialGradientCoords<number>;
+      expect(coords.x1).toEqual(0.3);
+      expect(coords.y1).toEqual(0.2);
+      expect(coords.x2).toEqual(0.1);
+      expect(coords.y2).toEqual(1);
+      expect(coords.r1).toEqual(0);
+      expect(coords.r2).toEqual(1);
     });
 
     it('should not change with top left', () => {
       object = new FabricObject({ width: 200, height: 200, top: 10, left: 10 });
       gradient = fromElement(element, object, { opacity: '' });
-      expect(gradient.coords.x1).toEqual(0.3);
-      expect(gradient.coords.y1).toEqual(0.2);
-      expect(gradient.coords.x2).toEqual(0.1);
-      expect(gradient.coords.y2).toEqual(1);
-      expect(gradient.coords.r1).toEqual(0);
-      expect(gradient.coords.r2).toEqual(1);
+      const coords = gradient.coords as RadialGradientCoords<number>;
+      expect(coords.x1).toEqual(0.3);
+      expect(coords.y1).toEqual(0.2);
+      expect(coords.x2).toEqual(0.1);
+      expect(coords.y2).toEqual(1);
+      expect(coords.r1).toEqual(0);
+      expect(coords.r2).toEqual(1);
     });
   });
 
@@ -572,12 +617,13 @@ describe('Gradient', () => {
     it('should not change with width height', () => {
       const object = new FabricObject({ width: 200, height: 200 });
       const gradient = fromElement(element, object, { opacity: '' });
-      expect(gradient.coords.x1).toEqual(30);
-      expect(gradient.coords.y1).toEqual(20);
-      expect(gradient.coords.x2).toEqual(15);
-      expect(gradient.coords.y2).toEqual(18);
-      expect(gradient.coords.r1).toEqual(0);
-      expect(gradient.coords.r2).toEqual(100);
+      const coords = gradient.coords as RadialGradientCoords<number>;
+      expect(coords.x1).toEqual(30);
+      expect(coords.y1).toEqual(20);
+      expect(coords.x2).toEqual(15);
+      expect(coords.y2).toEqual(18);
+      expect(coords.r1).toEqual(0);
+      expect(coords.r2).toEqual(100);
     });
 
     it('should not change with top left', () => {
@@ -588,12 +634,13 @@ describe('Gradient', () => {
         left: 60,
       });
       const gradient = fromElement(element, object, { opacity: '' });
-      expect(gradient.coords.x1).toEqual(30);
-      expect(gradient.coords.y1).toEqual(20);
-      expect(gradient.coords.x2).toEqual(15);
-      expect(gradient.coords.y2).toEqual(18);
-      expect(gradient.coords.r1).toEqual(0);
-      expect(gradient.coords.r2).toEqual(100);
+      const coords = gradient.coords as RadialGradientCoords<number>;
+      expect(coords.x1).toEqual(30);
+      expect(coords.y1).toEqual(20);
+      expect(coords.x2).toEqual(15);
+      expect(coords.y2).toEqual(18);
+      expect(coords.r1).toEqual(0);
+      expect(coords.r2).toEqual(100);
     });
   });
 
@@ -818,4 +865,12 @@ describe('Gradient', () => {
     expect(gradient.colorStops[2].color).toEqual('rgba(0,0,0,1)');
     expect(gradient.colorStops[3].color).toEqual('rgba(0,0,0,1)');
   });
+
+  describe('Attrivbute injection', () => {
+    it('id injection', () => {
+      const gradient = new Gradient({ id: 'malicious"><script>' });
+      const svg = gradient.toSVG({} as any);
+      expect(svg).toContain('id="SVGID_malicious&quot;&gt;&lt;script&gt;');
+    });
+  });
 });

package/src/gradient/Gradient.ts

@@ -20,6 +20,7 @@ import type {
 } from './typedefs';
 import { classRegistry } from '../ClassRegistry';
 import { isPath } from '../util/typeAssertions';
+import { escapeXml } from '../util/lang_string';
 
 /**
  * Gradient class
@@ -209,7 +210,7 @@ export class Gradient<
     transform[5] -= offsetY;
 
     const commonAttributes = [
-      `id="SVGID_${this.id}"`,
+      `id="SVGID_${escapeXml(String(this.id))}"`,
       `gradientUnits="${gradientUnits}"`,
       `gradientTransform="${
         preTransform ? preTransform + ' ' : ''
@@ -217,39 +218,51 @@ export class Gradient<
       '',
     ].join(' ');
 
+    const sanitizeCoord = (value: unknown) => parseFloat(String(value));
+
     if (this.type === 'linear') {
       const { x1, y1, x2, y2 } = this.coords;
+      const sx1 = sanitizeCoord(x1);
+      const sy1 = sanitizeCoord(y1);
+      const sx2 = sanitizeCoord(x2);
+      const sy2 = sanitizeCoord(y2);
       markup.push(
         '<linearGradient ',
         commonAttributes,
         ' x1="',
-        x1,
+        sx1,
         '" y1="',
-        y1,
+        sy1,
         '" x2="',
-        x2,
+        sx2,
         '" y2="',
-        y2,
+        sy2,
         '">\n',
       );
     } else if (this.type === 'radial') {
       const { x1, y1, x2, y2, r1, r2 } = this
         .coords as GradientCoords<'radial'>;
-      const needsSwap = r1 > r2;
+      const sx1 = sanitizeCoord(x1);
+      const sy1 = sanitizeCoord(y1);
+      const sx2 = sanitizeCoord(x2);
+      const sy2 = sanitizeCoord(y2);
+      const sr1 = sanitizeCoord(r1);
+      const sr2 = sanitizeCoord(r2);
+      const needsSwap = sr1 > sr2;
       // svg radial gradient has just 1 radius. the biggest.
       markup.push(
         '<radialGradient ',
         commonAttributes,
         ' cx="',
-        needsSwap ? x1 : x2,
+        needsSwap ? sx1 : sx2,
         '" cy="',
-        needsSwap ? y1 : y2,
+        needsSwap ? sy1 : sy2,
         '" r="',
-        needsSwap ? r1 : r2,
+        needsSwap ? sr1 : sr2,
         '" fx="',
-        needsSwap ? x2 : x1,
+        needsSwap ? sx2 : sx1,
         '" fy="',
-        needsSwap ? y2 : y1,
+        needsSwap ? sy2 : sy1,
         '">\n',
       );
       if (needsSwap) {
@@ -259,17 +272,17 @@ export class Gradient<
           colorStop.offset = 1 - colorStop.offset;
         });
       }
-      const minRadius = Math.min(r1, r2);
+      const minRadius = Math.min(sr1, sr2);
       if (minRadius > 0) {
         // i have to shift all colorStops and add new one in 0.
-        const maxRadius = Math.max(r1, r2),
+        const maxRadius = Math.max(sr1, sr2),
           percentageShift = minRadius / maxRadius;
         colorStops.forEach((colorStop) => {
           colorStop.offset += percentageShift * (1 - colorStop.offset);
         });
       }
     }
-
+    // todo make a malicious script tag injection test with color and also apply a fix with escapeXml
     colorStops.forEach(({ color, offset }) => {
       markup.push(
         `<stop offset="${offset * 100}%" style="stop-color:${color};"/>\n`,

package/src/shapes/Circle.spec.ts

@@ -2,6 +2,14 @@ import { describe, expect, it } from 'vitest';
 import { Circle } from './Circle';
 import { FabricObject } from './Object/FabricObject';
 import { getFabricDocument, version } from '../../fabric';
+import { createReferenceObject } from '../../test/utils';
+
+const REFERENCE_CIRCLE = createReferenceObject('Circle', {
+  radius: 0,
+  startAngle: 0,
+  endAngle: 360,
+  counterClockwise: false,
+});
 
 describe('Circle', () => {
   it('constructor', () => {
@@ -86,52 +94,15 @@ describe('Circle', () => {
 
   it('toObject', () => {
     const circle = new Circle();
-    const defaultProperties = {
-      version: version,
-      type: 'Circle',
-      originX: 'center',
-      originY: 'center',
-      left: 0,
-      top: 0,
-      width: 0,
-      height: 0,
-      fill: 'rgb(0,0,0)',
-      stroke: null,
-      strokeWidth: 1,
-      strokeDashArray: null,
-      strokeLineCap: 'butt',
-      strokeDashOffset: 0,
-      strokeLineJoin: 'miter',
-      strokeMiterLimit: 4,
-      scaleX: 1,
-      scaleY: 1,
-      angle: 0,
-      flipX: false,
-      flipY: false,
-      opacity: 1,
-      shadow: null,
-      visible: true,
-      backgroundColor: '',
-      fillRule: 'nonzero',
-      paintFirst: 'fill',
-      globalCompositeOperation: 'source-over',
-      radius: 0,
-      startAngle: 0,
-      endAngle: 360,
-      counterClockwise: false,
-      skewX: 0,
-      skewY: 0,
-      strokeUniform: false,
-    };
     expect(circle.toObject).toBeTypeOf('function');
-    expect(circle.toObject()).toStrictEqual(defaultProperties);
+    expect(circle.toObject()).toStrictEqual(REFERENCE_CIRCLE);
 
     circle.set('left', 100);
     circle.set('top', 200);
     circle.set('radius', 15);
 
     expect(circle.toObject()).toStrictEqual({
-      ...defaultProperties,
+      ...REFERENCE_CIRCLE,
       left: 100,
       top: 200,
       width: 30,

package/src/shapes/Circle.ts

@@ -10,6 +10,7 @@ import type { Abortable, TClassProperties, TOptions } from '../typedefs';
 import type { FabricObjectProps, SerializedObjectProps } from './Object/types';
 import type { CSSRules } from '../parser/typedefs';
 import { SCALE_X, SCALE_Y } from '../constants';
+import { escapeXml } from '../util/lang_string';
 
 interface UniqueCircleProps {
   /**
@@ -43,8 +44,7 @@ interface UniqueCircleProps {
 }
 
 export interface SerializedCircleProps
-  extends SerializedObjectProps,
-    UniqueCircleProps {}
+  extends SerializedObjectProps, UniqueCircleProps {}
 
 export interface CircleProps extends FabricObjectProps, UniqueCircleProps {}
 
@@ -63,10 +63,10 @@ export const circleDefaultValues: Partial<TClassProperties<Circle>> = {
 };
 
 export class Circle<
-    Props extends TOptions<CircleProps> = Partial<CircleProps>,
-    SProps extends SerializedCircleProps = SerializedCircleProps,
-    EventSpec extends ObjectEvents = ObjectEvents,
-  >
+  Props extends TOptions<CircleProps> = Partial<CircleProps>,
+  SProps extends SerializedCircleProps = SerializedCircleProps,
+  EventSpec extends ObjectEvents = ObjectEvents,
+>
   extends FabricObject<Props, SProps, EventSpec>
   implements UniqueCircleProps
 {
@@ -174,7 +174,8 @@ export class Circle<
    * of the instance
    */
   _toSVG(): string[] {
-    const angle = (this.endAngle - this.startAngle) % 360;
+    const { radius, startAngle, endAngle } = this;
+    const angle = (endAngle - startAngle) % 360;
 
     if (angle === 0) {
       return [
@@ -182,13 +183,12 @@ export class Circle<
         'COMMON_PARTS',
         'cx="0" cy="0" ',
         'r="',
-        `${this.radius}`,
+        `${escapeXml(radius)}`,
         '" />\n',
       ];
     } else {
-      const { radius } = this;
-      const start = degreesToRadians(this.startAngle),
-        end = degreesToRadians(this.endAngle),
+      const start = degreesToRadians(startAngle),
+        end = degreesToRadians(endAngle),
         startX = cos(start) * radius,
         startY = sin(start) * radius,
         endX = cos(end) * radius,

package/src/shapes/Ellipse.spec.ts

@@ -3,6 +3,12 @@ import { Ellipse } from './Ellipse';
 import { FabricObject } from './Object/Object';
 import { getFabricDocument, version } from '../../fabric';
 import { sanitizeSVG } from '../../vitest.extend';
+import { createReferenceObject } from '../../test/utils';
+
+const REFERENCE_ELLIPSE = createReferenceObject('Ellipse', {
+  rx: 0,
+  ry: 0,
+});
 
 describe('Ellipse', () => {
   it('initializes constructor correctly', () => {
@@ -24,43 +30,8 @@ describe('Ellipse', () => {
 
   it('converts to object with correct properties', () => {
     const ellipse = new Ellipse();
-    const defaultProperties = {
-      version: version,
-      type: 'Ellipse',
-      originX: 'center',
-      originY: 'center',
-      left: 0,
-      top: 0,
-      width: 0,
-      height: 0,
-      fill: 'rgb(0,0,0)',
-      stroke: null,
-      strokeWidth: 1,
-      strokeDashArray: null,
-      strokeLineCap: 'butt',
-      strokeDashOffset: 0,
-      strokeLineJoin: 'miter',
-      strokeMiterLimit: 4,
-      scaleX: 1,
-      scaleY: 1,
-      angle: 0,
-      flipX: false,
-      flipY: false,
-      opacity: 1,
-      skewX: 0,
-      skewY: 0,
-      rx: 0,
-      ry: 0,
-      shadow: null,
-      visible: true,
-      backgroundColor: '',
-      fillRule: 'nonzero',
-      paintFirst: 'fill',
-      globalCompositeOperation: 'source-over',
-      strokeUniform: false,
-    };
     expect(ellipse.toObject).toBeTypeOf('function');
-    expect(ellipse.toObject()).toEqual(defaultProperties);
+    expect(ellipse.toObject()).toEqual(REFERENCE_ELLIPSE);
 
     ellipse.set('left', 100);
     ellipse.set('top', 200);
@@ -68,7 +39,7 @@ describe('Ellipse', () => {
     ellipse.set('ry', 25);
 
     expect(ellipse.toObject()).toEqual({
-      ...defaultProperties,
+      ...REFERENCE_ELLIPSE,
       left: 100,
       top: 200,
       rx: 15,

package/src/shapes/Ellipse.ts

@@ -7,6 +7,7 @@ import { FabricObject, cacheProperties } from './Object/FabricObject';
 import type { FabricObjectProps, SerializedObjectProps } from './Object/types';
 import type { ObjectEvents } from '../EventTypeDefs';
 import type { CSSRules } from '../parser/typedefs';
+import { escapeXml } from '../util/lang_string';
 
 export const ellipseDefaultValues: Partial<TClassProperties<Ellipse>> = {
   rx: 0,
@@ -19,18 +20,17 @@ interface UniqueEllipseProps {
 }
 
 export interface SerializedEllipseProps
-  extends SerializedObjectProps,
-    UniqueEllipseProps {}
+  extends SerializedObjectProps, UniqueEllipseProps {}
 
 export interface EllipseProps extends FabricObjectProps, UniqueEllipseProps {}
 
 const ELLIPSE_PROPS = ['rx', 'ry'] as const;
 
 export class Ellipse<
-    Props extends TOptions<EllipseProps> = Partial<EllipseProps>,
-    SProps extends SerializedEllipseProps = SerializedEllipseProps,
-    EventSpec extends ObjectEvents = ObjectEvents,
-  >
+  Props extends TOptions<EllipseProps> = Partial<EllipseProps>,
+  SProps extends SerializedEllipseProps = SerializedEllipseProps,
+  EventSpec extends ObjectEvents = ObjectEvents,
+>
   extends FabricObject<Props, SProps, EventSpec>
   implements EllipseProps
 {
@@ -128,7 +128,7 @@ export class Ellipse<
     return [
       '<ellipse ',
       'COMMON_PARTS',
-      `cx="0" cy="0" rx="${this.rx}" ry="${this.ry}" />\n`,
+      `cx="0" cy="0" rx="${escapeXml(this.rx)}" ry="${escapeXml(this.ry)}" />\n`,
     ];
   }
 

package/src/shapes/Group.ts

@@ -35,6 +35,7 @@ import {
 import type { SerializedLayoutManager } from '../LayoutManager/LayoutManager';
 import type { FitContentLayout } from '../LayoutManager';
 import type { DrawContext } from './Object/Object';
+import { escapeXml } from '../util/lang_string';
 
 /**
  * This class handles the specific case of creating a group using {@link Group#fromObject} and is not meant to be used in any other case.
@@ -57,8 +58,7 @@ export interface GroupOwnProps {
 }
 
 export interface SerializedGroupProps
-  extends SerializedObjectProps,
-    GroupOwnProps {
+  extends SerializedObjectProps, GroupOwnProps {
   objects: SerializedObjectProps[];
   layoutManager: SerializedLayoutManager;
 }
@@ -650,7 +650,7 @@ export class Group
   getSvgStyles(): string {
     const opacity =
         typeof this.opacity !== 'undefined' && this.opacity !== 1
-          ? `opacity: ${this.opacity};`
+          ? `opacity: ${escapeXml(this.opacity)};`
           : '',
       visibility = this.visible ? '' : ' visibility: hidden;';
     return [opacity, this.getSvgFilter(), visibility].join('');