fix: Security removal dependency svg-prep (parse-community#3236)

Author: mtrezza

package-lock.json

@@ -122,7 +122,6 @@
     "semantic-release": "25.0.3",
     "semver": "7.7.4",
     "style-loader": "3.3.1",
-    "svg-prep": "1.0.4",
     "typescript": "5.9.3",
     "webpack": "5.105.1",
     "webpack-cli": "6.0.1",

package.json

@@ -9,10 +9,57 @@
 
 const fs = require('fs');
 const path = require('path');
-const SvgPrep = require('svg-prep');
 const { Compilation, sources } = require('webpack');
 const { RawSource } = sources;
 
+/**
+ * Builds an SVG sprite from individual SVG files. Each SVG becomes a
+ * <symbol> element identified by its filename (without extension).
+ */
+function buildSvgSprite(files) {
+  const symbols = files.map(file => {
+    const name = path.basename(file, '.svg');
+    const svg = fs.readFileSync(file, 'utf-8');
+
+    // Extract viewBox from the root <svg> element
+    const viewBoxMatch = svg.match(/viewBox="([^"]*)"/);
+    const viewBox = viewBoxMatch ? viewBoxMatch[1] : '0 0 100 100';
+
+    // Extract inner content between <svg ...> and </svg>
+    const innerMatch = svg.match(/<svg[^>]*>([\s\S]*)<\/svg>/);
+    const inner = innerMatch ? innerMatch[1] : '';
+
+    // Strip elements that are unnecessary or potential XSS vectors
+    // Remove attributes that interfere with sprite styling or pose security risks
+    const cleaned = inner
+      .replace(/<style[\s\S]*?<\/style>/gi, '')
+      .replace(/<defs[\s\S]*?<\/defs>/gi, '')
+      .replace(/<title[\s\S]*?<\/title>/gi, '')
+      .replace(/<desc[\s\S]*?<\/desc>/gi, '')
+      .replace(/<script[\s\S]*?<\/script>/gi, '')
+      .replace(/<!--[\s\S]*?-->/g, '')
+      .replace(/\s+id="[^"]*"/g, '')
+      .replace(/\s+fill="[^"]*"/g, '')
+      .replace(/\s+class="[^"]*"/g, '')
+      .replace(/\s+style="[^"]*"/g, '')
+      .replace(/\s+stroke="[^"]*"/g, '')
+      .replace(/\s+stroke-[a-z]+="[^"]*"/g, '')
+      .replace(/\s+on[a-zA-Z]+="[^"]*"/g, '')
+      .replace(/\s+on[a-zA-Z]+='[^']*'/g, '')
+      .replace(/\s+href="[^"]*"/g, '')
+      .replace(/\s+xlink:href="[^"]*"/g, '');
+
+    return `  <symbol id="${name}" viewBox="${viewBox}">\n    ${cleaned.trim()}\n  </symbol>`;
+  });
+
+  return [
+    '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>',
+    '<svg id="sprites" xmlns="http://www.w3.org/2000/svg" style="display:none">',
+    symbols.join('\n'),
+    '</svg>',
+  ].join('\n');
+}
+
 function SvgPrepPlugin(options) {
   this.options = {};
   Object.assign(
@@ -33,17 +80,16 @@ SvgPrepPlugin.prototype.apply = function (compiler) {
       },
       async () => {
         if (!this.options.source) {
-          return Promise.resolve();
+          return;
         }
 
-        // TODO: Keep track of file hashes, so we can avoid recompiling when none have changed
         const files = fs
           .readdirSync(this.options.source)
           .filter(name => name.endsWith('.svg'))
+          .sort()
           .map(name => path.join(this.options.source, name));
 
-        const sprited = await SvgPrep(files).filter({ removeIds: true, noFill: true }).output();
-
+        const sprited = buildSvgSprite(files);
         compilation.emitAsset(this.options.output, new RawSource(sprited));
       }
     );