fix(Gradient): escape colorStop colors in SVG export (backport GHSA-w22m to 6.x)

src/gradient/Gradient.spec.ts

@@ -567,4 +567,56 @@ describe('Gradient', () => {
     expect(gradient.colorStops[2].opacity).toEqual(1);
     expect(gradient.colorStops[3].opacity).toEqual(1);
   });
+
+  describe('toSVG colorStop sanitization (GHSA-w22m-hvvm-xmwx)', () => {
+    const exportObject = () => new FabricObject({ width: 100, height: 100 });
+
+    it('neutralizes HTML/attribute breakout in a stop color', () => {
+      const gradient = new Gradient({
+        type: 'linear',
+        colorStops: [
+          { offset: 0, color: 'red"><img src="x" onerror="alert(1)">' },
+        ],
+      });
+      const svg = gradient.toSVG(exportObject());
+      expect(svg).not.toContain('<img');
+      expect(svg).not.toContain('onerror=');
+      expect(svg).toContain('style="stop-color:rgba(0,0,0,1);"');
+    });
+
+    it('neutralizes CSS declaration injection in a stop color', () => {
+      const gradient = new Gradient({
+        type: 'linear',
+        colorStops: [{ offset: 0, color: 'red;stop-opacity:0' }],
+      });
+      const svg = gradient.toSVG(exportObject());
+      expect(svg).not.toContain('stop-opacity:0');
+      expect(svg).toContain('style="stop-color:rgba(0,0,0,1);"');
+    });
+
+    it('rejects url-based stop color payloads', () => {
+      const gradient = new Gradient({
+        type: 'linear',
+        colorStops: [{ offset: 0, color: 'url(javascript:alert(1))' }],
+      });
+      const svg = gradient.toSVG(exportObject());
+      expect(svg).not.toContain('javascript:');
+      expect(svg).toContain('style="stop-color:rgba(0,0,0,1);"');
+    });
+
+    it('preserves valid stop colors and escapes XML metacharacters', () => {
+      const gradient = new Gradient({
+        type: 'linear',
+        colorStops: [
+          { offset: 0, color: 'currentColor' },
+          { offset: 0.5, color: 'var(--brand)' },
+          { offset: 1, color: 'red&blue' },
+        ],
+      });
+      const svg = gradient.toSVG(exportObject());
+      expect(svg).toContain('style="stop-color:currentColor;"');
+      expect(svg).toContain('style="stop-color:var(--brand);"');
+      expect(svg).toContain('style="stop-color:red&amp;blue;"');
+    });
+  });
 });

src/gradient/Gradient.ts

@@ -3,7 +3,9 @@ import { iMatrix } from '../constants';
 import { parseTransformAttribute } from '../parser/parseTransformAttribute';
 import type { FabricObject } from '../shapes/Object/FabricObject';
 import type { TMat2D } from '../typedefs';
+import { isSafeSvgStyleValue } from '../util/internals/svgExportCheck';
 import { uid } from '../util/internals/uid';
+import { escapeXml } from '../util/lang_string';
 import { pick } from '../util/misc/pick';
 import { matrixToSVG } from '../util/misc/svgExport';
 import { linearDefaultCoords, radialDefaultCoords } from './constants';
@@ -271,12 +273,18 @@ export class Gradient<
     }
 
     colorStops.forEach(({ color, offset, opacity }) => {
+      const rawColor = String(color);
+      // `escapeXml` protects the SVG attribute, but the value is also embedded
+      // in a CSS declaration, so reject tokens that can break either context.
+      const serializedColor = isSafeSvgStyleValue(rawColor)
+        ? rawColor
+        : new Color(rawColor).toRgba();
       markup.push(
         '<stop ',
         'offset="',
         offset * 100 + '%',
         '" style="stop-color:',
-        color,
+        escapeXml(serializedColor),
         typeof opacity !== 'undefined' ? ';stop-opacity: ' + opacity : ';',
         '"/>\n',
       );

src/util/internals/svgExportCheck.ts

@@ -0,0 +1,9 @@
+const unsafeSvgStyleValueRegex = new RegExp(
+  String.raw`[\0-\x1F\x7F;<>\\]|\/\*|\*\/|url\s*\(|expression\s*\(|(?:java|vb)script\s*:|data\s*:|@import\b`,
+  'iu',
+);
+
+export const isSafeSvgStyleValue = (value: unknown): value is string =>
+  typeof value === 'string' &&
+  value.trim().length > 0 &&
+  !unsafeSvgStyleValueRegex.test(value);