feat: add iframe support for embedded videos in markdown content

web/src/components/MemoContent/constants.ts

@@ -13,6 +13,7 @@ export const COMPACT_STATES: Record<"ALL" | "SNIPPET", { textKey: string; next:
  * - KaTeX math rendering elements (MathML tags)
  * - KaTeX-specific attributes (className, style, aria-*, data-*)
  * - Safe HTML elements for rich content
+ * - iframe embeds for trusted video providers (YouTube, Vimeo, etc.)
  *
  * This prevents XSS attacks while preserving math rendering functionality.
  */
@@ -22,6 +23,18 @@ export const SANITIZE_SCHEMA = {
     ...defaultSchema.attributes,
     div: [...(defaultSchema.attributes?.div || []), "className"],
     span: [...(defaultSchema.attributes?.span || []), "className", "style", ["aria*"], ["data*"]],
+    // iframe attributes for video embeds
+    iframe: [
+      "src",
+      "width",
+      "height",
+      "frameborder",
+      "allowfullscreen",
+      "allow",
+      "title",
+      "referrerpolicy",
+      "loading",
+    ],
     // MathML attributes for KaTeX rendering
     annotation: ["encoding"],
     math: ["xmlns"],
@@ -40,6 +53,8 @@ export const SANITIZE_SCHEMA = {
   },
   tagNames: [
     ...(defaultSchema.tagNames || []),
+    // iframe for video embeds
+    "iframe",
     // MathML elements for KaTeX math rendering
     "math",
     "annotation",
@@ -56,4 +71,9 @@ export const SANITIZE_SCHEMA = {
     "mfrac",
     "mtext",
   ],
+  protocols: {
+    ...defaultSchema.protocols,
+    // Allow HTTPS iframe embeds only for security
+    iframe: { src: ["https"] },
+  },
 };

web/src/index.css

@@ -317,6 +317,16 @@
     border-radius: 0.5rem;
   }
 
+  /* ========================================
+   * Embedded Content (iframes, videos)
+   * ======================================== */
+
+  .markdown-content iframe {
+    max-width: 100%;
+    border-radius: 0.5rem;
+    border: 1px solid var(--border);
+  }
+
   /* ========================================
    * Inline Elements
    * No vertical spacing