Merge pull request #251 from KManolov3/feat/uepr-238-sanitize-svgs-on-open

Feat/uepr 238 sanitize svgs on open

Author: KManolov3

packages/scratch-svg-renderer/src/load-svg-string.js

@@ -1,8 +1,7 @@
-const DOMPurify = require('isomorphic-dompurify');
 const SvgElement = require('./svg-element');
 const convertFonts = require('./font-converter');
-const fixupSvgString = require('./fixup-svg-string');
 const transformStrokeWidths = require('./transform-applier');
+const {sanitizeSvgText} = require('./sanitize-svg');
 
 /**
  * @param {SVGElement} svgTag the tag to search within
@@ -208,24 +207,10 @@ const transformMeasurements = svgTag => {
     // which returns the full bounding-box of all drawn SVG
     // elements, similar to how Scratch 2.0 did measurement.
     const svgSpot = document.createElement('span');
-    // Since we're adding user-provided SVG to document.body,
-    // sanitizing is required. This should not affect bounding box calculation.
-    // outerHTML is attribute of Element (and not HTMLElement), so use it instead of
-    // calling serializer or toString()
-    // NOTE: svgTag remains untouched!
-    const rawValue = svgTag.outerHTML;
-    const sanitizedValue = DOMPurify.sanitize(rawValue, {
-        // Use SVG profile (no HTML elements)
-        USE_PROFILES: {svg: true},
-        // Remove some tags that Scratch does not use.
-        FORBID_TAGS: ['a', 'audio', 'canvas', 'video'],
-        // Allow data URI in image tags (e.g. SVGs converted from bitmap)
-        ADD_DATA_URI_TAGS: ['image']
-    });
     let bbox;
     try {
         // Insert sanitized value.
-        svgSpot.innerHTML = sanitizedValue;
+        svgSpot.innerHTML = svgTag.outerHTML;
         document.body.appendChild(svgSpot);
         // Take the bounding box. We have to get elements via svgSpot
         // because we added it via innerHTML.
@@ -320,8 +305,11 @@ const normalizeSvg = (svgTag, fromVersion2) => {
 const loadSvgString = (svgString, fromVersion2) => {
     // Parse string into SVG XML.
     const parser = new DOMParser();
-    svgString = fixupSvgString(svgString);
-    const svgDom = parser.parseFromString(svgString, 'text/xml');
+
+    // Since we're adding user-provided SVG to document.body as part of normalization,
+    // sanitization is required. This should not affect bounding box calculation.
+    const sanitizedSvgString = sanitizeSvgText(svgString);
+    const svgDom = parser.parseFromString(sanitizedSvgString, 'text/xml');
     if (svgDom.childNodes.length < 1 ||
         svgDom.documentElement.localName !== 'svg') {
         throw new Error('Document does not appear to be SVG.');

packages/scratch-svg-renderer/src/sanitize-svg.js

@@ -128,7 +128,10 @@ sanitizeSvg.sanitizeByteStream = function (rawData) {
  */
 sanitizeSvg.sanitizeSvgText = function (rawSvgText) {
     let sanitizedText = DOMPurify.sanitize(rawSvgText, {
-        USE_PROFILES: {svg: true}
+        USE_PROFILES: {svg: true},
+        FORBID_TAGS: ['a', 'audio', 'canvas', 'video'],
+        // Allow data URI in image tags (e.g. SVGs converted from bitmap)
+        ADD_DATA_URI_TAGS: ['image']
     });
 
     // Remove partial XML comment that is sometimes left in the HTML