MC-15311: [Sec] PageBuilder XSS Injection Possible Through Block on HTML Code Content Type For CSS Classes Attribute & in TinyMCE

- add form field validation for css class values

Author: anthoula

app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_base_form.xml

@@ -184,6 +184,9 @@
                 <dataType>text</dataType>
                 <label translate="true">CSS Classes</label>
                 <notice translate="true">Space separated list of classes.</notice>
+                <validation>
+                    <rule name="validate-css-class" xsi:type="boolean">true</rule>
+                </validation>
             </settings>
         </field>
         <field name="margins_and_padding" sortOrder="70" formElement="input" component="Magento_PageBuilder/js/form/element/margins-and-padding">

app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/validator-rules-mixin.js

@@ -52,6 +52,15 @@ define([
         return (/<a[\s]+([^>]+)>|<a>|<\/a>/igm).test(str);
     }
 
+    /**
+     * Validate that string is a proper css-class
+     * @param {String} str
+     * @return {Boolean}
+     */
+    function validateCssClass(str) {
+        return (/^[a-zA-Z_\-\d]+$/i).test(str);
+    }
+
     /**
      * Validate message field and url field anchor tag is used exclusively by one field
      * @param {String} message
@@ -147,6 +156,18 @@ define([
             $.mage.__('Please enter a valid video URL.')
         );
 
+        validator.addRule(
+            'validate-css-class',
+            function (value) {
+                if (utils.isEmptyNoTrim(value)) {
+                    return true;
+                }
+
+                return validateCssClass(value);
+            },
+            $.mage.__('Please enter a valid CSS class.')
+        );
+
         validator.addRule(
             'required-entry',
             function (value) {