🏗️ Phase 1 for production readyness

components/blog/markdown-renderer.tsx

@@ -2,6 +2,7 @@
 
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
+import rehypeSanitize from 'rehype-sanitize'
 import rehypeRaw from 'rehype-raw'
 import { OptimizedImage } from './OptimizedImage'
 import { CodeBlock } from './code-block'
@@ -17,7 +18,17 @@ export default function MarkdownRenderer({ content, className = '' }: MarkdownRe
     <div className={`prose prose-invert prose-zinc max-w-none ${className}`}>
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
-        rehypePlugins={[rehypeRaw]}
+        rehypePlugins={[rehypeRaw, [rehypeSanitize, {
+          tagNames: ['p', 'a', 'img', 'code', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+                     'ul', 'ol', 'li', 'blockquote', 'table', 'thead', 'tbody', 'tr', 'th', 'td',
+                     'strong', 'em', 'del', 'br', 'hr', 'div', 'span'],
+          attributes: {
+            a: ['href', 'rel', 'target'],
+            img: ['src', 'alt', 'title', 'width', 'height'],
+            code: ['className'],
+            '*': ['className', 'id']
+          }
+        }]]}
         components={{
           img: ({ node, src, alt, title, ...props }) => {
             if (!src || typeof src !== 'string') return null