FORMS-15852 xss security fix for svg upload in file attachment

ui.frontend/src/view/FormFileInputWidgetBase.js

@@ -14,8 +14,6 @@
  * limitations under the License.
  ******************************************************************************/
 
-import FormField from "./FormField"
-import FormFieldBase from "./FormFieldBase"
 
 /**
  * This class is responsible for interacting with the file input widget. It implements the file preview,
@@ -126,13 +124,25 @@ class FormFileInputWidgetBase {
             return index;
         }
 
+        static displaySVG(objectUrl) {
+            const url = objectUrl;
+            const img = document.createElement('img');
+            img.src = url;
+            const newTab = window.open('', '_blank', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');
+            newTab?.document?.body.appendChild(img);
+        }
+
         static previewFileUsingObjectUrl(file) {
             if (file) {
                 if (window.navigator && window.navigator.msSaveOrOpenBlob) { // for IE
                     window.navigator.msSaveOrOpenBlob(file, file.name);
                 } else {
                     let url = window.URL.createObjectURL(file);
-                    window.open(url, '', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');
+                    if (file.type === 'image/svg+xml') {
+                        this.displaySVG(url)
+                     } else {
+                        window.open(url, '', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');
+                     }
                     return url;
                 }
             }
@@ -149,7 +159,6 @@ class FormFileInputWidgetBase {
             }
             // this would work for dataURl or normal URL
             window.open(url, '', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');
-
         }
         // this function maintains a map for
         handleFilePreview (event){

ui.tests/test-module/libs/support/commands.js

@@ -41,8 +41,8 @@
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
 
 
-import { recurse } from 'cypress-recurse';
 import 'cypress-plugin-snapshots/commands';
+import { recurse } from 'cypress-recurse';
 
 const commons = require('../commons/commons'),
     siteSelectors = require('../commons/sitesSelectors'),
@@ -768,6 +768,7 @@ const mimeTypes = {
     'txt': 'text/plain',
     'bat': 'application/x-msdos-program',
     'msg': 'application/vnd.ms-outlook',
+    'svg': 'image/svg+xml',
     // Add more mappings as needed
 };
 

ui.tests/test-module/specs/fileinput/fileinputv2.runtime.cy.js

@@ -229,6 +229,22 @@ describe("Form with File Input V-2 - Basic Tests", () => {
     //     cy.get('.cmp-adaptiveform-fileinput__filelist').eq(0).children().should('have.length', 0);
     })
 
+    it("check SVG upload and preview functionality", () => {
+        let sampleFileNames = ['sample.svg'];
+        const fileInput = "input[name='fileinput1']";
+
+        cy.attachFile(fileInput, [sampleFileNames[0]]);
+
+        checkFilePreviewInFileAttachment(fileInput);
+
+        cy.get('.cmp-adaptiveform-fileinput__filelist')
+            .children()
+            .should('have.length', 1)
+            .and('contain.text', sampleFileNames[0]);
+
+        deleteSelectedFiles(fileInput, [sampleFileNames[0]]);
+    });
+
     it(`fielinput is disabled when readonly property is true`, () => {
         const fileInput5 =  "input[name='fileinput5']";
         cy.get(fileInput5).should("have.attr", "disabled", "disabled");