Prevents XSS when viewing an uploaded SVG

Migaroez · Zeegaan · commit 35c51a029a16 · 2024-10-21T12:42:06.000+02:00
from the media-info and image-preview components.
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/media/umbmedianodeinfo.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/media/umbmedianodeinfo.directive.js
@@ -69,15 +69,7 @@
                 editorService.mediaTypeEditor(editor);
             };
 
-            scope.openSVG = () => {
-                var popup = window.open('', '_blank');
-                var html = '<!DOCTYPE html><body><img src="' + scope.nodeUrl + '"/>' +
-                    '<script>history.pushState(null, null,"' + $location.$$absUrl + '");</script></body>';
-                
-                popup.document.open();
-                popup.document.write(html);
-                popup.document.close();
-            }
+          scope.openSVG = () => mediaHelper.openSVG(scope.nodeUrl);
 
             // watch for content updates - reload content when node is saved, published etc.
             scope.$watch('node.updateDate', function(newValue, oldValue){
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/mediahelper.service.js b/src/Umbraco.Web.UI.Client/src/common/services/mediahelper.service.js
@@ -3,7 +3,7 @@
 * @name umbraco.services.mediaHelper
 * @description A helper object used for dealing with media items
 **/
-function mediaHelper(umbRequestHelper, $http, $log) {
+function mediaHelper(umbRequestHelper, $http, $log, $location) {
 
     //container of fileresolvers
     var _mediaFileResolvers = {};
@@ -449,7 +449,29 @@ function mediaHelper(umbRequestHelper, $http, $log) {
                             cropY2: options.crop ? options.crop.y2 : null
                         })),
                 "Failed to retrieve processed image URL for image: " + imagePath);
-        }
+      },
+
+      /**
+        * @ngdoc function
+        * @name umbraco.services.mediaHelper#openSVG
+        * @methodOf umbraco.services.mediaHelper
+        * @function
+        *
+        * @description
+        * Opens an SVG file in a new window as an image file, to prevent any potential XSS exploits.
+        *
+        * @param {string} imagePath File path, ex /media/1234/my-image.svg
+        */
+      openSVG: function (imagePath) {
+        var popup = window.open('', '_blank');
+        var html = '<!DOCTYPE html><body style="background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%); background-size:30px 30px; background-position:0 0, 15px 0, 15px -15px, 0px 15px;">'
+          + '<img src="' + imagePath + '"/>'
+          + '<script>history.pushState(null, null,"' + $location.$$absUrl + '");</script></body>';
+
+        popup.document.open();
+        popup.document.write(html);
+        popup.document.close();
+      }
 
     };
 } angular.module('umbraco.services').factory('mediaHelper', mediaHelper);
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/media/umbimagepreview/umb-image-preview.html b/src/Umbraco.Web.UI.Client/src/views/components/media/umbimagepreview/umb-image-preview.html
@@ -1,6 +1,6 @@
 <div class="umb-image-preview" ng-controller="umbImagePreviewController as controller">
     <img class="umb-image-preview--image" ng-if="vm.clientSide" ng-init="previewUrl = controller.getClientSideUrl(vm.clientSideData)" ng-src="{{previewUrl}}" alt="{{vm.name}}" />
-    <a ng-if="!vm.clientSide" href="#" ng-href="{{vm.source}}" target="_blank" rel="noopener">
+    <a ng-if="!vm.clientSide" href="" ng-attr-href="{{vm.extension !== 'svg' ? vm.source : undefined}}" ng-click="vm.extension === 'svg' && controller.openSVG(vm.source)" target="_blank" rel="noopener">
         <img class="umb-image-preview--image" ng-init="previewUrl = controller.getThumbnail(vm.source)" ng-src="{{previewUrl}}" alt="{{vm.name}}" />
     </a>
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/media/umbimagepreview/umbimagepreview.controller.js b/src/Umbraco.Web.UI.Client/src/views/components/media/umbimagepreview/umbimagepreview.controller.js
@@ -1,18 +1,16 @@
-
-
-
-
 angular.module("umbraco")
-    .controller("umbImagePreviewController",
-        function (mediaHelper) {
+  .controller("umbImagePreviewController",
+    function (mediaHelper) {
+
+      var vm = this;
 
-            var vm = this;
+      vm.getThumbnail = function (source) {
+        return mediaHelper.getThumbnailFromPath(source) || source;
+      }
 
-            vm.getThumbnail = function(source) {
-                return mediaHelper.getThumbnailFromPath(source) || source;
-            }
-            vm.getClientSideUrl = function(sourceData) {
-                return URL.createObjectURL(sourceData);
-            }
+      vm.getClientSideUrl = function (sourceData) {
+        return URL.createObjectURL(sourceData);
+      }
 
-        });
+      vm.openSVG = (source) => mediaHelper.openSVG(source);
+    });
