feat: Implement security fix plan

src/components/blog/MarkdownRenderer.tsx

@@ -1,5 +1,5 @@
 import ReactMarkdown from 'react-markdown';
-import rehypeSanitize from 'rehype-sanitize';
+import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
 import { cn } from '@/lib/utils';
 
 interface MarkdownRendererProps {
@@ -7,6 +7,36 @@ interface MarkdownRendererProps {
   className?: string;
 }
 
+// Custom sanitization schema with enhanced security
+const customSchema = {
+  ...defaultSchema,
+  attributes: {
+    ...defaultSchema.attributes,
+    a: [
+      ...(defaultSchema.attributes?.a || []),
+      ['rel', 'noopener', 'noreferrer'],
+      ['target', '_blank']
+    ],
+    img: [
+      ...(defaultSchema.attributes?.img || []),
+      ['loading', 'lazy'],
+      ['referrerpolicy', 'no-referrer']
+    ]
+  }
+};
+
+/**
+ * Secure Markdown Renderer with XSS Protection
+ * 
+ * Security features:
+ * - Sanitizes all user-generated HTML using rehype-sanitize
+ * - Strips all raw HTML tags (skipHtml=true)
+ * - Enforces noopener noreferrer on all links
+ * - Adds lazy loading to images
+ * - Sets referrer policy to prevent data leakage
+ * 
+ * @see docs/SECURITY.md for markdown security policy
+ */
 export function MarkdownRenderer({ content, className }: MarkdownRendererProps) {
   return (
     <div
@@ -27,8 +57,16 @@ export function MarkdownRenderer({ content, className }: MarkdownRendererProps)
       )}
     >
       <ReactMarkdown 
-        rehypePlugins={[rehypeSanitize]}
+        rehypePlugins={[[rehypeSanitize, customSchema]]}
         skipHtml={true}
+        components={{
+          a: ({node, ...props}) => (
+            <a {...props} rel="noopener noreferrer" target="_blank" />
+          ),
+          img: ({node, ...props}) => (
+            <img {...props} loading="lazy" referrerPolicy="no-referrer" />
+          )
+        }}
       >
         {content}
       </ReactMarkdown>