@weni/unnnic-system 2.27.0 → 2.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "2.27.0",
+  "version": "2.28.0",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/FormElement/FormElement.vue

@@ -12,7 +12,7 @@
         },
       ]"
     >
-      {{ label }}
+      {{ fullySanitize(label) }}
     </p>
 
     <slot></slot>
@@ -28,7 +28,7 @@
           scheme="aux-red-500"
         />
 
-        {{ error }}
+        {{ fullySanitize(error) }}
       </template>
 
       <span
@@ -43,7 +43,7 @@
       v-if="message || !!$slots.rightMessage"
       class="unnnic-form-element__message"
     >
-      {{ message }}
+      {{ fullySanitize(message) }}
 
       <span
         v-if="!shouldShowErrorSection && !!$slots.rightMessage"
@@ -57,7 +57,7 @@
 
 <script>
 import UnnnicIcon from '../../components/Icon.vue';
-
+import { fullySanitize } from '../../utils/sanitize';
 export default {
   components: {
     UnnnicIcon,
@@ -93,6 +93,9 @@ export default {
       return this.error && (this.error !== true || !!this.$slots.rightMessage);
     },
   },
+  methods: {
+    fullySanitize,
+  },
 };
 </script>
 

package/src/components/Input/BaseInput.vue

@@ -3,7 +3,7 @@
     v-if="mask"
     v-mask="mask"
     v-bind="attributes"
-    :value="modelValue"
+    :value="fullySanitize(modelValue)"
     :class="classes"
     :type="nativeType"
   />
@@ -11,7 +11,7 @@
   <input
     v-else
     v-bind="attributes"
-    :value="modelValue"
+    :value="fullySanitize(modelValue)"
     :class="classes"
     :type="nativeType"
   />
@@ -19,6 +19,7 @@
 
 <script>
 import { mask } from 'vue-the-mask';
+import { fullySanitize } from '../../utils/sanitize';
 
 export default {
   directives: { mask },
@@ -76,6 +77,9 @@ export default {
       ];
     },
   },
+  methods: {
+    fullySanitize,
+  },
 };
 </script>
 

package/src/components/Input/Input.vue

@@ -11,7 +11,7 @@
       v-else-if="label"
       class="unnnic-form__label"
     >
-      {{ label }}
+      {{ fullySanitize(label) }}
     </p>
 
     <TextInput
@@ -34,12 +34,13 @@
       v-if="message"
       class="unnnic-form__message"
     >
-      {{ message }}
+      {{ fullySanitize(message) }}
     </p>
   </div>
 </template>
 
 <script>
+import { fullySanitize } from '../../utils/sanitize';
 import TextInput from './TextInput.vue';
 
 export default {
@@ -117,9 +118,12 @@ export default {
       return !!this.$slots.label;
     },
   },
+  methods: {
+    fullySanitize,
+  },
   watch: {
     val() {
-      this.$emit('update:modelValue', this.val);
+      this.$emit('update:modelValue', fullySanitize(this.val));
     },
     modelValue() {
       this.val = this.modelValue;

package/src/components/Label/Label.vue

@@ -1,8 +1,9 @@
 <template>
-  <p class="unnnic-label__label">{{ label }}</p>
+  <p class="unnnic-label__label">{{ fullySanitize(label) }}</p>
 </template>
 
 <script>
+import { fullySanitize } from '../../utils/sanitize';
 export default {
   name: 'UnnnicLabel',
   props: {
@@ -11,6 +12,9 @@ export default {
       default: null,
     },
   },
+  methods: {
+    fullySanitize,
+  },
 };
 </script>
 

package/src/components/SelectSmart/SelectSmartOption.vue

@@ -27,7 +27,7 @@
           `unnnic-select-smart-option__label--${size}`,
         ]"
         data-testid="label"
-        >{{ label }}</span
+        >{{ fullySanitize(label) }}</span
       >
       <p
         v-if="description"
@@ -37,7 +37,7 @@
           `unnnic-select-smart-option__description--${size}`,
         ]"
       >
-        {{ description }}
+        {{ fullySanitize(description) }}
       </p>
     </div>
   </div>
@@ -45,6 +45,7 @@
 
 <script>
 import UnnnicCheckbox from '../Checkbox/Checkbox.vue';
+import { fullySanitize } from '../../utils/sanitize';
 
 export default {
   name: 'UnnnicSelectSmartOption',
@@ -89,6 +90,9 @@ export default {
       },
     },
   },
