@capillarytech/creatives-library 8.0.249 → 8.0.250-alpha.0

package/v2Components/HtmlEditor/utils/htmlValidator.js

@@ -20,7 +20,7 @@ const defaultMessageFormatter = (messageKey, values = {}) => {
     'validator.largeImageDetected': 'Large image dimensions detected - consider mobile optimization',
     'validator.unclosedCssRule': 'Unclosed CSS rule detected',
     'validator.emptyCssRule': 'Empty CSS rule detected',
-    'validator.cssValidationFailed': `CSS validation failed: ${values.error || 'Unknown error'}`
+    'validator.cssValidationFailed': `CSS validation failed: ${values.error || 'Unknown error'}`,
   };
 
   return fallbackMessages[messageKey] || messageKey;
@@ -49,7 +49,7 @@ const HTML_RULES = {
   'space-tab-mixed-disabled': 'space',
   'id-class-ad-disabled': false,
   'href-abs-or-rel': false,
-  'attr-unsafe-chars': true
+  'attr-unsafe-chars': true,
 };
 
 // Additional custom validation rules
@@ -66,7 +66,7 @@ const CUSTOM_VALIDATIONS = {
 
   // InApp-specific validations
   MOBILE_INCOMPATIBLE: /<(object|embed|applet)\b/gi,
-  LARGE_IMAGES: /width\s*:\s*[5-9]\d{2,}px|height\s*:\s*[5-9]\d{2,}px/gi
+  LARGE_IMAGES: /width\s*:\s*[5-9]\d{2,}px|height\s*:\s*[5-9]\d{2,}px/gi,
 };
 
 /**
@@ -82,7 +82,7 @@ export const validateHTML = (html, variant = 'email', formatMessage = defaultMes
       isValid: true,
       errors: [],
       warnings: [],
-      info: []
+      info: [],
     };
   }
 
@@ -90,7 +90,7 @@ export const validateHTML = (html, variant = 'email', formatMessage = defaultMes
     isValid: true,
     errors: [],
     warnings: [],
-    info: []
+    info: [],
   };
 
   try {
@@ -98,7 +98,7 @@ export const validateHTML = (html, variant = 'email', formatMessage = defaultMes
     const htmlHintResults = HTMLHint.verify(html, HTML_RULES);
 
     // Process HTMLHint results
-    htmlHintResults.forEach(issue => {
+    htmlHintResults.forEach((issue) => {
       const error = {
         type: issue.type,
         message: issue.message,
@@ -106,66 +106,64 @@ export const validateHTML = (html, variant = 'email', formatMessage = defaultMes
         column: issue.col,
         rule: issue.rule.id,
         severity: getSeverityLevel(issue.type, issue.rule.id),
-        source: 'htmlhint'
+        source: 'htmlhint',
       };
 
-      if (error.severity === 'error') {
-        results.errors.push(error);
-        results.isValid = false;
-      } else if (error.severity === 'warning') {
+      if (error.severity === 'warning') {
         results.warnings.push(error);
-      } else {
+      } else if (error.severity === 'info') {
         results.info.push(error);
+      } else {
+        results.warnings.push(error);
       }
     });
-
-    // Run custom validations
-    runCustomValidations(html, variant, results, formatMessage);
-
-    // Run Liquid template validation
-    runLiquidValidation(html, variant, results, formatMessage);
-
   } catch (error) {
-    results.errors.push({
-      type: 'error',
+    // HTMLHint failed, but we still want to run custom validations and Liquid validation
+    results.warnings.push({
+      type: 'warning',
       message: formatMessage('validator.validationFailed', { error: error.message }),
       line: 1,
       column: 1,
       rule: 'validation-error',
-      severity: 'error',
-      source: 'validator'
+      severity: 'warning',
+      source: 'validator',
     });
-    results.isValid = false;
   }
 
+  // Always run custom validations and Liquid validation, even if HTMLHint failed
+  // This ensures unsafe protocol detection and other critical validations still run
+  runCustomValidations(html, variant, results, formatMessage);
+  runLiquidValidation(html, variant, results, formatMessage);
+
   return results;
 };
 
 /**
- * Determines severity level based on error type and rule
+ * Determines severity level based on error type and rule.
+ * ONLY Rule Group #1 (Input & Sanitization) is blocking; that is handled in
+ * contentSanitizer/useValidation. All HTML/CSS/Liquid/security rules here are
+ * WARNING only for backward compatibility with CKEditor legacy templates.
  */
 const getSeverityLevel = (type, ruleId) => {
-  const errorRules = [
+  const warningRules = [
     'tag-pair',
     'attr-no-duplication',
     'id-unique',
-    'spec-char-escape'
-  ];
-
-  const warningRules = [
+    'spec-char-escape',
     'tagname-lowercase',
     'attr-lowercase',
     'attr-value-double-quotes',
-    'alt-require'
+    'alt-require',
   ];
 
-  if (type === 'error' || errorRules.includes(ruleId)) {
-    return 'error';
-  } else if (warningRules.includes(ruleId)) {
+  if (warningRules.includes(ruleId)) {
+    return 'warning';
+  }
+  // Downgrade HTMLHint "error" type to warning (Rule Group #1 is sanitizer-only)
+  if (type === 'error') {
     return 'warning';
-  } else {
-    return 'info';
   }
+  return 'info';
 };
 
 /**
@@ -177,6 +175,7 @@ const getSeverityLevel = (type, ruleId) => {
  */
 const runCustomValidations = (html, variant, results, formatMessage = defaultMessageFormatter) => {
   // Check for unsafe protocols using RegExp.exec loop
+  // These are BLOCKING ERRORS (Rule Group #1: sanitizer.dangerousProtocolDetected)
   const unsafeProtocolsRegex = new RegExp(CUSTOM_VALIDATIONS.UNSAFE_PROTOCOLS.source, CUSTOM_VALIDATIONS.UNSAFE_PROTOCOLS.flags);
   unsafeProtocolsRegex.lastIndex = 0; // Reset lastIndex before running
   let match;
@@ -186,9 +185,9 @@ const runCustomValidations = (html, variant, results, formatMessage = defaultMes
       message: formatMessage('validator.unsafeProtocolDetected', { protocol: match[0] }),
       line: getLineNumber(html, match.index),
       column: 1,
-      rule: 'unsafe-protocol',
+      rule: 'sanitizer.dangerousProtocolDetected',
       severity: 'error',
-      source: 'custom'
+      source: 'custom',
     });
     results.isValid = false;
 
@@ -209,7 +208,7 @@ const runCustomValidations = (html, variant, results, formatMessage = defaultMes
       column: 1,
       rule: 'script-tag-warning',
       severity: 'warning',
-      source: 'custom'
+      source: 'custom',
     });
 
     // Guard against zero-length matches to avoid infinite loops
@@ -245,7 +244,7 @@ const validateEmailSpecific = (html, results, formatMessage = defaultMessageForm
       column: 1,
       rule: 'outlook-compatibility',
       severity: 'warning',
-      source: 'email-specific'
+      source: 'email-specific',
     });
 
     // Guard against zero-length matches to avoid infinite loops
