feat: pure markdown

web/app/components/base/markdown-with-directive/components/markdown-with-directive-schema.ts

@@ -7,7 +7,10 @@ export const withIconCardListPropsSchema = z.object(commonSchema).strict()
 
 export const withIconCardItemPropsSchema = z.object({
   ...commonSchema,
-  icon: z.string().trim(),
+  icon: z.string().trim().url().refine(
+    value => /^https?:\/\//i.test(value),
+    'icon must be a http/https URL',
+  ),
 }).strict()
 
 export const directivePropsSchemas = {

web/app/components/base/markdown-with-directive/index.tsx

@@ -1,4 +1,5 @@
 import type { Components } from 'react-markdown'
+import DOMPurify from 'dompurify'
 import ReactMarkdown from 'react-markdown'
 import remarkDirective from 'remark-directive'
 import { visit } from 'unist-util-visit'
@@ -169,11 +170,27 @@ type MarkdownWithDirectiveProps = {
   markdown: string
 }
 
+function sanitizeMarkdownInput(markdown: string): string {
+  if (!markdown)
+    return ''
+
+  if (typeof DOMPurify.sanitize === 'function') {
+    return DOMPurify.sanitize(markdown, {
+      ALLOWED_ATTR: [],
+      ALLOWED_TAGS: [],
+    })
+  }
+
+  return markdown
+}
+
 export function MarkdownWithDirective({ markdown }: MarkdownWithDirectiveProps) {
-  const normalizedMarkdown = normalizeDirectiveAttributeBlocks(markdown)
+  const sanitizedMarkdown = sanitizeMarkdownInput(markdown)
+  const normalizedMarkdown = normalizeDirectiveAttributeBlocks(sanitizedMarkdown)
 
   return (
     <ReactMarkdown
+      skipHtml
       remarkPlugins={[remarkDirective, directivePlugin]}
       components={directiveComponents}
     >