chore: remove isomorphic-dompurify and add sanitize-html with types

Author: NiallJoeMaher

app/(app)/articles/[slug]/page.tsx

@@ -16,7 +16,7 @@ import { getPost } from "@/server/lib/posts";
 import { getCamelCaseFromLower } from "@/utils/utils";
 import { generateHTML } from "@tiptap/core";
 import { TiptapExtensions } from "@/components/editor/editor/extensions";
-import DOMPurify from "isomorphic-dompurify";
+import sanitizeHtml from "sanitize-html";
 import type { JSONContent } from "@tiptap/core";
 import NotFound from "@/components/NotFound/NotFound";
 
@@ -74,8 +74,26 @@ const parseJSON = (str: string): JSONContent | null => {
 
 const renderSanitizedTiptapContent = (jsonContent: JSONContent) => {
   const rawHtml = generateHTML(jsonContent, [...TiptapExtensions]);
-  // Sanitize the HTML
-  return DOMPurify.sanitize(rawHtml);
+  // Sanitize the HTML using sanitize-html (server-safe, no jsdom dependency)
+  return sanitizeHtml(rawHtml, {
+    allowedTags: sanitizeHtml.defaults.allowedTags.concat([
+      "img",
+      "iframe",
+      "h1",
+      "h2",
+    ]),
+    allowedAttributes: {
+      ...sanitizeHtml.defaults.allowedAttributes,
+      img: ["src", "alt", "title", "width", "height", "class"],
+      iframe: ["src", "width", "height", "frameborder", "allowfullscreen"],
+      "*": ["class", "id", "style"],
+    },
+    allowedIframeHostnames: [
+      "www.youtube.com",
+      "youtube.com",
+      "www.youtube-nocookie.com",
+    ],
+  });
 };
 
 const ArticlePage = async (props: Props) => {

next.config.js

@@ -20,8 +20,6 @@ const REMOTE_PATTERNS = [
 }));
 
 const config = {
-  // Exclude jsdom and isomorphic-dompurify from bundling to fix ESM/CJS compatibility
-  serverExternalPackages: ["jsdom", "isomorphic-dompurify"],
   // Turbopack configuration for SVGR (replaces webpack config)
   turbopack: {
     rules: {