chore: sanitize text area

src/components/FormElement/FormElement.vue

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

src/components/Input/BaseInput.vue

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

src/components/Input/Input.vue

@@ -18,7 +18,7 @@
       v-bind="$attrs"
       v-model="val"
       class="unnnic-form-input"
-      :placeholder="sanitizedPlaceholder"
+      :placeholder="placeholder"
       :iconLeft="iconLeft"
       :iconRight="iconRight"
       :type="type"
@@ -123,9 +123,6 @@ export default {
     sanitizedMessage(){
       return escapeHtml(this.message)
     },
-    sanitizedPlaceholder(){
-      return escapeHtml(this.placeholder)
-    }
   },
   watch: {
     val() {

src/components/TextArea/TextArea.vue

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

src/stories/TextArea.stories.js

@@ -29,8 +29,8 @@ export default {
 
 export const Default = {
   args: {
-    label: 'Label',
-    placeholder: 'Placeholder',
+    label: 'Label <div> aaaa',
+    placeholder: 'Placeholder <div> aaaa',
     maxLength: 150,
     disabled: false,
     type: 'normal',