ITISFoundation · odeimaiz · Oct 16, 2025 · Oct 16, 2025 · Oct 16, 2025 · Oct 16, 2025
@@ -30,7 +30,7 @@
       "jsondiffpatch/jsondiffpatch-0.7.3.min.js",
       "jsontreeviewer/jsonTree.js",
       "marked/marked.min.js",
-      "DOMPurify/purify.min.js"
+      "DOMPurify/purify-3.2.7.min.js"
     ],
     "css": [
       "jsontreeviewer/jsonTree.css",

@@ -61,7 +61,6 @@ qx.Class.define("osparc.dashboard.FolderButtonNew", {
           control = new qx.ui.basic.Label(this.tr("New folder")).set({
             anonymous: true,
             font: "text-14",
-            rich: true,
           });
           this._add(control, {
             ...osparc.dashboard.FolderButtonBase.POS.TITLE,

@@ -188,9 +188,10 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
           break;
         }
         case "title":
-          control = new qx.ui.basic.Label().set({
+          control = new osparc.ui.basic.SafeLabel().set({
             textColor: "contrasted-text-light",
             font: "text-14",
+            rich: false, // do not allow multi-line titles
           });
           layout = this.getChildControl("header");
           layout.add(control, this.self().HPOS.TITLE);
@@ -205,12 +206,11 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
           break;
         }
         case "subtitle-text": {
-          control = new qx.ui.basic.Label().set({
+          control = new osparc.ui.basic.SafeLabel().set({
             textColor: "contrasted-text-dark",
             alignY: "middle",
             allowGrowX: true,
             allowShrinkX: true,
-            rich: true,
             anonymous: true,
             font: "text-12",
             allowGrowY: false

@@ -62,11 +62,10 @@ qx.Class.define("osparc.dashboard.GridButtonTaskPlaceholder", {
       let layout;
       switch (id) {
         case "state-label": {
-          control = new qx.ui.basic.Label().set({
+          control = new osparc.ui.basic.SafeLabel().set({
             textColor: "contrasted-text-dark",
             allowGrowX: true,
             allowShrinkX: true,
-            rich: true,
             anonymous: true,
             font: "text-12",
             allowGrowY: true,

@@ -101,10 +101,12 @@ qx.Class.define("osparc.dashboard.GroupedCardContainer", {
             allowGrowX: false
           });
           control.getChildControl("icon").set(osparc.utils.Utils.getThumbnailProps(32));
-          control.getChildControl("label").set({
+          const atomLabel = control.getChildControl("label");
+          atomLabel.set({
             rich: true,
             wrap: true
-          })
+          });
+          osparc.wrapper.DOMPurify.sanitizeLabel(atomLabel);
           control.getContentElement().setStyles({
             "border-top-left-radius": "4px",
             "border-top-right-radius": "4px"

@@ -75,12 +75,11 @@ qx.Class.define("osparc.dashboard.ListButtonBase", {
           break;
         }
         case "title":
-          control = new qx.ui.basic.Label().set({
+          control = new osparc.ui.basic.SafeLabel().set({
             textColor: "contrasted-text-light",
             font: "text-14",
             alignY: "middle",
             maxWidth: 300,
-            rich: true,
           });
           this._add(control, {
             row: 0,

@@ -93,12 +93,11 @@ qx.Class.define("osparc.desktop.credits.CreditsServiceListItem", {
           break;
         }
         case "title":
-          control = new qx.ui.basic.Label().set({
+          control = new osparc.ui.basic.SafeLabel().set({
             font: "text-12",
             alignY: "middle",
             maxWidth: 200,
             allowGrowX: true,
-            rich: true,
           });
           this._add(control, this.self().GRID.NAME);
           break;

@@ -47,7 +47,6 @@ qx.Class.define("osparc.desktop.organizations.ServicesList", {
       const intro = new qx.ui.basic.Label().set({
         value: msg,
         alignX: "left",
-        rich: true,
         font: "text-13"
       });
       return intro;

@@ -47,7 +47,6 @@ qx.Class.define("osparc.desktop.organizations.TutorialsList", {
       const intro = new qx.ui.basic.Label().set({
         value: msg,
         alignX: "left",
-        rich: true,
         font: "text-13"
       });
       return intro;

@@ -23,6 +23,8 @@ qx.Class.define("osparc.desktop.preferences.pages.TagsPage", {
     Once the tags are created, they can be assigned to the ") + studyLabel + this.tr("  via 'More options...' on the ") + studyLabel + this.tr(" cards.");
     const intro = new qx.ui.basic.Label(msg).set({
       font: "text-13",
+      rich: true,
+      wrap: true
     });
     this._add(intro);
 

@@ -37,10 +37,9 @@ qx.Class.define("osparc.desktop.preferences.window.APIKeyBase", {
 
   members: {
     __addInfoText: function(infoText) {
-      const introLabel = new qx.ui.basic.Label(infoText).set({
+      const introLabel = new osparc.ui.basic.SafeLabel(infoText).set({
         paddingLeft: 5,
         paddingRight: 5,
-        rich: true
       });
       this.add(introLabel);
     }

@@ -95,9 +95,8 @@ qx.Class.define("osparc.desktop.wallets.WalletListItem", {
           });
           break;
         case "subtitle":
-          control = new qx.ui.basic.Label().set({
+          control = new osparc.ui.basic.SafeLabel().set({
             font: "text-13",
-            rich: true
           });
           this._add(control, {
             row: 1,

@@ -215,10 +215,9 @@ qx.Class.define("osparc.desktop.wallets.WalletsList", {
 
     __createHeader: function(label, showCurrently) {
       const header = new qx.ui.container.Composite(new qx.ui.layout.HBox());
-      const userWallets = new qx.ui.basic.Label().set({
+      const userWallets = new osparc.ui.basic.SafeLabel().set({
         value: label,
         alignX: "left",
-        rich: true,
         font: "text-14"
       });
       header.add(userWallets);

@@ -61,17 +61,6 @@ qx.Class.define("osparc.editor.ThumbnailEditor", {
     "cancel": "qx.event.type.Event"
   },
 
-  statics: {
-    sanitizeUrl: function(dirty) {
-      const clean = osparc.wrapper.DOMPurify.getInstance().sanitize(dirty);
-      if ((dirty && dirty !== clean) || (clean !== "" && !osparc.utils.Utils.isValidHttpUrl(clean))) {
-        osparc.FlashMessenger.logAs(qx.locale.Manager.tr("Error checking link"), "WARNING");
-        return null;
-      }
-      return clean;
-    }
-  },
-
   members: {
     _createChildControlImpl: function(id) {
       let control;
@@ -125,7 +114,7 @@ qx.Class.define("osparc.editor.ThumbnailEditor", {
           });
           control.addListener("execute", () => {
             const urlField = this.getChildControl("url-field");
-            const validUrl = this.self().sanitizeUrl(urlField.getValue());
+            const validUrl = osparc.wrapper.DOMPurify.sanitizeUrl(urlField.getValue());
             if (validUrl) {
               this.fireDataEvent("updateThumbnail", validUrl);
             }

@@ -67,13 +67,15 @@ qx.Class.define("osparc.file.FolderContent", {
         height: 80,
         padding: 2
       });
-      item.getChildControl("label").set({
+      const toggleLabel = item.getChildControl("label");
+      toggleLabel.set({
         font: "text-12",
         rich: true,
         textAlign: "center",
         maxWidth: 100,
         maxHeight: 33 // two lines
       });
+      osparc.wrapper.DOMPurify.sanitizeLabel(toggleLabel);
       osparc.utils.Utils.setIdToWidget(item, "FolderViewerItem");
       return item;
     },

@@ -104,8 +104,7 @@ qx.Class.define("osparc.form.tag.TagItem", {
           this.bind("color", control, "color");
           break;
         case "description":
-          control = new qx.ui.basic.Label().set({
-            rich: true,
+          control = new osparc.ui.basic.SafeLabel().set({
             allowGrowX: true,
             alignY: "middle",
           });

@@ -101,8 +101,7 @@ qx.Class.define("osparc.info.ServiceUtils", {
       * @param serviceData {Object} Serialized Service Object
       */
     createAuthors: function(serviceData) {
-      const authors = new qx.ui.basic.Label().set({
-        rich: true,
+      const authors = new osparc.ui.basic.SafeLabel().set({
         wrap: true,
         maxWidth: 220,
       });

@@ -21,10 +21,9 @@ qx.Class.define("osparc.info.Utils", {
 
   statics: {
     createTitle: function() {
-      const label = new qx.ui.basic.Label().set({
+      const label = new osparc.ui.basic.SafeLabel().set({
         font: "text-14",
         maxWidth: 600,
-        rich: true,
         wrap: true
       });
       return label;

@@ -77,9 +77,8 @@ qx.Class.define("osparc.notification.NotificationUI", {
           });
           break;
         case "title":
-          control = new qx.ui.basic.Label().set({
+          control = new osparc.ui.basic.SafeLabel().set({
             font: "text-13",
-            rich: true,
             wrap: true
           });
           this._add(control, {
@@ -88,9 +87,8 @@ qx.Class.define("osparc.notification.NotificationUI", {
           });
           break;
         case "text":
-          control = new qx.ui.basic.Label().set({
+          control = new osparc.ui.basic.SafeLabel().set({
             font: "text-12",
-            rich: true,
             wrap: true
           });
           this._add(control, {
@@ -99,9 +97,8 @@ qx.Class.define("osparc.notification.NotificationUI", {
           });
           break;
         case "date":
-          control = new qx.ui.basic.Label().set({
+          control = new osparc.ui.basic.SafeLabel().set({
             font: "text-11",
-            rich: true,
             wrap: true
           });
           this._add(control, {