+  methods: {
+    fullySanitize,
+  },
 };
 </script>
 

package/src/components/TextArea/TextArea.vue

@@ -13,11 +13,11 @@
         `unnnic-text-area__textarea--size-${size}`,
         `unnnic-text-area__textarea--type-${type}`,
       ]"
-      :placeholder="placeholder"
+      :placeholder="fullySanitize(placeholder)"
       :maxlength="maxLength"
       :disabled="disabled"
       :value="modelValue"
-      @input="$emit('update:modelValue', $event.target.value)"
+      @input="$emit('update:modelValue', fullySanitize($event.target.value))"
     ></textarea>
 
     <template
@@ -29,6 +29,7 @@
 </template>
 
 <script>
+import { fullySanitize } from '../../utils/sanitize';
 import UnnnicFormElement from '../FormElement/FormElement.vue';
 
 export default {
@@ -83,6 +84,7 @@ export default {
   emits: ['update:modelValue'],
 
   methods: {
+    fullySanitize,
     focus() {
       this.$refs.textarea.focus();
     },

package/src/utils/sanitize.js

@@ -0,0 +1,88 @@
+/**
+ * Decodes HTML entities (`&lt;` → `<`, `&gt;` → `>`, etc.).
+ * @param {string} input
+ * @returns {string}
+ */
+export function escapeHtml(input) {
+  if (typeof input !== 'string') return '';
+  return input.replace(/<\/?[a-zA-Z]+\b[^>]*>/g, '');
+}
+
+/**
+ * Sanitizes HTML by removing disallowed tags and unsafe attributes.
+ * @param {string} input
+ * @param {Array<string>} allowedTags - List of allowed HTML tags.
+ * @param {number} maxLength - Maximum length of the sanitized string.
+ * @returns {string}
+ */
+export function sanitizeHtml(input, allowedTags = [], maxLength = 1000) {
+  if (typeof input !== 'string') return '';
+
+  // Limits text length
+  if (input.length > maxLength) {
+    input = input.substring(0, maxLength);
+  }
+
+  // Decodes HTML entities (&lt;, &gt;, &amp;)
+  input = escapeHtml(input);
+
+  // Removes **only** real HTML tags
+  input = input.replace(/<\/?([a-z][a-z0-9]*)\b[^>]*>/gi, (match, tagName) => {
+    return allowedTags.includes(tagName.toLowerCase()) ? match : '';
+  });
+
+  return input;
+}
+
+/**
+ * Fully sanitizes a string by applying multiple layers of security:
+ * 1. `sanitizeHtml` removes disallowed tags and attributes.
+ * 2. `escapeHtml` ensures no encoded characters remain and removes any remaining tags.
+ *
+ * @param {string} input
+ * @param {Array<string>} allowedTags - List of allowed HTML tags.
+ * @param {number} maxLength - Maximum length of the sanitized string.
+ * @returns {string}
+ */
+export function fullySanitize(input, allowedTags = [], maxLength = 1000) {
+  if (typeof input !== 'string') return '';
+
+  let sanitizedInput = sanitizeHtml(input, allowedTags, maxLength);
+
+  return escapeHtml(sanitizedInput);
+}
+
+/**
+ * Validates and sanitizes input text.
+ * @param {string} input - The input string to validate.
+ * @param {Array<string>} allowedTags - List of allowed HTML tags.
+ * @param {number} maxLength - Maximum length of the sanitized string.
+ * @returns {{ isValid: boolean, sanitized: string, errors: string[] }} - Validation result.
+ */
+export function validateInput(input, allowedTags = [], maxLength = 1000) {
+  const errors = [];
+
+  if (typeof input !== 'string') {
+    errors.push('Input must be a string.');
+    return { isValid: false, sanitized: '', errors };
+  }
+
+  if (input.length > maxLength) {
+    errors.push(`Input exceeds the maximum length of ${maxLength} characters.`);
+    input = input.substring(0, maxLength);
+  }
+
+  const sanitized = fullySanitize(input, allowedTags, maxLength);
+
+  if (sanitized !== input) {
+    errors.push(
+      'Some HTML tags or attributes were removed for security reasons.',
+    );
+  }
+
+  return {
+    isValid: errors.length === 0,
+    sanitized,
+    errors,
+  };
+}