Sanitize blog post HTML (#34)

Author: phucnguyen1707

apps/web/app/blog/[slug]/page.tsx

@@ -5,6 +5,7 @@ import { notFound } from 'next/navigation';
 import Image from 'next/image';
 import Link from 'next/link';
 import { getDb } from '@/lib/db';
+import { sanitizeBlogHtml } from '@/lib/sanitize-blog-html';
 
 interface Post {
   id: number;
@@ -61,6 +62,7 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
   const { slug } = await params;
   const post = await getPost(slug);
   if (!post) notFound();
+  const sanitizedContent = sanitizeBlogHtml(post.content);
 
   return (
     <div className="max-w-2xl mx-auto flex flex-col gap-8">
@@ -93,7 +95,7 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
 
         <div
           className="prose prose-gray max-w-none text-gray-700 leading-relaxed [&_h2]:text-xl [&_h2]:font-bold [&_h2]:text-gray-900 [&_h2]:mt-8 [&_h2]:mb-3 [&_h3]:text-base [&_h3]:font-bold [&_h3]:text-gray-800 [&_h3]:mt-6 [&_h3]:mb-2 [&_p]:mb-4 [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:mb-4 [&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:mb-4 [&_li]:mb-1 [&_a]:text-orange-500 [&_a]:underline [&_code]:bg-gray-100 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-sm [&_pre]:bg-gray-900 [&_pre]:text-gray-100 [&_pre]:p-4 [&_pre]:rounded-xl [&_pre]:overflow-x-auto [&_blockquote]:border-l-4 [&_blockquote]:border-orange-300 [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-gray-500"
-          dangerouslySetInnerHTML={{ __html: post.content }}
+          dangerouslySetInnerHTML={{ __html: sanitizedContent }}
         />
       </article>
 

apps/web/lib/sanitize-blog-html.ts

@@ -0,0 +1,28 @@
+import sanitizeHtml from 'sanitize-html';
+
+const allowedTags = [
+  ...sanitizeHtml.defaults.allowedTags,
+  'figure',
+  'figcaption',
+  'img',
+];
+
+export function sanitizeBlogHtml(content: string): string {
+  return sanitizeHtml(content, {
+    allowedTags,
+    allowedAttributes: {
+      ...sanitizeHtml.defaults.allowedAttributes,
+      a: ['href', 'name', 'target', 'title', 'rel'],
+      img: ['src', 'alt', 'title', 'width', 'height', 'loading'],
+      code: ['class'],
+      pre: ['class'],
+    },
+    allowedSchemes: ['http', 'https', 'mailto', 'tel'],
+    allowedSchemesAppliedToAttributes: ['href', 'src'],
+    transformTags: {
+      a: sanitizeHtml.simpleTransform('a', {
+        rel: 'noopener noreferrer',
+      }, true),
+    },
+  });
+}

apps/web/package.json

@@ -21,13 +21,15 @@
     "posthog-js": "^1.381.0",
     "react": "19.2.4",
     "react-dom": "19.2.4",
+    "sanitize-html": "^2.17.5",
     "serwist": "^9.5.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
     "@types/node": "^22",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@types/sanitize-html": "^2.16.1",
     "eslint": "^9",
     "eslint-config-next": "16.2.7",
     "tailwindcss": "^4",