@@ -265,7 +264,7 @@ const validateEmailSpecific = (html, results, formatMessage = defaultMessageForm
       column: 1,
       rule: 'email-css-compatibility',
       severity: 'warning',
-      source: 'email-specific'
+      source: 'email-specific',
     });
 
     // Guard against zero-length matches to avoid infinite loops
@@ -294,7 +293,7 @@ const validateInAppSpecific = (html, results, formatMessage = defaultMessageForm
       column: 1,
       rule: 'mobile-compatibility',
       severity: 'warning',
-      source: 'inapp-specific'
+      source: 'inapp-specific',
     });
 
     // Guard against zero-length matches to avoid infinite loops
@@ -314,7 +313,7 @@ const validateInAppSpecific = (html, results, formatMessage = defaultMessageForm
       column: 1,
       rule: 'mobile-image-size',
       severity: 'info',
-      source: 'inapp-specific'
+      source: 'inapp-specific',
     });
 
     // Guard against zero-length matches to avoid infinite loops
@@ -336,8 +335,9 @@ const runLiquidValidation = (html, variant, results, formatMessage = defaultMess
     const liquidResults = validateLiquidHTML(html, variant);
 
     // Merge Liquid validation results
+    // Client-side Liquid validation errors are blocking (genuine syntax errors)
     if (liquidResults.errors) {
-      results.errors.push(...liquidResults.errors);
+      results.errors.push(...liquidResults.errors.map((e) => ({ ...e, severity: 'error' })));
       if (liquidResults.errors.length > 0) {
         results.isValid = false;
       }
@@ -375,7 +375,7 @@ export const validateCSS = (css, formatMessage = defaultMessageFormatter) => {
     isValid: true,
     errors: [],
     warnings: [],
-    info: []
+    info: [],
   };
 
   if (!css || typeof css !== 'string') {
@@ -388,7 +388,7 @@ export const validateCSS = (css, formatMessage = defaultMessageFormatter) => {
       unclosedBraces: /\{[^{}]*$/gm,
       invalidProperty: /[^;{}]+:\s*[^;{}]*[^;}]/g,
       missingColon: /[^;{}]+\s+[^;{}:]+;/g,
-      emptyRule: /[^{}]+\{\s*\}/g
+      emptyRule: /[^{}]+\{\s*\}/g,
     };
 
     // Check for unclosed braces using RegExp.exec loop
@@ -396,16 +396,15 @@ export const validateCSS = (css, formatMessage = defaultMessageFormatter) => {
     unclosedBracesRegex.lastIndex = 0; // Reset lastIndex before running
     let match;
     while ((match = unclosedBracesRegex.exec(css)) !== null) {
-      results.errors.push({
-        type: 'error',
+      results.warnings.push({
+        type: 'warning',
         message: formatMessage('validator.unclosedCssRule'),
         line: getLineNumber(css, match.index),
         column: 1,
         rule: 'unclosed-brace',
-        severity: 'error',
-        source: 'css-validator'
+        severity: 'warning',
+        source: 'css-validator',
       });
-      results.isValid = false;
 
       // Guard against zero-length matches to avoid infinite loops
       if (match[0].length === 0) {
@@ -417,34 +416,31 @@ export const validateCSS = (css, formatMessage = defaultMessageFormatter) => {
     const emptyRulesRegex = new RegExp(validationPatterns.emptyRule.source, validationPatterns.emptyRule.flags);
     emptyRulesRegex.lastIndex = 0; // Reset lastIndex before running
     while ((match = emptyRulesRegex.exec(css)) !== null) {
-      results.errors.push({
-        type: 'error',
+      results.warnings.push({
+        type: 'warning',
         message: formatMessage('validator.emptyCssRule'),
         line: getLineNumber(css, match.index),
         column: 1,
         rule: 'empty-rule',
-        severity: 'error',
-        source: 'css-validator'
+        severity: 'warning',
+        source: 'css-validator',
       });
-      results.isValid = false;
 
       // Guard against zero-length matches to avoid infinite loops
       if (match[0].length === 0) {
         emptyRulesRegex.lastIndex++;
       }
     }
-
   } catch (error) {
-    results.errors.push({
-      type: 'error',
+    results.warnings.push({
+      type: 'warning',
       message: formatMessage('validator.cssValidationFailed', { error: error.message }),
       line: 1,
       column: 1,
       rule: 'css-validation-error',
-      severity: 'error',
-      source: 'css-validator'
+      severity: 'warning',
+      source: 'css-validator',
     });
-    results.isValid = false;
   }
 
   return results;
@@ -457,16 +453,20 @@ export const validateCSS = (css, formatMessage = defaultMessageFormatter) => {
  * @returns {Object} Combined validation results from all CSS blocks
  */
 export const extractAndValidateCSS = (html, formatMessage = defaultMessageFormatter) => {
-  if (!html) return { isValid: true, errors: [], warnings: [], info: [] };
+  if (!html) {
+    return {
+      isValid: true, errors: [], warnings: [], info: [],
+    };
+  }
 
   // Extract CSS from style tags
   const styleTagPattern = /<style[^>]*>([\s\S]*?)<\/style>/gi;
   let match;
-  let allResults = {
+  const allResults = {
     isValid: true,
     errors: [],
     warnings: [],
-    info: []
+    info: [],
   };
 
   while ((match = styleTagPattern.exec(html)) !== null) {
@@ -483,19 +483,18 @@ export const extractAndValidateCSS = (html, formatMessage = defaultMessageFormat
     }
   }
 
-  // Check for unclosed style tags
+  // Check for unclosed style tags (warning only for CKEditor legacy compatibility)
   const unclosedStylePattern = /<style[^>]*>(?![\s\S]*?<\/style>)/gi;
   if (unclosedStylePattern.test(html)) {
-    allResults.errors.push({
-      type: 'error',
+    allResults.warnings.push({
+      type: 'warning',
       message: formatMessage('validator.unclosedCssRule'),
       line: 1,
       column: 1,
       rule: 'unclosed-style-tag',
-      severity: 'error',
-      source: 'css-validator'
+      severity: 'warning',
+      source: 'css-validator',
     });
-    allResults.isValid = false;
   }
 
   return allResults;
@@ -504,5 +503,5 @@ export const extractAndValidateCSS = (html, formatMessage = defaultMessageFormat
 export default {
   validateHTML,
   validateCSS,
-  extractAndValidateCSS
+  extractAndValidateCSS,
 };