fix: prevent HTML input in the form field "name" for order templates …

…and wishlists (#1385) * add validator which prevents less-than and greater-than characters in the name form field
intershop · Mar 15, 2023 · b990b3b · b990b3b
1 parent d77850e
commit b990b3b
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 3 deletions.
diff --git a/...s/shared/order-template-preferences-dialog/order-template-preferences-dialog.component.ts b/...s/shared/order-template-preferences-dialog/order-template-preferences-dialog.component.ts
@@ -14,6 +14,7 @@ import { FormlyFieldConfig } from '@ngx-formly/core';
 import { pick } from 'lodash-es';
 
 import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
+import { SpecialValidators } from 'ish-shared/forms/validators/special-validators';
 
 import { OrderTemplate } from '../../models/order-template/order-template.model';
 
@@ -72,9 +73,13 @@ export class OrderTemplatePreferencesDialogComponent implements OnInit {
           hideRequiredMarker: true,
           maxLength: 35,
         },
+        validators: {
+          validation: [SpecialValidators.noHtmlTags],
+        },
         validation: {
           messages: {
             required: 'account.order_template.form.name.error.required',
+            noHtmlTags: 'account.name.error.forbidden.html.chars',
           },
         },
       },

diff --git a/...order-templates/shared/select-order-template-form/select-order-template-form.component.ts b/...order-templates/shared/select-order-template-form/select-order-template-form.component.ts
@@ -6,6 +6,7 @@ import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { SelectOption } from 'ish-core/models/select-option/select-option.model';
+import { SpecialValidators } from 'ish-shared/forms/validators/special-validators';
 
 import { OrderTemplatesFacade } from '../../facades/order-templates.facade';
 
@@ -43,8 +44,14 @@ export class SelectOrderTemplateFormComponent implements OnInit {
         props: {
           required: true,
         },
+        validators: {
+          validation: [SpecialValidators.noHtmlTags],
+        },
         validation: {
-          messages: { required: 'account.order_template.name.error.required' },
+          messages: {
+            required: 'account.order_template.name.error.required',
+            noHtmlTags: 'account.name.error.forbidden.html.chars',
+          },
         },
       },
     ];
