chore: move from sanitize-html to js-xss (#1213)

app/components/OpenInNewTabIcon.tsx

@@ -1,6 +1,5 @@
 import OpenInNewIcon from "@digitalservicebund/icons/OpenInNew";
 
-export const openInNewAllowedTags = ["svg", "path"] as const;
 export const openInNewAllowedAttributes = {
   svg: [
     "xmlns",

app/services/security/__test__/sanatizeHtml.test.ts

@@ -12,7 +12,7 @@ describe("sanatizeHtml", () => {
       h4: '<h4 class="ds-heading-01-reg ds-label-01-bold ds-heading-02-reg"></h4>',
       h5: '<h5 class="ds-heading-01-reg ds-label-01-bold ds-heading-02-reg"></h5>',
       h6: '<h6 class="ds-heading-01-reg ds-label-01-bold ds-heading-02-reg"></h6>',
-      svg: '<svg xmlns="http://www.w3.org/2000/svg" height="1.2em" viewbox="0 0 24 24" width="1.2em" role="graphics-symbol img" focusable="false" aria-hidden="true" style="display:inline-block"><path d="M0 0h24v24H0z" fill="none"></path></svg>',
+      svg: '<svg xmlns="http://www.w3.org/2000/svg" height="1.2em" viewbox="0 0 24 24" width="1.2em" role="graphics-symbol img" focusable="false" aria-hidden="true" style="display:inline-block;"><path d="M0 0h24v24H0z" fill="none"></path></svg>',
     };
 
     test.each(Object.entries(validStrings))("%s", (_, html) => {

app/services/security/sanatizeHtml.ts

@@ -1,33 +1,19 @@
-import sanitizeHtml from "sanitize-html";
-import {
-  openInNewAllowedAttributes,
-  openInNewAllowedTags,
-} from "~/components/OpenInNewTabIcon";
+import * as xssImport from "xss";
+import { openInNewAllowedAttributes } from "~/components/OpenInNewTabIcon";
+// Note: type recast of import due to wrong default type export
+const xss = xssImport.default as unknown as typeof xssImport;
 
-const allowedTags =
-  sanitizeHtml.defaults.allowedTags.concat(openInNewAllowedTags);
-const allowedAttributes = {
-  a: sanitizeHtml.defaults.allowedAttributes["a"].concat(["rel", "aria-label"]),
+const allowList = {
+  ...xss.getDefaultWhiteList(),
+  a: xss.getDefaultWhiteList().a?.concat(["rel", "aria-label", "class"]),
+  p: xss.getDefaultWhiteList().p?.concat(["class"]),
+  h1: xss.getDefaultWhiteList().h1?.concat(["class"]),
+  h2: xss.getDefaultWhiteList().h2?.concat(["class"]),
+  h3: xss.getDefaultWhiteList().h3?.concat(["class"]),
+  h4: xss.getDefaultWhiteList().h4?.concat(["class"]),
+  h5: xss.getDefaultWhiteList().h5?.concat(["class"]),
+  h6: xss.getDefaultWhiteList().h6?.concat(["class"]),
   ...openInNewAllowedAttributes,
 };
-const allowedHeadingClasses = [
-  "ds-heading-01-reg",
-  "ds-label-01-bold",
-  "ds-heading-02-reg",
-];
-
-export const sanatize = (html: string) =>
-  sanitizeHtml(html, {
-    allowedTags,
-    allowedClasses: {
-      p: ["ds-subhead", "max-w-full"],
-      a: ["text-link", "min-h-[24px]", "inline-block"],
-      h1: allowedHeadingClasses,
-      h2: allowedHeadingClasses,
-      h3: allowedHeadingClasses,
-      h4: allowedHeadingClasses,
-      h5: allowedHeadingClasses,
-      h6: allowedHeadingClasses,
-    },
-    allowedAttributes,
-  });
+const sanatizer = new xss.FilterXSS({ allowList, stripIgnoreTagBody: true });
+export const sanatize = (html: string) => sanatizer.process(html);

package.json

@@ -77,10 +77,10 @@
     "react-select": "^5.8.1",
     "react": "^18.3.1",
     "remix-validated-form": "^5.1.5",
-    "sanitize-html": "^2.13.0",
     "tiny-invariant": "^1.3.3",
     "true-myth": "^8.0.1",
     "validator": "^13.12.0",
+    "xss": "^1.0.15",
     "xstate": "^5.18.1",
     "zod": "^3.23.8"
   },