feat: sanitize ticket field descriptions in Service Catalog using DOMPurify

Author: zendesk-kamil-zachradnik

src/modules/new-request-form/usePrefilledTicketFields.tsx

@@ -1,28 +1,13 @@
 import { useMemo } from "react";
 import DOMPurify from "dompurify";
 import type { TicketFieldObject } from "../ticket-fields/data-types/TicketFieldObject";
+import { ALLOWED_HTML_TAGS } from "../shared";
 
 const MAX_URL_LENGTH = 2048;
 const TICKET_FIELD_PREFIX = "tf_";
 const DATE_REGEX = /^\d{4}-\d{2}-\d{2}$/;
 
 const ALLOWED_BOOLEAN_VALUES = ["true", "false"];
-const ALLOWED_HTML_TAGS = [
-  "pre",
-  "strong",
-  "b",
-  "p",
-  "blockquote",
-  "ul",
-  "ol",
-  "li",
-  "h2",
-  "h3",
-  "h4",
-  "i",
-  "em",
-  "br",
-];
 
 interface Fields {
   ticketFields: TicketFieldObject[];

src/modules/service-catalog/hooks/useItemFormFields.tsx

@@ -5,6 +5,8 @@ import type { TicketFieldObject } from "../../ticket-fields/data-types/TicketFie
 import type { EndUserCondition } from "../../ticket-fields/data-types/EndUserCondition";
 import { getCustomObjectKey } from "../../ticket-fields/fields/LookupField";
 import { getVisibleFields } from "../../ticket-fields/getVisibleFields";
+import DOMPurify from "dompurify";
+import { ALLOWED_HTML_TAGS } from "../../shared";
 
 const getFieldValue = (field: TicketField) => {
   if (field.type === "tagger") {
@@ -26,11 +28,16 @@ const formatField = (field: TicketField): TicketFieldObject => {
     relationship_target_type,
     relationship_filter,
   } = field;
+
+  const sanitizedDescription = DOMPurify.sanitize(description, {
+    ALLOWED_TAGS: ALLOWED_HTML_TAGS,
+  });
+
   return {
     id,
     type,
     name: `custom_fields_${id}`,
-    description,
+    description: sanitizedDescription,
     label: title_in_portal,
     options: custom_field_options,
     required: required_in_portal,

src/modules/shared/index.ts

@@ -2,3 +2,4 @@ export * from "./notifications";
 export * from "./i18n";
 export * from "./garden-theme";
 export * from "./error-boundary";
+export * from "./validations";

src/modules/shared/validations/constants.ts

@@ -0,0 +1,16 @@
+export const ALLOWED_HTML_TAGS = [
+  "pre",
+  "strong",
+  "b",
+  "p",
+  "blockquote",
+  "ul",
+  "ol",
+  "li",
+  "h2",
+  "h3",
+  "h4",
+  "i",
+  "em",
+  "br",
+];

src/modules/shared/validations/index.ts

@@ -0,0 +1 @@
+export * from "./constants";

templates/document_head.hbs

@@ -20,7 +20,7 @@
     "service-catalog-translations": "{{asset 'service-catalog-translations-bundle.js'}}",
     "shared": "{{asset 'shared-bundle.js'}}",
     "ticket-fields": "{{asset 'ticket-fields-bundle.js'}}",
-    "wysiwyg": "{{asset 'wysiwyg-bundle.js'}}"
+    "wysiwyg": "{{asset 'wysiwyg-bundle.js'}}",
   }
 }
 </script>