@@ -86,8 +93,14 @@ export class SelectOrderTemplateFormComponent implements OnInit {
               props: {
                 required: true,
               },
+              validators: {
+                validation: [SpecialValidators.noHtmlTags],
+              },
               validation: {
-                messages: { required: 'account.order_template.name.error.required' },
+                messages: {
+                  required: 'account.order_template.name.error.required',
+                  noHtmlTags: 'account.name.error.forbidden.html.chars',
+                },
               },
               expressions: {
                 'props.disabled': conf => conf.model.orderTemplate !== 'new',

diff --git a/src/app/extensions/wishlists/shared/select-wishlist-form/select-wishlist-form.component.ts b/src/app/extensions/wishlists/shared/select-wishlist-form/select-wishlist-form.component.ts
@@ -6,6 +6,7 @@ import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { SelectOption } from 'ish-core/models/select-option/select-option.model';
+import { SpecialValidators } from 'ish-shared/forms/validators/special-validators';
 
 import { WishlistsFacade } from '../../facades/wishlists.facade';
 
@@ -39,9 +40,13 @@ export class SelectWishlistFormComponent implements OnInit {
         props: {
           required: true,
         },
+        validators: {
+          validation: [SpecialValidators.noHtmlTags],
+        },
         validation: {
           messages: {
             required: 'account.wishlist.name.error.required',
+            noHtmlTags: 'account.name.error.forbidden.html.chars',
           },
         },
       },
@@ -84,9 +89,13 @@ export class SelectWishlistFormComponent implements OnInit {
               props: {
                 required: true,
               },
+              validators: {
+                validation: [SpecialValidators.noHtmlTags],
+              },
               validation: {
                 messages: {
                   required: 'account.wishlist.name.error.required',
+                  noHtmlTags: 'account.name.error.forbidden.html.chars',
                 },
               },
               expressions: {

diff --git a/...ons/wishlists/shared/wishlist-preferences-dialog/wishlist-preferences-dialog.component.ts b/...ons/wishlists/shared/wishlist-preferences-dialog/wishlist-preferences-dialog.component.ts
@@ -14,6 +14,7 @@ import { FormlyFieldConfig } from '@ngx-formly/core';
 import { pick } from 'lodash-es';
 
 import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
+import { SpecialValidators } from 'ish-shared/forms/validators/special-validators';
 
 import { Wishlist } from '../../models/wishlist/wishlist.model';
 
@@ -73,8 +74,14 @@ export class WishlistPreferencesDialogComponent implements OnInit {
           hideRequiredMarker: true,
           maxLength: 35,
         },
+        validators: {
+          validation: [SpecialValidators.noHtmlTags],
+        },
         validation: {
-          messages: { required: 'account.wishlists.wishlist_form.name.error.required' },
+          messages: {
+            required: 'account.wishlists.wishlist_form.name.error.required',
+            noHtmlTags: 'account.name.error.forbidden.html.chars',
+          },
         },
       },
       {

diff --git a/src/app/shared/forms/validators/special-validators.ts b/src/app/shared/forms/validators/special-validators.ts
@@ -41,6 +41,14 @@ export class SpecialValidators {
     return noSpecialCharsPattern.test(control.value) ? undefined : { noSpecialChars: { valid: false } };
   }
 
+  /**
+   * Prevent "<" and ">" to avoid usage of HTML tags.
+   */
+  static noHtmlTags(control: FormControl): { [error: string]: { valid: boolean } } {
+    const noHtmlTagsPattern = /^[^\<\>]*$/;
+    return noHtmlTagsPattern.test(control.value) ? undefined : { noHtmlTags: { valid: false } };
+  }
+
   static punchoutLogin(control: FormControl): { [error: string]: { valid: boolean } } {
     const punchoutLoginPattern = /^[a-zA-Z0-9_.@]*$/;
     return punchoutLoginPattern.test(control.value) ? undefined : { punchoutLogin: { valid: false } };

diff --git a/src/assets/i18n/de_DE.json b/src/assets/i18n/de_DE.json
@@ -190,6 +190,7 @@
   "account.my_account.link": "Mein Konto",
   "account.my_account.overview.link": "Kontoübersicht",
   "account.name.error.forbidden.chars": "Nur alphanumerische Zeichen sind erlaubt.",
+  "account.name.error.forbidden.html.chars": "Diese Art von Sonderzeichen ist nicht erlaubt. Bitte entfernen Sie \"<\", \">\" oder beide.",
   "account.navigation.logout.link": "Abmelden",
   "account.navigation.quotes.link": "Preisangebote",
   "account.new_user.heading": "Neue Benutzer",

diff --git a/src/assets/i18n/en_US.json b/src/assets/i18n/en_US.json
@@ -190,6 +190,7 @@
   "account.my_account.link": "My Account",
   "account.my_account.overview.link": "Account Overview",
   "account.name.error.forbidden.chars": "Only alphanumeric characters are allowed.",
+  "account.name.error.forbidden.html.chars": "This type of special character is not allowed. Please remove \"<\", \">\" or both.",
   "account.navigation.logout.link": "Logout",
   "account.navigation.quotes.link": "Quoting",
   "account.new_user.heading": "New Users",

diff --git a/src/assets/i18n/fr_FR.json b/src/assets/i18n/fr_FR.json
@@ -190,6 +190,7 @@
   "account.my_account.link": "Mon compte",
   "account.my_account.overview.link": "Aperçu du compte",
   "account.name.error.forbidden.chars": "Seuls les caractères alphanumériques sont autorisés.",
+  "account.name.error.forbidden.html.chars": "Ce type de caractère spécial n'est pas autorisé. Veuillez supprimer \"<\", \">\" ou les deux.",
   "account.navigation.logout.link": "Déconnexion",
   "account.navigation.quotes.link": "Devis",
   "account.new_user.heading": "Nouveaux utilisateurs",