Use dompurify to sanitize content before rendering

app/[slug]/site/page.tsx

@@ -2,10 +2,25 @@
 
 'use client'
 
+import { AbstractApi } from '@/app/api/abstract-api';
+import { Website, WebsiteSerializer } from '@/app/lib/website';
+import { useState, useEffect } from 'react';
+import DOMPurify from "dompurify";
 
 export default function Page() {
 
+  const [websiteContent, setWebsiteContent] = useState<string>("");
+
+  const api = new AbstractApi<Website>();
+  const serializer = new WebsiteSerializer();
+
+  useEffect(() => {
+    api.get(serializer, undefined, (loadedWebsite) => {
+      setWebsiteContent(loadedWebsite.content || "");
+    });
+  }, []);
+
   return (
-    "Helloworld"
+    <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(websiteContent) }} />
   );
 }

package.json

@@ -15,6 +15,7 @@
     "autoprefixer": "10.4.21",
     "bcrypt": "^5.1.1",
     "clsx": "^2.1.1",
+    "dompurify": "^3.2.6",
     "next": "15.3.3",
     "next-auth": "5.0.0-beta.28",
     "postcss": "8.5.4",

pnpm-lock.yaml

@@ -35,6 +35,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      dompurify:
+        specifier: ^3.2.6
+        version: 3.2.6
       next:
         specifier: 15.3.3
         version: 15.3.3(@playwright/test@1.52.0)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
@@ -685,6 +688,9 @@ packages:
   '@types/react@18.3.23':
     resolution: {integrity: sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==}
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
   '@types/use-sync-external-store@0.0.6':
     resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==}
 
@@ -895,6 +901,9 @@ packages:
   dom-helpers@5.2.1:
     resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
 
+  dompurify@3.2.6:
+    resolution: {integrity: sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==}
+
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
@@ -2479,6 +2488,9 @@ snapshots:
       '@types/prop-types': 15.7.12
       csstype: 3.1.3
 
+  '@types/trusted-types@2.0.7':
+    optional: true
+
   '@types/use-sync-external-store@0.0.6': {}
 
   abbrev@1.1.1: {}
@@ -2681,6 +2693,10 @@ snapshots:
       '@babel/runtime': 7.27.0
       csstype: 3.1.3
 
+  dompurify@3.2.6:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2